कॉन्टेंट स्क्रिप्ट

कॉन्टेंट स्क्रिप्ट, ऐसी फ़ाइलें होती हैं जो वेब पेजों के कॉन्टेक्स्ट में चलती हैं. ये स्क्रिप्ट, स्टैंडर्ड Document Object Model (DOM) का इस्तेमाल करके, ब्राउज़र से देखे गए वेब पेजों की जानकारी पढ़ सकती हैं. साथ ही, उनमें बदलाव कर सकती हैं और अपने पैरंट एक्सटेंशन को जानकारी पास कर सकती हैं.

कॉन्टेंट स्क्रिप्ट की क्षमताओं के बारे में जानकारी

कॉन्टेंट स्क्रिप्ट, एक्सटेंशन के इन एपीआई को सीधे तौर पर ऐक्सेस कर सकती हैं:

कॉन्टेंट स्क्रिप्ट, अन्य एपीआई को सीधे तौर पर ऐक्सेस नहीं कर सकतीं. हालांकि, वे आपके एक्सटेंशन के अन्य हिस्सों के साथ मैसेज शेयर करके, उन्हें इनडायरेक्ट तरीके से ऐक्सेस कर सकती हैं.

कॉन्टेंट स्क्रिप्ट से, अपने एक्सटेंशन की अन्य फ़ाइलों को भी ऐक्सेस किया जा सकता है. इसके लिए, fetch() जैसे एपीआई का इस्तेमाल किया जा सकता है. ऐसा करने के लिए, आपको उन्हें वेब-ऐक्सेस किए जा सकने वाले संसाधन के तौर पर एलान करना होगा. ध्यान दें कि इससे संसाधन, उसी साइट पर चलने वाली फ़र्स्ट-पार्टी या थर्ड-पार्टी स्क्रिप्ट के लिए भी उपलब्ध हो जाते हैं.

आइसोलेटेड वर्ल्ड में काम करना

कॉन्टेंट स्क्रिप्ट, आइसोलेटेड वर्ल्ड में काम करती हैं. इससे, कॉन्टेंट स्क्रिप्ट अपने JavaScript एनवायरमेंट में बदलाव कर सकती है. हालांकि, इससे पेज या अन्य एक्सटेंशन की कॉन्टेंट स्क्रिप्ट पर कोई असर नहीं पड़ता.

कोई एक्सटेंशन, वेब पेज पर इस तरह के कोड के साथ चल सकता है.

webPage.html

<html>
  <button id="mybutton">click me</button>
  <script>
    var greeting = "hello, ";
    var button = document.getElementById("mybutton");
    button.person_name = "Bob";
    button.addEventListener(
        "click", () => alert(greeting + button.person_name + "."), false);
  </script>
</html>

वह एक्सटेंशन, स्क्रिप्ट डालने के सेक्शन में बताए गए किसी एक तरीके का इस्तेमाल करके, यह कॉन्टेंट स्क्रिप्ट डाल सकता है.

content-script.js

var greeting = "hola, ";
var button = document.getElementById("mybutton");
button.person_name = "Roberto";
button.addEventListener(
    "click", () => alert(greeting + button.person_name + "."), false);

इस बदलाव के बाद, बटन पर क्लिक करने पर दोनों चेतावनियां क्रम से दिखती हैं.

स्क्रिप्ट डालना

कॉन्टेंट स्क्रिप्ट को स्टैटिक तरीके से बताया जा सकता है, डाइनैमिक तरीके से बताया जा सकता है या प्रोग्राम के ज़रिए डाला जा सकता है.

स्टैटिक एलान के साथ स्क्रिप्ट डालना

उन स्क्रिप्ट के लिए, manifest.json में स्टैटिक कॉन्टेंट स्क्रिप्ट एलान का इस्तेमाल करें जिन्हें पेजों के जाने-माने सेट पर अपने-आप चलना चाहिए.

स्टैटिक तरीके से एलान की गई स्क्रिप्ट, मेनिफ़ेस्ट में "content_scripts" कुंजी के तहत रजिस्टर की जाती हैं. इनमें JavaScript फ़ाइलें, सीएसएस फ़ाइलें या दोनों शामिल हो सकती हैं. अपने-आप चलने वाली सभी कॉन्टेंट स्क्रिप्ट में, मैच पैटर्न तय किए जाने चाहिए.

