உலாவி நீட்டிப்பு மேம்பாடு: மேனிஃபெஸ்ட் V3 மற்றும் ஜாவாஸ்கிரிப்ட் APIகள்

உலாவி நீட்டிப்புகள் (Browser extensions) என்பவை உலாவல் அனுபவத்தைத் தனிப்பயனாக்கும் சிறிய மென்பொருள் நிரல்களாகும். அவை புதிய அம்சங்களைச் சேர்க்கலாம், வலைத்தள உள்ளடக்கத்தை மாற்றியமைக்கலாம், விளம்பரங்களைத் தடுக்கலாம், மற்றும் பலவற்றைச் செய்யலாம். மேனிஃபெஸ்ட் V3-இன் வருகையுடன், நீட்டிப்புகள் உருவாக்கப்பட்டு செயல்படும் விதம் குறிப்பிடத்தக்க மாற்றங்களுக்கு உள்ளாகியுள்ளது. இந்த விரிவான வழிகாட்டி, மேனிஃபெஸ்ட் V3 மற்றும் ஜாவாஸ்கிரிப்ட் APIகளைப் பயன்படுத்தி உலாவி நீட்டிப்பு மேம்பாட்டை ஆராய்ந்து, நவீன உலாவிகளுக்கு சக்திவாய்ந்த மற்றும் பாதுகாப்பான நீட்டிப்புகளை உருவாக்கத் தேவையான அறிவை உங்களுக்கு வழங்கும்.

உலாவி நீட்டிப்புகள் என்றால் என்ன?

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

பிரபலமான உலாவி நீட்டிப்புகளின் எடுத்துக்காட்டுகள்:

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

மேனிஃபெஸ்ட் V3-இன் முக்கியத்துவம்

மேனிஃபெஸ்ட் V3 என்பது மேனிஃபெஸ்ட் கோப்பின் சமீபத்திய பதிப்பாகும், இது நீட்டிப்பை உலாவிக்கு விவரிக்கும் ஒரு JSON கோப்பாகும். இது நீட்டிப்பின் பெயர், பதிப்பு, அனுமதிகள், பின்னணி ஸ்கிரிப்டுகள் மற்றும் பிற அத்தியாவசிய மெட்டாடேட்டாவை கோடிட்டுக் காட்டுகிறது. மேனிஃபெஸ்ட் V3 அதன் முந்தைய பதிப்பான மேனிஃபெஸ்ட் V2-ஐ விட பல முக்கிய மாற்றங்களை அறிமுகப்படுத்துகிறது, இது முதன்மையாக பாதுகாப்பு மற்றும் செயல்திறனில் கவனம் செலுத்துகிறது.

மேனிஃபெஸ்ட் V3-இல் உள்ள முக்கிய மாற்றங்கள்:

• சர்வீஸ் வொர்க்கர்கள் (Service Workers): மேனிஃபெஸ்ட் V3 பின்னணிப் பக்கங்களுக்குப் பதிலாக சர்வீஸ் வொர்க்கர்களைப் பயன்படுத்துகிறது. சர்வீஸ் வொர்க்கர்கள் நிகழ்வு-இயக்கப்படும் ஸ்கிரிப்டுகள் ஆகும், அவை ஒரு நிலையான பக்கம் தேவையில்லாமல் பின்னணியில் இயங்கும். அவை பின்னணிப் பக்கங்களை விட திறமையானவை மற்றும் குறைந்த வளங்களைப் பயன்படுத்துகின்றன.
• டிக்ளரேட்டிவ் நெட் ரிக்வெஸ்ட் API (Declarative Net Request API): இந்த API, நீட்டிப்புகளை நேரடியாக நெட்வொர்க் கோரிக்கைகளை இடைமறிக்காமல் மாற்றியமைக்க அனுமதிக்கிறது. இது வடிகட்டுதல் தர்க்கத்தை உலாவிக்கு மாற்றுவதன் மூலம் பாதுகாப்பு மற்றும் செயல்திறனை மேம்படுத்துகிறது.
• கடுமையான உள்ளடக்கப் பாதுகாப்புக் கொள்கை (CSP): மேனிஃபெஸ்ட் V3 தன்னிச்சையான குறியீட்டை இயக்குவதைத் தடுக்க கடுமையான CSP விதிகளைச் செயல்படுத்துகிறது, இது பாதுகாப்பை மேலும் மேம்படுத்துகிறது.
• ப்ராமிஸ்-அடிப்படையிலான APIகள் (Promise-based APIs): பல APIகள் இப்போது ப்ராமிஸ்-அடிப்படையிலானவை, இது ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிப்பதை எளிதாக்குகிறது.

