Anonim

நீங்கள் ஒரு Chrome பயனராக இருந்தால், நீங்கள் ஒன்று அல்லது அதற்கு மேற்பட்ட நீட்டிப்புகளைப் பயன்படுத்துவீர்கள். விளம்பரங்களைத் தடுப்பதா அல்லது அம்சங்களைச் சேர்ப்பதா, நீட்டிப்புகள் உலாவியில் நிறைய பயன்பாடுகளைச் சேர்க்கின்றன. உங்கள் சொந்த Chrome நீட்டிப்பை உருவாக்க முடிந்தால் அது குளிர்ச்சியாக இருக்காது? அதைத்தான் நான் இங்கே காண்பிக்கிறேன்.

சிறந்த தொடுதிரை Chromebooks என்ற எங்கள் கட்டுரையையும் காண்க

வாடிக்கையாளர்களுக்கான வலைத்தளங்களை நான் பராமரிக்கும்போது, ​​ஒவ்வொரு தளமும் பக்க ஏற்றுதல் குறித்து எவ்வாறு செயல்படுகிறது என்பதை அறிய விரும்புகிறேன். கூகிள் இப்போது அதன் எஸ்சிஓ கணக்கீடுகளில் சுமை நேரங்களைப் பயன்படுத்துவதால், ஒரு தளத்தை மேம்படுத்தும்போது ஒரு பக்க சுமைகளை எவ்வளவு விரைவாக அல்லது மெதுவாக அறிவது ஒரு முக்கியமான மெட்ரிக் ஆகும். மொபைலுக்கான வலைத்தளத்தை மேம்படுத்தும்போது இது இன்னும் உண்மை. கூகிளுக்குள் அதிக மதிப்பெண் பெற இது பிழைகள் இல்லாமல் இலகுவாகவும், வேகமாகவும், ஏற்றப்படவும் வேண்டும்.

அதனுடன் சேர்த்து, சைட் பாயிண்டில் ஒரு ஆர்வமுள்ள நபர் பக்க வேகத்தை சரிபார்க்க நான் செய்யும் அதே வலைத்தளத்தையும் பயன்படுத்துகிறேன், ஜி.டிமெட்ரிக்ஸ் மற்றும் அதைச் சரிபார்க்க ஒரு குரோம் நீட்டிப்பை உருவாக்கியுள்ளது, நான் அதைச் செய்வேன் என்று நினைத்தேன்.

Chrome நீட்டிப்புகள்

Chrome நீட்டிப்புகள் முக்கிய உலாவியில் அம்சங்களைச் சேர்க்கும் மினி நிரல்கள். அவை பாதுகாப்பான கடவுச்சொல் நிர்வாகிகள் அல்லது ஸ்கிரிப்ட் முன்மாதிரிகளைப் போல நாம் உருவாக்கப் போகும் அல்லது சிக்கலானவையாக இருக்கலாம். HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் போன்ற இணக்கமான மொழிகளில் எழுதப்பட்டவை, அவை உலாவியுடன் அமர்ந்திருக்கும் தன்னிறைவான கோப்புகள்.

தேவைக்கேற்ப, பெரும்பாலான நீட்டிப்புகள் கொடுக்கப்பட்ட செயலைச் செய்யும் எளிய ஐகான் கிளிக் செயலாக்கங்களாகும். அந்த நடவடிக்கை உண்மையில் நீங்கள் Chrome செய்ய விரும்பும் எதையும் கொண்டிருக்கலாம்.

உங்கள் சொந்த Chrome நீட்டிப்பை உருவாக்கவும்

ஒரு சிறிய ஆராய்ச்சி மூலம், நீங்கள் விரும்பியதைச் செய்ய உங்கள் நீட்டிப்பை மாற்றியமைக்கலாம், ஆனால் ஒரு பொத்தான் வேக சோதனைக்கான யோசனையை நான் விரும்புகிறேன், அதனால் நான் செல்கிறேன்.

வழக்கமாக, நீங்கள் தள வேகத்தை சரிபார்க்கும்போது, ​​நீங்கள் இருக்கும் பக்கத்தின் URL ஐ GTmetrix, Pingdom அல்லது எங்கிருந்தாலும் ஒட்டவும், பகுப்பாய்வு என்பதை அழுத்தவும். இது சில வினாடிகள் மட்டுமே ஆகும், ஆனால் உங்கள் உலாவியில் ஒரு ஐகானைத் தேர்ந்தெடுத்து அதை உங்களுக்காகச் செய்தால் நன்றாக இருக்காது? இந்த டுடோரியல் மூலம் பணிபுரிந்த பிறகு, நீங்கள் அதை செய்ய முடியும்.