manifest.json

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}
नाम टाइप ब्यौरा
matches स्ट्रिंग का अरे ज़रूरी है. इससे यह तय होता है कि इस कॉन्टेंट स्क्रिप्ट को किन पेजों में डाला जाएगा. इन स्ट्रिंग के सिंटैक्स के बारे में ज़्यादा जानकारी के लिए, मैच पैटर्न देखें. साथ ही, यूआरएल को बाहर रखने के तरीके के बारे में जानने के लिए, मैच पैटर्न और ग्लोब देखें.
css स्ट्रिंग का अरे ज़रूरी नहीं है. मैच होने वाले पेजों में डाली जाने वाली सीएसएस फ़ाइलों की सूची. इन्हें इस अरे में दिखने के क्रम में डाला जाता है. साथ ही, पेज के लिए कोई भी डीओएम बनाने या दिखाने से पहले इन्हें डाला जाता है.
js स्ट्रिंग का अरे ज़रूरी नहीं है. मैच होने वाले पेजों में डाली जाने वाली JavaScript फ़ाइलों की सूची. फ़ाइलें इस अरे में दिखने के क्रम में डाली जाती हैं. इस सूची में मौजूद हर स्ट्रिंग में, एक्सटेंशन की रूट डायरेक्ट्री में मौजूद किसी संसाधन का रिलेटिव पाथ होना चाहिए. शुरुआत में मौजूद स्लैश (`/`) अपने-आप हट जाते हैं.
run_at RunAt ज़रूरी नहीं है. इससे यह तय होता है कि स्क्रिप्ट को पेज में कब डाला जाना चाहिए. डिफ़ॉल्ट रूप से, इसकी वैल्यू document_idle होती है.
match_about_blank बूलियन ज़रूरी नहीं है. इससे यह तय होता है कि स्क्रिप्ट को about:blank फ़्रेम में डाला जाना चाहिए या नहीं. इस फ़्रेम का पैरंट या ओपनर फ़्रेम, matches में एलान किए गए किसी एक पैटर्न से मैच होना चाहिए. डिफ़ॉल्ट रूप से, इसकी वैल्यू 'फ़ॉल्स' होती है.
match_origin_as_fallback बूलियन ज़रूरी नहीं है. इससे यह तय होता है कि स्क्रिप्ट को उन फ़्रेम में डाला जाना चाहिए या नहीं जिन्हें मैच होने वाले ऑरिजिन ने बनाया है. हालांकि, इनका यूआरएल या ऑरिजिन, स्क्रिप्ट के पैटर्न से सीधे तौर पर मैच नहीं हो सकता. इनमें अलग-अलग स्कीम वाले फ़्रेम शामिल हैं, जैसे कि about:, data:, blob:, और filesystem:. मिलते-जुलते फ़्रेम में स्क्रिप्ट डालना भी देखें .
world ExecutionWorld ज़रूरी नहीं है. यह JavaScript वर्ल्ड है, जिसमें स्क्रिप्ट को एक्ज़ीक्यूट किया जाना है. डिफ़ॉल्ट रूप से, इसकी वैल्यू ISOLATED होती है. आइसोलेटेड वर्ल्ड में काम करना भी देखें.

दस्तावेज़ के लाइफ़साइकल के किसी भी स्टेज में, मेनिफ़ेस्ट में स्टैटिक तरीके से एलान की गई कॉन्टेंट स्क्रिप्ट को सबसे पहले डाला जाता है. इसके बाद, किसी अन्य तरीके से रजिस्टर की गई कॉन्टेंट स्क्रिप्ट को डाला जाता है. इन्हें मेनिफ़ेस्ट में तय किए गए क्रम में डाला जाता है.

डाइनैमिक एलान के साथ स्क्रिप्ट डालना

डाइनैमिक कॉन्टेंट स्क्रिप्ट तब काम की होती हैं, जब कॉन्टेंट स्क्रिप्ट के लिए मैच पैटर्न की जानकारी न हो या जब कॉन्टेंट स्क्रिप्ट को जाने-माने होस्ट पर हमेशा नहीं डाला जाना चाहिए.