ஏன் மேனிஃபெஸ்ட் V3-க்கு மாற வேண்டும்?

• மேம்படுத்தப்பட்ட பாதுகாப்பு: மேனிஃபெஸ்ட் V3 உலாவி நீட்டிப்புகளின் பாதுகாப்பை மேம்படுத்தவும், பயனர்களை தீங்கிழைக்கும் குறியீட்டிலிருந்து பாதுகாக்கவும் வடிவமைக்கப்பட்டுள்ளது.
• மேம்பட்ட செயல்திறன்: சர்வீஸ் வொர்க்கர்கள் மற்றும் டிக்ளரேட்டிவ் நெட் ரிக்வெஸ்ட் API சிறந்த செயல்திறன் மற்றும் குறைந்த வள நுகர்வுக்கு பங்களிக்கின்றன.
• அதிக தனியுரிமை: மேனிஃபெஸ்ட் V3 பயனர்களுக்கு அவர்களின் தரவு மற்றும் தனியுரிமையின் மீது அதிக கட்டுப்பாட்டைக் கொடுப்பதை நோக்கமாகக் கொண்டுள்ளது.

உங்கள் மேம்பாட்டுச் சூழலை அமைத்தல்

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

1. கோட் எடிட்டர்

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

• விஷுவல் ஸ்டுடியோ கோட் (VS Code): ஜாவாஸ்கிரிப்ட் மற்றும் பிற வலை தொழில்நுட்பங்களுக்கு சிறந்த ஆதரவுடன் கூடிய ஒரு இலவச மற்றும் சக்திவாய்ந்த கோட் எடிட்டர்.
• சப்லைம் டெக்ஸ்ட் (Sublime Text): பரந்த அளவிலான செருகுநிரல்களுடன் கூடிய வேகமான மற்றும் தனிப்பயனாக்கக்கூடிய கோட் எடிட்டர்.
• ஆட்டம் (Atom): கிட்ஹப் (GitHub) உருவாக்கிய ஒரு இலவச மற்றும் திறந்த மூல கோட் எடிட்டர்.

2. சோதிப்பதற்கான உலாவி

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

3. அடிப்படை கோப்பு கட்டமைப்பு

ஒரு உலாவி நீட்டிப்பு பொதுவாக பின்வரும் கோப்புகளைக் கொண்டுள்ளது:

• manifest.json: இந்த கோப்பு நீட்டிப்பின் பெயர், பதிப்பு, அனுமதிகள் மற்றும் பின்னணி ஸ்கிரிப்டுகள் போன்ற மெட்டாடேட்டாவைக் கொண்டுள்ளது.
• background.js (அல்லது சர்வீஸ் வொர்க்கர் ஸ்கிரிப்ட்): இந்த ஸ்கிரிப்ட் பின்னணியில் இயங்குகிறது மற்றும் உலாவி செயல்பாடுகள் மற்றும் சூழல் மெனு கிளிக்குகள் போன்ற நிகழ்வுகளைக் கையாளுகிறது.
• content.js: இந்த ஸ்கிரிப்ட் வலைப்பக்கங்களின் சூழலில் இயங்குகிறது மற்றும் அவற்றின் உள்ளடக்கத்தை மாற்றியமைக்க முடியும்.
• popup.html: இந்த கோப்பு நீட்டிப்பின் பாப்-அப்பின் பயனர் இடைமுகத்தை வரையறுக்கிறது.
• popup.js: இந்த ஸ்கிரிப்ட் நீட்டிப்பின் பாப்-அப்பின் தர்க்கத்தைக் கையாளுகிறது.
• options.html: இந்த கோப்பு நீட்டிப்பின் விருப்பங்கள் பக்கத்தின் பயனர் இடைமுகத்தை வரையறுக்கிறது.
• options.js: இந்த ஸ்கிரிப்ட் நீட்டிப்பின் விருப்பங்கள் பக்கத்தின் தர்க்கத்தைக் கையாளுகிறது.
• ஐகான்கள்: இவை உலாவியின் கருவிப்பட்டி மற்றும் நீட்டிப்பு மேலாண்மை பக்கத்தில் நீட்டிப்பைக் குறிக்கப் பயன்படுத்தப்படும் ஐகான்கள்.

உங்கள் முதல் நீட்டிப்பை உருவாக்குதல்: "வணக்கம், உலகமே!"

உலாவி நீட்டிப்பு மேம்பாட்டின் அடிப்படைக் கொள்கைகளை விளக்க, ஒரு எளிய "வணக்கம், உலகமே!" நீட்டிப்பை உருவாக்குவோம்.