எல்லாவற்றையும் வைத்திருக்க உங்கள் கணினியில் ஒரு கோப்புறையை உருவாக்க வேண்டும். Manifest.json, popup.html மற்றும் popup.js ஆகிய மூன்று வெற்று கோப்புகளை உருவாக்கவும். உங்கள் புதிய கோப்புறையின் உள்ளே வலது கிளிக் செய்து புதிய மற்றும் உரை கோப்பைத் தேர்ந்தெடுக்கவும். உங்கள் மூன்று கோப்புகளில் ஒவ்வொன்றையும் உங்கள் விருப்பமான உரை திருத்தியில் திறக்கவும். Popup.html ஒரு HTML கோப்பாகவும், popup.js ஜாவாஸ்கிரிப்ட் கோப்பாகவும் சேமிக்கப்படுவதை உறுதிசெய்க. இந்த டுடோரியலின் நோக்கங்களுக்காக இந்த மாதிரி ஐகானை Google இலிருந்து பதிவிறக்கவும்.

Manifest.json ஐத் தேர்ந்தெடுத்து அதில் பின்வருவனவற்றை ஒட்டவும்:

Man "மேனிஃபெஸ்ட்_வெர்ஷன்": 2, "பெயர்": "ஜிடிமெட்ரிக்ஸ் பக்க வேக பகுப்பாய்வி", "விளக்கம்": "வலைத்தள பக்க ஏற்றுதல் வேகத்தை பகுப்பாய்வு செய்ய ஜிடிமெட்ரிக்ஸைப் பயன்படுத்தவும்", "பதிப்பு": "1.0", "உலாவி_விளைவு": default "இயல்புநிலை_கான்" : "icon.png", "default_popup": "popup.html"}, "அனுமதிகள்":}

நீங்கள் பார்க்க முடியும் என, நாங்கள் அதை ஒரு தலைப்பு மற்றும் அடிப்படை விளக்கத்தை கொடுத்துள்ளோம். உங்கள் உலாவி பட்டியில் மற்றும் popup.html இல் தோன்றும் Google இலிருந்து நாங்கள் பதிவிறக்கிய ஐகானை உள்ளடக்கிய உலாவி செயலையும் நாங்கள் அழைத்தோம். உலாவியில் நீட்டிப்பு ஐகானைத் தேர்ந்தெடுக்கும்போது Popup.html என அழைக்கப்படுகிறது.

Popup.html ஐத் திறந்து பின்வருவதை அதில் ஒட்டவும்.

ஜிடிமெட்ரிக்ஸைப் பயன்படுத்தி பேஜ்ஸ்பீட் அனலைசர் : http: //popup.js

ஜிடிமெட்ரிக்ஸைப் பயன்படுத்தி பேஜ்ஸ்பீட் அனலைசர்

உலாவியில் நீட்டிப்பு ஐகானைத் தேர்ந்தெடுக்கும்போது Popup.html என அழைக்கப்படுகிறது. நாங்கள் அதற்கு ஒரு பெயரைக் கொடுத்துள்ளோம், பாப்அப் என்று பெயரிட்டு ஒரு பொத்தானைச் சேர்த்துள்ளோம். பொத்தானைத் தேர்ந்தெடுப்பது popup.js ஐ அழைக்கும், இது நாம் அடுத்ததாக முடிக்கும் கோப்பு.

Popup.js ஐத் திறந்து பின்வருவனவற்றை அதில் ஒட்டவும்:

document.addEventListener ('DOMContentLoaded', செயல்பாடு () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('கிளிக்', செயல்பாடு () {chrome.tabs.getSelected (பூஜ்ய, செயல்பாடு (தாவல்) = ஆவணம்; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'உள்ளீடு'); i.type = 'மறைக்கப்பட்ட'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, பொய்);}, பொய்);

ஜாவாஸ்கிரிப்டை நான் அறிந்திருக்க மாட்டேன், அதனால்தான் சைட் பாயிண்ட் ஏற்கனவே கோப்பை வைத்திருந்தது எளிது. தற்போதைய Chrome தாவலில் பக்கத்தை பகுப்பாய்வு செய்ய இது GTmetrix ஐக் கூறுகிறது என்பது எனக்குத் தெரியும். 'Chrome.tabs.getSelected' என்று அது சொல்லும் இடத்தில், நீட்டிப்பு செயலில் உள்ள தாவலில் இருந்து URL ஐ எடுத்து வலை வடிவத்தில் நுழைகிறது. அது என்னால் செல்லக்கூடிய அளவிற்கு உள்ளது.