Chrome 96 में पेश किए गए डाइनैमिक एलान, स्टैटिक एलान की तरह होते हैं. हालांकि, कॉन्टेंट स्क्रिप्ट ऑब्जेक्ट को manifest.json में रजिस्टर करने के बजाय, chrome.scripting नेमस्पेस में मौजूद तरीकों का इस्तेमाल करके Chrome में रजिस्टर किया जाता है. Scripting API की मदद से, एक्सटेंशन डेवलपर ये काम भी कर सकते हैं:

स्टैटिक एलान की तरह, डाइनैमिक एलान में JavaScript फ़ाइलें, सीएसएस फ़ाइलें या दोनों शामिल हो सकती हैं.

service-worker.js

chrome.scripting
  .registerContentScripts([{
    id: "session-script",
    js: ["content.js"],
    persistAcrossSessions: false,
    matches: ["*://example.com/*"],
    runAt: "document_start",
  }])
  .then(() => console.log("registration complete"))
  .catch((err) => console.warn("unexpected error", err))

service-worker.js

chrome.scripting
  .updateContentScripts([{
    id: "session-script",
    excludeMatches: ["*://admin.example.com/*"],
  }])
  .then(() => console.log("registration updated"));

service-worker.js

chrome.scripting
  .getRegisteredContentScripts()
  .then(scripts => console.log("registered content scripts", scripts));

service-worker.js

chrome.scripting
  .unregisterContentScripts({ ids: ["session-script"] })
  .then(() => console.log("un-registration complete"));

प्रोग्राम के ज़रिए स्क्रिप्ट डालना

उन कॉन्टेंट स्क्रिप्ट के लिए, प्रोग्राम के ज़रिए स्क्रिप्ट डालने की सुविधा का इस्तेमाल करें जिन्हें इवेंट के जवाब में या खास मौकों पर चलाना है.

किसी कॉन्टेंट स्क्रिप्ट को प्रोग्राम के ज़रिए डालने के लिए, आपके एक्सटेंशन के पास उस पेज के लिए होस्ट की अनुमतियां होनी चाहिए जिसमें स्क्रिप्ट डालनी है. होस्ट की अनुमतियां, आपके एक्सटेंशन के मेनिफ़ेस्ट के हिस्से के तौर पर अनुरोध करके या अस्थायी तौर पर "activeTab" का इस्तेमाल करके दी जा सकती हैं.

यहां activeTab पर आधारित एक्सटेंशन के अलग-अलग वर्शन दिए गए हैं.

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Action Button"
  }
}

कॉन्टेंट स्क्रिप्ट को फ़ाइलों के तौर पर डाला जा सकता है.

content-script.js


document.body.style.backgroundColor = "orange";

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content-script.js"]
  });
});

इसके अलावा, किसी फ़ंक्शन के बॉडी को कॉन्टेंट स्क्रिप्ट के तौर पर डाला और एक्ज़ीक्यूट किया जा सकता है.

service-worker.js:

function injectedFunction() {
  document.body.style.backgroundColor = "orange";
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target : {tabId : tab.id},
    func : injectedFunction,
  });
});

ध्यान दें कि डाला गया फ़ंक्शन, chrome.scripting.executeScript() कॉल में रेफ़र किए गए फ़ंक्शन की कॉपी होती है. यह ओरिजनल फ़ंक्शन नहीं होता. इसलिए, फ़ंक्शन का बॉडी, सेल्फ़-कंटेन्ड होना चाहिए. फ़ंक्शन के बाहर मौजूद वैरिएबल के रेफ़रंस की वजह से, कॉन्टेंट स्क्रिप्ट में ReferenceError आ जाएगा.

किसी फ़ंक्शन के तौर पर स्क्रिप्ट डालते समय, फ़ंक्शन को आर्ग्युमेंट भी पास किए जा सकते हैं.

service-worker.js

function injectedFunction(color) {
  document.body.style.backgroundColor = color;
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target : {tabId : tab.id},
    func : injectedFunction,
    args : [ "orange" ],
  });
});

मैच और ग्लोब को बाहर रखना

तय किए गए पेज के मैच को पसंद के मुताबिक बनाने के लिए, एलान के तौर पर रजिस्ट्रेशन में ये फ़ील्ड शामिल करें.