1. ஒரு மேனிஃபெஸ்ட் கோப்பை உருவாக்கவும் (manifest.json)

ஒரு புதிய கோப்பகத்தில் `manifest.json` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "A simple Hello, World! extension",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

விளக்கம்:

• `manifest_version`: மேனிஃபெஸ்ட் கோப்பின் பதிப்பைக் குறிப்பிடுகிறது (மேனிஃபெஸ்ட் V3-க்கு 3).
• `name`: நீட்டிப்பின் பெயர்.
• `version`: நீட்டிப்பின் பதிப்பு எண்.
• `description`: நீட்டிப்பின் ஒரு சுருக்கமான விளக்கம்.
• `permissions`: நீட்டிப்புக்குத் தேவையான அனுமதிகளின் வரிசை (எ.கா., "storage").
• `action`: நீட்டிப்பின் பாப்-அப்பின் பண்புகளை வரையறுக்கிறது, இயல்புநிலை பாப்-அப் கோப்பு மற்றும் ஐகான்கள் உட்பட.
• `icons`: நீட்டிப்பின் ஐகான்களுக்கான பாதைகளைக் குறிப்பிடுகிறது.

2. ஒரு பாப்-அப் கோப்பை உருவாக்கவும் (popup.html)

அதே கோப்பகத்தில் `popup.html` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

<!DOCTYPE html>
<html>
<head>
  <title>வணக்கம், உலகமே!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>வணக்கம், உலகமே!</h1>
  <p>இது ஒரு எளிய உலாவி நீட்டிப்பு.</p>
</body>
</html>

இந்த கோப்பு நீட்டிப்பின் பாப்-அப்பின் பயனர் இடைமுகத்தை வரையறுக்கிறது, இது "வணக்கம், உலகமே!" செய்தியைக் காண்பிக்கும்.

3. ஐகான் படங்களை உருவாக்கவும்

16x16, 48x48, மற்றும் 128x128 பிக்சல்கள் அளவுகளில் மூன்று ஐகான் படங்களை உருவாக்கவும். அவற்றை உங்கள் நீட்டிப்பு கோப்பகத்திற்குள் ஒரு `images` கோப்பகத்தில் `icon16.png`, `icon48.png`, மற்றும் `icon128.png` என சேமிக்கவும்.

4. நீட்டிப்பை உங்கள் உலாவியில் ஏற்றவும்

குரோம்:

1. குரோம் திறந்து `chrome://extensions` க்குச் செல்லவும்.
2. மேல் வலது மூலையில் "டெவலப்பர் பயன்முறையை" (Developer mode) இயக்கவும்.
3. "பேக் செய்யப்படாததை ஏற்று" (Load unpacked) என்பதைக் கிளிக் செய்து, உங்கள் நீட்டிப்புக் கோப்புகளைக் கொண்ட கோப்பகத்தைத் தேர்ந்தெடுக்கவும்.

ஃபயர்பாக்ஸ்:

1. ஃபயர்பாக்ஸ் திறந்து `about:debugging#/runtime/this-firefox` க்குச் செல்லவும்.
2. "தற்காலிக துணை நிரலை ஏற்று..." (Load Temporary Add-on...) என்பதைக் கிளிக் செய்து, `manifest.json` கோப்பைத் தேர்ந்தெடுக்கவும்.

உங்கள் "வணக்கம், உலகமே!" நீட்டிப்பு இப்போது நிறுவப்பட்டு உலாவியின் கருவிப்பட்டியில் தெரியும். பாப்-அப்பைத் திறந்து "வணக்கம், உலகமே!" செய்தியைக் காண நீட்டிப்பு ஐகானைக் கிளிக் செய்யவும்.

ஜாவாஸ்கிரிப்ட் APIகளுடன் வேலை செய்தல்

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

• Tabs API: உலாவி தாவல்களை நிர்வகிக்க உங்களை அனுமதிக்கிறது, இதில் தாவல்களை உருவாக்குதல், புதுப்பித்தல் மற்றும் வினவுதல் ஆகியவை அடங்கும்.
• Storage API: நீட்டிப்பிற்குள் தரவை தொடர்ந்து சேமித்து மீட்டெடுக்க ஒரு வழியை வழங்குகிறது.
• Alarms API: குறிப்பிட்ட நேரங்களில் செயல்படுத்தப்படும் பணிகளைத் திட்டமிட உங்களை அனுமதிக்கிறது.
• Notifications API: பயனருக்கு அறிவிப்புகளைக் காட்ட உங்களை அனுமதிக்கிறது.
• Context Menus API: உலாவியின் சூழல் மெனுவில் (வலது கிளிக் மெனு) தனிப்பயன் உருப்படிகளைச் சேர்க்க உங்களை அனுமதிக்கிறது.
• Web Request API (மேனிஃபெஸ்ட் V3-ல் டிக்ளரேட்டிவ் நெட் ரிக்வெஸ்ட்): நெட்வொர்க் கோரிக்கைகளை இடைமறித்து மாற்றியமைக்க உங்களை அனுமதிக்கிறது.
• Scripting API: வலைப்பக்கங்களில் ஸ்கிரிப்ட்களைச் செலுத்த அனுமதிக்கிறது.