உங்கள் Chrome நீட்டிப்பை சோதிக்கிறது

இப்போது எங்களிடம் அடிப்படை கட்டமைப்பைக் கொண்டிருக்கிறோம், அது எவ்வாறு செயல்படுகிறது என்பதைப் பார்க்க நாம் சோதிக்க வேண்டும்.

  1. Chrome ஐத் திற, மேலும் கருவிகள் மற்றும் நீட்டிப்புகளைத் தேர்ந்தெடுக்கவும்.
  2. அதை இயக்க டெவலப்பர் பயன்முறைக்கு அடுத்த பெட்டியை சரிபார்க்கவும்.
  3. தொகுக்கப்படாத நீட்டிப்பை ஏற்று என்பதைத் தேர்ந்தெடுத்து இந்த நீட்டிப்புக்காக நீங்கள் உருவாக்கிய கோப்பிற்கு செல்லவும்.
  4. நீட்டிப்பை ஏற்ற சரி என்பதைத் தேர்ந்தெடுக்கவும், அது உங்கள் நீட்டிப்புகள் பட்டியலில் தோன்றும்.
  5. பட்டியலில் இயக்கப்பட்டதற்கு அடுத்துள்ள பெட்டியை சரிபார்க்கவும், உங்கள் உலாவியில் ஐகான் தோன்றும்.
  6. உலாவியில் ஐகானைத் தேர்ந்தெடுக்கவும், அதனால் பாப் அப் தோன்றும்.
  7. பொத்தானைத் தேர்ந்தெடுக்கவும், இந்தப் பக்கத்தை இப்போது சரிபார்க்கவும்!

பக்கம் சரிபார்க்கப்படுவதையும் GTmetrix இன் செயல்திறன் அறிக்கையையும் நீங்கள் பார்க்க வேண்டும். பிரதான படத்தில் எனது சொந்த தளத்திலிருந்து நீங்கள் காணக்கூடியது போல, எனது புதிய வடிவமைப்பை விரைவுபடுத்துவதற்கு எனக்கு ஒரு சிறிய வேலை இருக்கிறது!

நீட்டிப்புகளை முன்னோக்கி எடுத்துக்கொள்வது

உங்கள் சொந்த Chrome நீட்டிப்பை உருவாக்குவது போல் தோன்றுவது கடினம் அல்ல. ஒரு சிறிய குறியீட்டை அறிந்துகொள்வதன் மூலம் ஒரு தொடக்கத்தைத் தொடங்க இது நிச்சயமாக உதவியது என்றாலும், ஆன்லைனில் நூற்றுக்கணக்கான ஆதாரங்கள் உள்ளன, அவை உங்களுக்குக் காண்பிக்கும். கூடுதலாக, கூகிள் ஒரு பெரிய தகவல் களஞ்சியத்தைக் கொண்டுள்ளது, பயிற்சிகள் மற்றும் ஒத்திகைகள் உதவும். இந்த நீட்டிப்புக்கு எனக்கு உதவ Google டெவலப்பர் தளத்திலிருந்து இந்தப் பக்கத்தைப் பயன்படுத்தினேன். நீட்டிப்பை உருவாக்கும் ஒவ்வொரு பகுதியிலும் பக்கம் உங்களை அழைத்துச் சென்று, நாங்கள் முன்பு பயன்படுத்திய ஐகானை வழங்குகிறது.

போதுமான ஆராய்ச்சி மூலம், உலாவி திறன் கொண்ட எதையும் செய்யக்கூடிய நீட்டிப்புகளை நீங்கள் உருவாக்கலாம். Chrome ஸ்டோரில் உள்ள சில சிறந்த நீட்டிப்புகள் தனிநபர்களிடமிருந்து வந்தவை, நிறுவனங்களிலிருந்து அல்ல, நீங்கள் உண்மையில் உங்கள் சொந்தத்தை உருவாக்க முடியும் என்பதை நிரூபிக்கிறது.

அசல் வழிகாட்டலுக்காக சைட் பாயிண்டில் ஜான் சோன்மெஸுக்கு அனைத்து வரவுகளும். அவர் கடின உழைப்பைச் செய்தார், நான் அதை கொஞ்சம் மறுசீரமைத்து சிறிது புதுப்பித்தேன்.

உங்கள் சொந்த Chrome நீட்டிப்பை உருவாக்கியுள்ளீர்களா? அதை விளம்பரப்படுத்த அல்லது பகிர விரும்புகிறீர்களா? நீங்கள் செய்தால் கீழே எங்களுக்குத் தெரியப்படுத்துங்கள்!

Chrome நீட்டிப்பை எவ்வாறு உருவாக்குவது