नाम टाइप ब्यौरा
exclude_matches स्ट्रिंग का अरे ज़रूरी नहीं है. इससे उन पेजों को बाहर रखा जाता है जिनमें इस कॉन्टेंट स्क्रिप्ट को डाला जाना चाहिए. इन स्ट्रिंग के सिंटैक्स के बारे में ज़्यादा जानकारी के लिए, मैच पैटर्न देखें.
include_globs स्ट्रिंग का अरे ज़रूरी नहीं है. इसे matches के बाद लागू किया जाता है, ताकि सिर्फ़ वे यूआरएल शामिल किए जा सकें जो इस ग्लोब से भी मैच होते हैं. इसका मकसद, @include Greasemonkey कीवर्ड की नकल करना है.
exclude_globs स्ट्रिंग का अरे ज़रूरी नहीं है. इसे matches के बाद लागू किया जाता है, ताकि उन यूआरएल को बाहर रखा जा सके जो इस ग्लोब से मैच होते हैं. इसका मकसद, @exclude Greasemonkey कीवर्ड की नकल करना है.

कॉन्टेंट स्क्रिप्ट को किसी पेज में तब डाला जाएगा, जब ये दोनों शर्तें पूरी होती हैं:

  • उसका यूआरएल, matches के किसी पैटर्न और include_globs के किसी पैटर्न से मैच होता हो.
  • यूआरएल, exclude_matches या exclude_globs के किसी पैटर्न से भी मैच न होता हो. matches प्रॉपर्टी ज़रूरी है. इसलिए, exclude_matches, include_globs, और exclude_globs का इस्तेमाल सिर्फ़ यह तय करने के लिए किया जा सकता है कि किन पेजों पर असर पड़ेगा.

यह एक्सटेंशन, कॉन्टेंट स्क्रिप्ट को https://www.nytimes.com/health में डालता है, लेकिन https://www.nytimes.com/business में नहीं .

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "exclude_matches": ["*://*/*business*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}

service-worker.js

chrome.scripting.registerContentScripts([{
  id : "test",
  matches : [ "https://*.nytimes.com/*" ],
  excludeMatches : [ "*://*/*business*" ],
  js : [ "contentScript.js" ],
}]);

ग्लोब प्रॉपर्टी, मैच पैटर्न की तुलना में अलग और ज़्यादा फ़्लेक्सिबल सिंटैक्स का पालन करती हैं. स्वीकार की जाने वाली ग्लोब स्ट्रिंग, ऐसे यूआरएल होते हैं जिनमें "वाइल्डकार्ड" तारे के निशान और सवाल के निशान शामिल हो सकते हैं. तारे का निशान (*), किसी भी लंबाई की किसी भी स्ट्रिंग से मैच होता है. इसमें खाली स्ट्रिंग भी शामिल है. वहीं, सवाल का निशान (?), किसी एक वर्ण से मैच होता है.

उदाहरण के लिए, ग्लोब https://???.example.com/foo/\*, इनमें से किसी भी यूआरएल से मैच होता है:

  • https://www.example.com/foo/bar
  • https://the.example.com/foo/

हालांकि, यह इनमें से किसी भी यूआरएल से मैच नहीं होता:

  • https://my.example.com/foo/bar
  • https://example.com/foo/
  • https://www.example.com/foo

यह एक्सटेंशन, कॉन्टेंट स्क्रिप्ट को https://www.nytimes.com/arts/index.html और https://www.nytimes.com/jobs/index.htm* में डालता है, लेकिन https://www.nytimes.com/sports/index.html में नहीं:

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "include_globs": ["*nytimes.com/???s/*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}

यह एक्सटेंशन, कॉन्टेंट स्क्रिप्ट को https://history.nytimes.com और https://.nytimes.com/history में डालता है, लेकिन https://science.nytimes.com या https://www.nytimes.com/science में नहीं:

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "exclude_globs": ["*science*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}

सही स्कोप पाने के लिए, इनमें से सभी, कुछ या एक को शामिल किया जा सकता है.

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "exclude_matches": ["*://*/*business*"],
      "include_globs": ["*nytimes.com/???s/*"],
      "exclude_globs": ["*science*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}

रनटाइम

run_at फ़ील्ड से यह कंट्रोल किया जाता है कि JavaScript फ़ाइलों को वेब पेज में कब डाला जाए. इसकी पसंदीदा और डिफ़ॉल्ट वैल्यू "document_idle" है. अन्य संभावित वैल्यू के लिए, RunAt टाइप देखें.

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "run_at": "document_idle",
      "js": ["contentScript.js"]
    }
  ],
  ...
}

service-worker.js

chrome.scripting.registerContentScripts([{
  id : "test",
  matches : [ "https://*.nytimes.com/*" ],
  runAt : "document_idle",
  js : [ "contentScript.js" ],
}]);
नाम टाइप ब्यौरा
document_idle स्ट्रिंग पसंदीदा. जब भी हो सके, "document_idle" का इस्तेमाल करें.

ब्राउज़र स्क्रिप्ट डालने के लिए "document_end" और तुरंत बाद का समय चुनता है window.onload इवेंट फ़ायर होता है. स्क्रिप्ट डालने का सही समय, इस बात पर निर्भर करता है कि दस्तावेज़ कितना जटिल है और उसे लोड होने में कितना समय लग रहा है. इसे पेज लोड होने की स्पीड के लिए ऑप्टिमाइज़ किया जाता है.

कॉन्टेंट स्क्रिप्ट जो "document_idle" पर चलती हैं, उन्हें window.onload इवेंट की निगरानी करने की ज़रूरत नहीं होती. यह गारंटी दी जाती है कि ये स्क्रिप्ट, डीओएम पूरा होने के बाद चलेंगी. अगर किसी स्क्रिप्ट को window.onload के बाद ही चलाना है, तो एक्सटेंशन, document.readyState प्रॉपर्टी का इस्तेमाल करके यह देख सकता है कि onload पहले ही ट्रिगर हो चुका है या नहीं.
document_start स्ट्रिंग स्क्रिप्ट, css की किसी भी फ़ाइल के बाद डाली जाती हैं. हालांकि, कोई अन्य डीओएम बनाने या कोई अन्य स्क्रिप्ट चलाने से पहले इन्हें डाला जाता है.
document_end स्ट्रिंग स्क्रिप्ट, डीओएम पूरा होने के तुरंत बाद डाली जाती हैं. हालांकि, इमेज और फ़्रेम जैसे सब-रिसॉर्स लोड होने से पहले इन्हें डाला जाता है.

फ़्रेम तय करना

मेनिफ़ेस्ट में तय की गई कॉन्टेंट स्क्रिप्ट के लिए, "all_frames" फ़ील्ड की मदद से एक्सटेंशन यह तय कर सकता है कि JavaScript और सीएसएस फ़ाइलों को, तय की गई यूआरएल की ज़रूरी शर्तों को पूरा करने वाले सभी फ़्रेम में डाला जाना चाहिए या सिर्फ़ किसी टैब के सबसे ऊपर वाले फ़्रेम में:

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "all_frames": true,
      "js": ["contentScript.js"]
    }
  ],
  ...
}