எடுத்துக்காட்டு: ஸ்டோரேஜ் API-ஐப் பயன்படுத்துதல்

ஸ்டோரேஜ் API-ஐப் பயன்படுத்தி ஒரு பயனரின் பெயரைச் சேமித்து மீட்டெடுக்கும் ஒரு நீட்டிப்பை உருவாக்குவோம்.

1. மேனிஃபெஸ்ட் கோப்பைப் புதுப்பிக்கவும் (manifest.json)

உங்கள் `manifest.json`-இல் உள்ள `permissions` வரிசையில் `"storage"` சேர்க்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்:

{
  "manifest_version": 3,
  "name": "Storage Example",
  "version": "1.0",
  "description": "An extension that uses the Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. ஒரு பாப்-அப் கோப்பை உருவாக்கவும் (popup.html)

உங்கள் `popup.html`-ஐ பின்வரும் உள்ளடக்கத்துடன் உருவாக்கவும் அல்லது புதுப்பிக்கவும்:

<!DOCTYPE html>
<html>
<head>
  <title>ஸ்டோரேஜ் எடுத்துக்காட்டு</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>ஸ்டோரேஜ் எடுத்துக்காட்டு</h1>
  <label for="name">உங்கள் பெயரை உள்ளிடவும்:</label>
  <input type="text" id="name">
  <button id="save">சேமி</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

3. ஒரு பாப்-அப் ஸ்கிரிப்டை உருவாக்கவும் (popup.js)

`popup.js` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // ஸ்டோரேஜிலிருந்து சேமிக்கப்பட்ட பெயரை ஏற்றவும்
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `வணக்கம், ${data.name}!`;
    }
  });

  // பட்டனைக் கிளிக் செய்யும்போது பெயரை ஸ்டோரேஜில் சேமிக்கவும்
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `வணக்கம், ${name}!`;
    });
  });
});

விளக்கம்:

• குறியீட்டை இயக்கும் முன் DOM முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதி செய்ய, இந்த ஸ்கிரிப்ட் `DOMContentLoaded` நிகழ்வைக் கேட்கிறது.
• இது உள்ளீட்டு புலம், சேமி பட்டன் மற்றும் வாழ்த்துப் பத்தி ஆகியவற்றின் குறிப்புகளைப் பெறுகிறது.
• இது `chrome.storage.sync.get()` பயன்படுத்தி ஸ்டோரேஜிலிருந்து சேமிக்கப்பட்ட பெயரை ஏற்றுகிறது.
• சேமி பட்டனைக் கிளிக் செய்யும்போது `chrome.storage.sync.set()` பயன்படுத்தி பெயரை ஸ்டோரேஜில் சேமிக்கிறது.
• இது சேமிக்கப்பட்ட அல்லது உள்ளிடப்பட்ட பெயருடன் வாழ்த்துப் பத்தியைப் புதுப்பிக்கிறது.

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

எடுத்துக்காட்டு: Tabs API-ஐப் பயன்படுத்துதல்

தற்போதைய தாவலின் URL-ஐ ஒரு பாப்-அப்பில் காட்டும் ஒரு நீட்டிப்பை உருவாக்குவோம்.

1. மேனிஃபெஸ்ட் கோப்பைப் புதுப்பிக்கவும் (manifest.json)

உங்கள் `manifest.json`-இல் உள்ள `permissions` வரிசையில் `"tabs"` அனுமதியைச் சேர்க்கவும்:

{
  "manifest_version": 3,
  "name": "Tabs Example",
  "version": "1.0",
  "description": "An extension that uses the Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. ஒரு பாப்-அப் கோப்பை உருவாக்கவும் (popup.html)

உங்கள் `popup.html`-ஐ பின்வரும் உள்ளடக்கத்துடன் உருவாக்கவும் அல்லது புதுப்பிக்கவும்:

<!DOCTYPE html>
<html>
<head>
  <title>Tabs எடுத்துக்காட்டு</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Tabs எடுத்துக்காட்டு</h1>
  <p>தற்போதைய தாவலின் URL:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

3. ஒரு பாப்-அப் ஸ்கிரிப்டை உருவாக்கவும் (popup.js)

`popup.js` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // தற்போதைய தாவலின் URL-ஐப் பெறவும்
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

விளக்கம்:

• இந்த ஸ்கிரிப்ட் `DOMContentLoaded` நிகழ்வைக் கேட்கிறது.
• தற்போதைய சாளரத்தில் செயலில் உள்ள தாவலைப் பெற `chrome.tabs.query()`-ஐப் பயன்படுத்துகிறது.
• இது தாவலின் URL-ஐப் பெற்று அதை `url` பத்தியில் காட்டுகிறது.

உங்கள் உலாவியில் நீட்டிப்பை மீண்டும் ஏற்றவும். இப்போது, நீங்கள் பாப்-அப்பைத் திறக்கும்போது, அது தற்போதைய தாவலின் URL-ஐக் காண்பிக்கும்.

பின்னணி ஸ்கிரிப்டுகள் மற்றும் சர்வீஸ் வொர்க்கர்கள்

மேனிஃபெஸ்ட் V3-இல், பின்னணி ஸ்கிரிப்டுகளுக்குப் பதிலாக சர்வீஸ் வொர்க்கர்கள் பயன்படுத்தப்படுகின்றன. சர்வீஸ் வொர்க்கர்கள் நிகழ்வு-இயக்கப்படும் ஸ்கிரிப்டுகள் ஆகும், அவை ஒரு நிலையான பக்கம் தேவையில்லாமல் பின்னணியில் இயங்கும். அவை பின்னணிப் பக்கங்களை விட திறமையானவை மற்றும் குறைந்த வளங்களைப் பயன்படுத்துகின்றன.

சர்வீஸ் வொர்க்கர்களின் முக்கிய அம்சங்கள்:

• நிகழ்வு-இயக்கப்படுதல்: சர்வீஸ் வொர்க்கர்கள் உலாவி செயல்பாடுகள், அலாரங்கள் மற்றும் உள்ளடக்க ஸ்கிரிப்டுகளிலிருந்து வரும் செய்திகள் போன்ற நிகழ்வுகளுக்கு பதிலளிக்கின்றன.
• ஒத்திசைவற்றது: சர்வீஸ் வொர்க்கர்கள் பிரதான திரியைத் தடுக்காமல் இருக்க ஒத்திசைவற்ற API-களைப் பயன்படுத்துகின்றன.
• செயலற்ற நிலையில் நிறுத்தப்படும்: சர்வீஸ் வொர்க்கர்கள் நிகழ்வுகளைச் செயலில் கையாளாதபோது நிறுத்தப்படுகின்றன, இது வளங்களைச் சேமிக்கிறது.

எடுத்துக்காட்டு: ஒரு சர்வீஸ் வொர்க்கரைப் பயன்படுத்துதல்

உலாவி தொடங்கும் போது ஒரு அறிவிப்பைக் காட்டும் நீட்டிப்பை உருவாக்குவோம்.

1. மேனிஃபெஸ்ட் கோப்பைப் புதுப்பிக்கவும் (manifest.json)

உங்கள் `manifest.json`-ஐ பின்வரும் உள்ளடக்கத்துடன் புதுப்பிக்கவும்:

{
  "manifest_version": 3,
  "name": "Service Worker Example",
  "version": "1.0",
  "description": "An extension that uses a service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

விளக்கம்:

• `"background"` பண்பு சர்வீஸ் வொர்க்கர் ஸ்கிரிப்ட்டின் பாதையைக் குறிப்பிடுகிறது (`background.js`).
• `"permissions"` வரிசையில் `"notifications"` சேர்க்கப்பட்டுள்ளது, இது அறிவிப்புகளைக் காட்டத் தேவை.

2. ஒரு சர்வீஸ் வொர்க்கர் ஸ்கிரிப்டை உருவாக்கவும் (background.js)

`background.js` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

chrome.runtime.onStartup.addListener(() => {
  // உலாவி தொடங்கும் போது ஒரு அறிவிப்பைக் காட்டவும்
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser Started',
    message: 'The browser has started.',
  });
});

விளக்கம்:

• இந்த ஸ்கிரிப்ட் `chrome.runtime.onStartup` நிகழ்வைக் கேட்கிறது, இது உலாவி தொடங்கும் போது தூண்டப்படுகிறது.
• இது குறிப்பிட்ட பண்புகளுடன் ஒரு அறிவிப்பைக் காட்ட `chrome.notifications.create()`-ஐப் பயன்படுத்துகிறது.

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

