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

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

कॉन्टेंट स्क्रिप्ट की सुविधाओं के बारे में जानकारी

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

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

आप 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 स्ट्रिंग का कलेक्शन ज़रूरी नहीं. मिलते-जुलते पेजों पर डाली जाने वाली सीएसएस फ़ाइलों की सूची. ये हैं किसी भी DOM के बनाए जाने या दिखाए जाने से पहले, उसी क्रम में इंजेक्ट किए गए जिस क्रम में वे इस कलेक्शन में दिखते हैं पेज के लिए.
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 में पेश की गई, डाइनैमिक एलान स्टैटिक जानकारी से मिलते-जुलते हैं एलान कर सकते हैं, लेकिन content स्क्रिप्ट ऑब्जेक्ट का उपयोग करके Chrome के साथ पंजीकृत किया जाता है के बजाय chrome.scripting नेमस्पेस में manifest.json. 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"]
    }
  ],
  ...
}

service-worker.js

chrome.scripting.registerContentScripts([{
  id: "test",
  matches : [ "https://*.nytimes.com/*" ],
  allFrames : true,
  js : [ "contentScript.js" ],
}]);
नाम टाइप ब्यौरा
all_frames बूलियन ज़रूरी नहीं. डिफ़ॉल्ट रूप से false सेट होती है. इसका मतलब है कि सिर्फ़ सबसे ऊपर वाला फ़्रेम मैच हो गया है.

अगर true तय किया गया है, तो सभी फ़्रेम इंजेक्ट किए जाएंगे, भले ही फ़्रेम, टैब में सबसे ऊपरी फ़्रेम नहीं होता है. यूआरएल के लिए, हर फ़्रेम की अलग-अलग जांच की जाती है ज़रूरतें. यूआरएल की ज़रूरी शर्तों का पालन न होने पर, यह चाइल्ड फ़्रेम में इंजेक्ट नहीं करेगा.

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

ऐसा तब होता है, जब कोई एक्सटेंशन ऐसे यूआरएल वाले फ़्रेम इंजेक्ट करना चाहता है में 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" को प्राथमिकता मिलती है.

एम्बेड करने वाले पेज के साथ कम्यूनिकेशन

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

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, खुद को मैसेज पोस्ट करता है. यह मैसेज इंटरसेप्ट किया गया है और की जांच की जा सकती है और फिर एक्सटेंशन प्रोसेस में पोस्ट कर दिया गया है. इस तरह, पेज एक्सटेंशन प्रोसेस के लिए कम्यूनिकेशन की लाइन सेट करता है. इसके ज़रिए उलटा संभव है का मतलब एक जैसा है.

एक्सटेंशन फ़ाइलों तक पहुंचें

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

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/*" ]
   }
 ],
 ...
}

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

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

नुकसान पहुंचाने वाले वेब पेजों को फ़िल्टर करना न भूलें. उदाहरण के लिए, नीचे दिए गए पैटर्न खतरनाक हैं और मेनिफ़ेस्ट 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);