chrome.scripting.registerContentScripts(...) का इस्तेमाल करके, कॉन्टेंट स्क्रिप्ट को प्रोग्राम के ज़रिए रजिस्टर करते समय, allFrames पैरामीटर का इस्तेमाल करके यह तय किया जा सकता है कि कॉन्टेंट स्क्रिप्ट को, तय की गई यूआरएल की ज़रूरी शर्तों को पूरा करने वाले सभी फ़्रेम में डाला जाना चाहिए या सिर्फ़ किसी टैब के सबसे ऊपर वाले फ़्रेम में. इसका इस्तेमाल सिर्फ़ tabId के साथ किया जा सकता है. साथ ही, अगर frameIds या documentIds तय किए गए हैं, तो इसका इस्तेमाल नहीं किया जा सकता:

service-worker.js

chrome.scripting.registerContentScripts([{
  id: "test",
  matches : [ "https://*.nytimes.com/*" ],
  allFrames : true,
  js : [ "contentScript.js" ],
}]);

एक्सटेंशन, उन फ़्रेम में स्क्रिप्ट चला सकते हैं जो मैच होने वाले फ़्रेम से जुड़े हैं, लेकिन खुद मैच नहीं होते. ऐसा आम तौर पर तब होता है, जब यूआरएल वाले फ़्रेम, मैच होने वाले फ़्रेम से बनाए गए हों. हालांकि, इनके यूआरएल, स्क्रिप्ट के तय किए गए पैटर्न से मैच नहीं होते.