உள்ளடக்க ஸ்கிரிப்டுகள் (Content Scripts)

உள்ளடக்க ஸ்கிரிப்டுகள் வலைப்பக்கங்களின் சூழலில் இயங்கும் ஜாவாஸ்கிரிப்ட் கோப்புகள். அவை வலைப்பக்கங்களின் DOM-ஐ அணுகி மாற்றியமைக்க முடியும், இது வலைத்தளங்களின் நடத்தை மற்றும் தோற்றத்தைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது.

உள்ளடக்க ஸ்கிரிப்டுகளின் முக்கிய அம்சங்கள்:

• DOM-க்கான அணுகல்: உள்ளடக்க ஸ்கிரிப்டுகள் வலைப்பக்கங்களின் DOM-ஐ அணுகி கையாள முடியும்.
• வலைப்பக்க ஸ்கிரிப்டுகளிலிருந்து தனிமைப்படுத்தல்: உள்ளடக்க ஸ்கிரிப்டுகள் ஒரு தனிமைப்படுத்தப்பட்ட சூழலில் இயங்குகின்றன, இது வலைப்பக்க ஸ்கிரிப்டுகளுடன் முரண்பாடுகளைத் தடுக்கிறது.
• பின்னணி ஸ்கிரிப்டுகளுடன் தொடர்பு: உள்ளடக்க ஸ்கிரிப்டுகள் செய்தி அனுப்புதல் மூலம் பின்னணி ஸ்கிரிப்டுகளுடன் தொடர்பு கொள்ளலாம்.

எடுத்துக்காட்டு: ஒரு உள்ளடக்க ஸ்கிரிப்டைப் பயன்படுத்துதல்

வலைப்பக்கங்களின் பின்னணி நிறத்தை வெளிர் நீலத்திற்கு மாற்றும் ஒரு நீட்டிப்பை உருவாக்குவோம்.

1. மேனிஃபெஸ்ட் கோப்பைப் புதுப்பிக்கவும் (manifest.json)

உங்கள் `manifest.json`-ஐ பின்வரும் உள்ளடக்கத்துடன் புதுப்பிக்கவும்:

{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "description": "An extension that uses a content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

விளக்கம்:

• `"content_scripts"` பண்பு வலைப்பக்கங்களில் செலுத்தப்பட வேண்டிய உள்ளடக்க ஸ்கிரிப்டுகளின் வரிசையைக் குறிப்பிடுகிறது.
• `"matches"` உள்ளடக்க ஸ்கிரிப்ட் செலுத்தப்பட வேண்டிய URL-களைக் குறிப்பிடுகிறது (`<all_urls>` அனைத்து URL-களுக்கும் பொருந்தும்).
• `"js"` உள்ளடக்க ஸ்கிரிப்ட்டின் பாதையைக் குறிப்பிடுகிறது (`content.js`).
• `"permissions"` வரிசையில் `"activeTab"` மற்றும் `"scripting"` சேர்க்கப்பட்டுள்ளது, இது ஸ்கிரிப்ட்களைச் செலுத்தத் தேவை.

2. ஒரு உள்ளடக்க ஸ்கிரிப்டை உருவாக்கவும் (content.js)

`content.js` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

document.body.style.backgroundColor = 'lightblue';

3. ஒரு சர்வீஸ் வொர்க்கரை உருவாக்கவும் (background.js)

`background.js` என்ற பெயரில் ஒரு கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

விளக்கம்:

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

உங்கள் உலாவியில் நீட்டிப்பை மீண்டும் ஏற்றவும். இப்போது, நீங்கள் எந்த வலைப்பக்கத்தைத் திறந்தாலும், பின்னணி நிறம் வெளிர் நீலமாக இருக்கும்.

உலாவி நீட்டிப்புகளை பிழைதிருத்தம் செய்தல்

உலாவி நீட்டிப்புகளைப் பிழைதிருத்தம் செய்வது மேம்பாட்டு செயல்முறையின் ஒரு முக்கிய பகுதியாகும். குரோம் மற்றும் ஃபயர்பாக்ஸ் நீட்டிப்புகளைப் பிழைதிருத்தம் செய்ய சிறந்த டெவலப்பர் கருவிகளை வழங்குகின்றன.

குரோமில் பிழைதிருத்தம்:

1. குரோம் திறந்து `chrome://extensions` க்குச் செல்லவும்.
2. மேல் வலது மூலையில் "டெவலப்பர் பயன்முறையை" இயக்கவும்.
3. உங்கள் நீட்டிப்பிற்கு "பின்னணிப் பக்கத்தை ஆய்வு செய்" (Inspect views background page) என்பதைக் கிளிக் செய்யவும். இது பின்னணி ஸ்கிரிப்ட்டிற்கான குரோம் டெவ்டூல்ஸைத் திறக்கும்.
4. உள்ளடக்க ஸ்கிரிப்டுகளைப் பிழைதிருத்தம் செய்ய, உள்ளடக்க ஸ்கிரிப்ட் செலுத்தப்பட்ட வலைப்பக்கத்தைத் திறந்து, பின்னர் அந்தப் பக்கத்திற்கான குரோம் டெவ்டூல்ஸைத் திறக்கவும். "மூலங்கள்" (Sources) பேனலில் உங்கள் உள்ளடக்க ஸ்கிரிப்ட் பட்டியலிடப்பட்டிருப்பதைக் காண்பீர்கள்.

ஃபயர்பாக்ஸில் பிழைதிருத்தம்:

1. ஃபயர்பாக்ஸ் திறந்து `about:debugging#/runtime/this-firefox` க்குச் செல்லவும்.
2. பட்டியலில் உங்கள் நீட்டிப்பைக் கண்டுபிடித்து "ஆய்வு செய்" (Inspect) என்பதைக் கிளிக் செய்யவும். இது நீட்டிப்பிற்கான ஃபயர்பாக்ஸ் டெவலப்பர் கருவிகளைத் திறக்கும்.
3. உள்ளடக்க ஸ்கிரிப்டுகளைப் பிழைதிருத்தம் செய்ய, உள்ளடக்க ஸ்கிரிப்ட் செலுத்தப்பட்ட வலைப்பக்கத்தைத் திறந்து, பின்னர் அந்தப் பக்கத்திற்கான ஃபயர்பாக்ஸ் டெவலப்பர் கருவிகளைத் திறக்கவும். "பிழைதிருத்தி" (Debugger) பேனலில் உங்கள் உள்ளடக்க ஸ்கிரிப்ட் பட்டியலிடப்பட்டிருப்பதைக் காண்பீர்கள்.

பொதுவான பிழைதிருத்த நுட்பங்கள்:

• கன்சோல் லாக்கிங்: கன்சோலில் செய்திகளை அச்சிட `console.log()`-ஐப் பயன்படுத்தவும்.
• பிரேக் பாயிண்ட்கள்: செயல்பாட்டை இடைநிறுத்தி மாறிகளை ஆய்வு செய்ய உங்கள் குறியீட்டில் பிரேக் பாயிண்ட்களை அமைக்கவும்.
• மூல வரைபடங்கள் (Source maps): உங்கள் குறியீடு சுருக்கப்பட்டிருந்தாலும் அல்லது மாற்றப்பட்டிருந்தாலும், அதன் அசல் வடிவத்தில் பிழைதிருத்தம் செய்ய மூல வரைபடங்களைப் பயன்படுத்தவும்.
• பிழை கையாளுதல்: பிழைகளைப் பிடித்து பதிவு செய்ய பிழை கையாளுதலைச் செயல்படுத்தவும்.

உங்கள் நீட்டிப்பை வெளியிடுதல்

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

குரோம் வலை அங்காடியில் வெளியிடுதல்:

1. குரோம் வலை அங்காடியில் ஒரு டெவலப்பர் கணக்கை உருவாக்கவும்.
2. உங்கள் நீட்டிப்பை ஒரு `.zip` கோப்பாக பேக்கேஜ் செய்யவும்.
3. `.zip` கோப்பை குரோம் வலை அங்காடியில் பதிவேற்றவும்.
4. நீட்டிப்பின் பெயர், விளக்கம் மற்றும் ஸ்கிரீன் ஷாட்கள் போன்ற தேவையான மெட்டாடேட்டாவை வழங்கவும்.
5. உங்கள் நீட்டிப்பை மதிப்பாய்வுக்குச் சமர்ப்பிக்கவும்.

ஃபயர்பாக்ஸ் துணை நிரல்கள் சந்தையில் வெளியிடுதல்:

1. ஃபயர்பாக்ஸ் துணை நிரல்கள் சந்தையில் ஒரு டெவலப்பர் கணக்கை உருவாக்கவும்.
2. உங்கள் நீட்டிப்பை ஒரு `.zip` கோப்பாக பேக்கேஜ் செய்யவும்.
3. `.zip` கோப்பை ஃபயர்பாக்ஸ் துணை நிரல்கள் சந்தையில் பதிவேற்றவும்.
4. நீட்டிப்பின் பெயர், விளக்கம் மற்றும் ஸ்கிரீன் ஷாட்கள் போன்ற தேவையான மெட்டாடேட்டாவை வழங்கவும்.
5. உங்கள் நீட்டிப்பை மதிப்பாய்வுக்குச் சமர்ப்பிக்கவும்.

வெளியிடுவதற்கான சிறந்த நடைமுறைகள்:

• உங்கள் நீட்டிப்பின் தெளிவான மற்றும் சுருக்கமான விளக்கத்தை எழுதவும்.
• உங்கள் நீட்டிப்பின் அம்சங்களைக் காட்ட உயர்தர ஸ்கிரீன் ஷாட்கள் மற்றும் வீடியோக்களை வழங்கவும்.
• சமர்ப்பிக்கும் முன் உங்கள் நீட்டிப்பை முழுமையாக சோதிக்கவும்.
• பயனர் மதிப்புரைகள் மற்றும் பின்னூட்டங்களுக்கு உடனடியாக பதிலளிக்கவும்.
• சமீபத்திய உலாவி பதிப்புகள் மற்றும் பாதுகாப்பு இணைப்புகளுடன் உங்கள் நீட்டிப்பைப் புதுப்பித்த நிலையில் வைத்திருக்கவும்.

பாதுகாப்புக் கருத்தாய்வுகள்

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

முக்கிய பாதுகாப்புக் கருத்தாய்வுகள்:

• அனுமதிகளைக் குறைத்தல்: உங்கள் நீட்டிப்புக்கு உண்மையில் தேவைப்படும் அனுமதிகளை மட்டுமே கோரவும்.
• பயனர் உள்ளீட்டை சரிபார்த்தல்: கிராஸ்-சைட் ஸ்கிரிப்டிங் (XSS) தாக்குதல்களைத் தடுக்க அனைத்து பயனர் உள்ளீடுகளையும் சுத்தப்படுத்தி சரிபார்க்கவும்.
• HTTPS-ஐப் பயன்படுத்தவும்: தொலைநிலை சேவையகங்களுடன் தொடர்பு கொள்ள எப்போதும் HTTPS-ஐப் பயன்படுத்தவும்.
• உள்ளடக்கப் பாதுகாப்புக் கொள்கை (CSP): தன்னிச்சையான குறியீட்டை இயக்குவதைத் தடுக்க கடுமையான CSP-ஐச் செயல்படுத்தவும்.
• உங்கள் நீட்டிப்பைத் தவறாமல் புதுப்பிக்கவும்: சமீபத்திய பாதுகாப்பு இணைப்புகளுடன் உங்கள் நீட்டிப்பைப் புதுப்பித்த நிலையில் வைத்திருக்கவும்.

இந்த பாதுகாப்பு வழிகாட்டுதல்களைப் பின்பற்றுவதன் மூலம், உங்கள் உலாவி நீட்டிப்பு பயனர்களுக்கு பாதுகாப்பாகவும் பத்திரமாகவும் இருப்பதை உறுதிசெய்ய உதவலாம்.

முடிவுரை

மேனிஃபெஸ்ட் V3 மற்றும் ஜாவாஸ்கிரிப்ட் API-களைப் பயன்படுத்தி உலாவி நீட்டிப்பு மேம்பாடு, உலாவல் அனுபவத்தைத் தனிப்பயனாக்கவும் வலை உலாவிகளில் புதிய அம்சங்களைச் சேர்க்கவும் ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள முக்கிய கருத்துகள், API-கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், உற்பத்தித்திறனை மேம்படுத்தும், பாதுகாப்பை மேம்படுத்தும் மற்றும் உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறந்த உலாவல் அனுபவத்தை வழங்கும் சக்திவாய்ந்த மற்றும் பாதுகாப்பான நீட்டிப்புகளை நீங்கள் உருவாக்கலாம். வலை தொடர்ந்து বিকশিত වන විට, অনলাইন தொடர்புகளின் எதிர்காலத்தை வடிவமைப்பதில் உலாவி நீட்டிப்புகள் பெருகிய முறையில் முக்கிய பங்கு வகிக்கும். புதுமையான மற்றும் மதிப்புமிக்க நீட்டிப்புகளை உருவாக்க மேனிஃபெஸ்ட் V3 மற்றும் ஜாவாஸ்கிரிப்ட் API-களின் செல்வத்தால் வழங்கப்படும் வாய்ப்புகளைத் தழுவிக்கொள்ளுங்கள்.