ऐसा तब होता है, जब कोई एक्सटेंशन, about:, data:, blob:, और filesystem: स्कीम वाले यूआरएल वाले फ़्रेम में स्क्रिप्ट डालना चाहता है. इन मामलों में, यूआरएल, कॉन्टेंट स्क्रिप्ट के पैटर्न से मैच नहीं होगा. साथ ही, about: और data: के मामले में, यूआरएल में पैरंट यूआरएल या ऑरिजिन भी शामिल नहीं होता. जैसे, about:blank या data:text/html,<html>Hello, World!</html>. हालांकि, इन फ़्रेम को बनाने वाले फ़्रेम से अब भी जोड़ा जा सकता है.

इन फ़्रेम में स्क्रिप्ट डालने के लिए, एक्सटेंशन, कॉन्टेंट स्क्रिप्ट की जानकारी में "match_origin_as_fallback" प्रॉपर्टी तय कर सकते हैं मेनिफ़ेस्ट में.

manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "match_origin_as_fallback": true,
      "js": ["contentScript.js"]
    }
  ],
  ...
}

जब इसे तय किया जाता है और इसकी वैल्यू true पर सेट की जाती है, तो Chrome, यह तय करने के लिए कि फ़्रेम मैच होता है या नहीं, फ़्रेम के यूआरएल के बजाय, फ़्रेम के शुरू होने के ऑरिजिन को देखेगा. ध्यान दें कि यह टारगेट फ़्रेम के ऑरिजिन से भी अलग हो सकता है. उदाहरण के लिए, data: यूआरएल का ऑरिजिन, नल होता है.

फ़्रेम का शुरू करने वाला फ़्रेम, वह फ़्रेम होता है जिसने टारगेट फ़्रेम बनाया है या उस पर नेविगेट किया है. आम तौर पर, यह डायरेक्ट पैरंट या ओपनर होता है. हालांकि, ऐसा नहीं भी हो सकता. जैसे, कोई फ़्रेम, iframe के अंदर मौजूद iframe पर नेविगेट कर रहा हो.

इससे शुरू करने वाले फ़्रेम के ऑरिजिन की तुलना की जाती है. इसलिए, शुरू करने वाला फ़्रेम, उस ऑरिजिन के किसी भी पाथ पर हो सकता है. इस बात को साफ़ तौर पर बताने के लिए, Chrome के लिए ज़रूरी है कि "match_origin_as_fallback" को true पर सेट करके तय की गई कोई भी कॉन्टेंट स्क्रिप्ट, * का पाथ भी तय करे.

जब "match_origin_as_fallback" और "match_about_blank" दोनों तय किए जाते हैं, तो "match_origin_as_fallback" को प्राथमिकता दी जाती है.

एम्बेड करने वाले पेज के साथ बातचीत

कॉन्टेंट स्क्रिप्ट और उन्हें होस्ट करने वाले पेजों के एक्ज़ीक्यूशन एनवायरमेंट, एक-दूसरे से आइसोलेटेड होते हैं. हालांकि, ये पेज के डीओएम को ऐक्सेस कर सकते हैं. अगर पेज को कॉन्टेंट स्क्रिप्ट या कॉन्टेंट स्क्रिप्ट के ज़रिए एक्सटेंशन के साथ बातचीत करनी है, तो उसे शेयर किए गए डीओएम के ज़रिए ऐसा करना होगा.

का इस्तेमाल करके, एक उदाहरण दिया जा सकता है: window.postMessage()

content-script.js

var port = chrome.runtime.connect();

window.addEventListener("message", (event) => {
  // We only accept messages from ourselves
  if (event.source !== window) {
    return;
  }

  if (event.data.type && (event.data.type === "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    port.postMessage(event.data.text);
  }
}, false);

example.js

document.getElementById("theButton").addEventListener("click", () => {
  window.postMessage(
      {type : "FROM_PAGE", text : "Hello from the webpage!"}, "*");
}, false);

example.html, एक्सटेंशन वाला पेज नहीं है. यह खुद को मैसेज पोस्ट करता है. इस मैसेज को कॉन्टेंट स्क्रिप्ट इंटरसेप्ट और उसकी जांच करती है. इसके बाद, इसे एक्सटेंशन प्रोसेस में पोस्ट किया जाता है. इस तरह, पेज, एक्सटेंशन प्रोसेस के साथ बातचीत करने का तरीका सेट अप करता है. इसी तरह, एक्सटेंशन प्रोसेस से पेज के साथ बातचीत की जा सकती है.

एक्सटेंशन की फ़ाइलें ऐक्सेस करना

किसी कॉन्टेंट स्क्रिप्ट से एक्सटेंशन की फ़ाइल ऐक्सेस करने के लिए, chrome.runtime.getURL() को कॉल किया जा सकता है. इससे, आपके एक्सटेंशन की एसेट का ऐब्सलूट यूआरएल मिलता है. जैसा कि यहां दिए गए उदाहरण (content.js) में दिखाया गया है:

content-script.js

let image = chrome.runtime.getURL("images/my_image.png")

सीएसएस फ़ाइल में फ़ॉन्ट या इमेज इस्तेमाल करने के लिए, @@extension_id का इस्तेमाल करके यूआरएल बनाया जा सकता है. जैसा कि यहां दिए गए उदाहरण (content.css) में दिखाया गया है:

content.css

body {
 background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

@font-face {
 font-family: 'Stint Ultra Expanded';
 font-style: normal;
 font-weight: 400;
 src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}

manifest.json फ़ाइल में, सभी ऐसेट को वेब-ऐक्सेस किए जा सकने वाले संसाधन के तौर पर एलान किया जाना चाहिए:

manifest.json

{
 ...
 "web_accessible_resources": [
   {
     "resources": [ "images/*.png" ],
     "matches": [ "https://example.com/*" ]
   },
   {
     "resources": [ "fonts/*.woff" ],
     "matches": [ "https://example.com/*" ]
   }
 ],
 ...
}

कॉन्टेंट की सुरक्षा के बारे में नीति

आइसोलेटेड वर्ल्ड में चलने वाली कॉन्टेंट स्क्रिप्ट के लिए, कॉन्टेंट की सुरक्षा के बारे में यह नीति (सीएसपी) लागू होती है:

script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' chrome-extension://abcdefghijklmopqrstuvwxyz/; object-src 'self';

एक्सटेंशन के अन्य कॉन्टेक्स्ट पर लागू होने वाली पाबंदियों की तरह, इससे eval() का इस्तेमाल करने के साथ-साथ, बाहरी स्क्रिप्ट लोड करने पर भी पाबंदी लगती है.

अनपैक्ड एक्सटेंशन के लिए, सीएसपी में लोकलहोस्ट भी शामिल होता है:

script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:* chrome-extension://abcdefghijklmopqrstuvwxyz/; object-src 'self';

जब किसी कॉन्टेंट स्क्रिप्ट को मुख्य वर्ल्ड में डाला जाता है, तो पेज की सीएसपी लागू होती है.

खाता सुरक्षित रखें

आइसोलेटेड वर्ल्ड, सुरक्षा की एक लेयर उपलब्ध कराते हैं. हालांकि, कॉन्टेंट स्क्रिप्ट का इस्तेमाल करने से, एक्सटेंशन और वेब पेज में कमज़ोरियां आ सकती हैं. अगर कॉन्टेंट स्क्रिप्ट को किसी अलग वेबसाइट से कॉन्टेंट मिलता है, जैसे कि fetch() को कॉल करके, तो उसे डालने से पहले, क्रॉस-साइट स्क्रिप्टिंग हमलों से बचाने के लिए फ़िल्टर करें. "man-in-the-middle"

खतरनाक वेब पेजों को फ़िल्टर करना न भूलें. उदाहरण के लिए, ये पैटर्न खतरनाक हैं. साथ ही, इन्हें Manifest V3 में इस्तेमाल करने की अनुमति नहीं है:

ऐसा न करें

content-script.js

const data = document.getElementById("json-data");
// WARNING! Might be evaluating an evil script!
const parsed = eval("(" + data + ")");
ऐसा न करें

content-script.js

const elmt_id = ...
// WARNING! elmt_id might be '); ... evil script ... //'!
window.setTimeout("animate(" + elmt_id + ")", 200);

इसके बजाय, उन सुरक्षित एपीआई का इस्तेमाल करें जो स्क्रिप्ट नहीं चलाते:

यह करें

content-script.js

const data = document.getElementById("json-data")
// JSON.parse does not evaluate the attacker's scripts.
const parsed = JSON.parse(data);
यह करें

content-script.js

const elmt_id = ...
// The closure form of setTimeout does not evaluate scripts.
window.setTimeout(() => animate(elmt_id), 200);