বিষয়বস্তু স্ক্রিপ্ট

বিষয়বস্তু স্ক্রিপ্টগুলি এমন ফাইল যা ওয়েব পৃষ্ঠাগুলির প্রসঙ্গে চলে৷ স্ট্যান্ডার্ড ডকুমেন্ট অবজেক্ট মডেল (DOM) ব্যবহার করে, তারা ব্রাউজার ভিজিট করা ওয়েব পৃষ্ঠাগুলির বিশদ বিবরণ পড়তে, তাদের পরিবর্তন করতে এবং তাদের অভিভাবক এক্সটেনশনে তথ্য পাঠাতে সক্ষম হয়।

বিষয়বস্তু স্ক্রিপ্ট ক্ষমতা বুঝতে

কন্টেন্ট স্ক্রিপ্টগুলি সরাসরি নিম্নলিখিত এক্সটেনশন APIগুলি অ্যাক্সেস করতে পারে:

বিষয়বস্তু স্ক্রিপ্ট সরাসরি অন্যান্য API অ্যাক্সেস করতে অক্ষম. কিন্তু তারা আপনার এক্সটেনশনের অন্যান্য অংশের সাথে বার্তা বিনিময় করে পরোক্ষভাবে সেগুলি অ্যাক্সেস করতে পারে৷

আপনি fetch() মত API ব্যবহার করে একটি বিষয়বস্তু স্ক্রিপ্ট থেকে আপনার এক্সটেনশনের অন্যান্য ফাইল অ্যাক্সেস করতে পারেন। এটি করার জন্য, আপনাকে তাদের ওয়েব-অভিগম্য সম্পদ হিসাবে ঘোষণা করতে হবে। মনে রাখবেন যে এটি একই সাইটে চলমান যেকোন প্রথম-পক্ষ বা তৃতীয়-পক্ষের স্ক্রিপ্টগুলিতে সংস্থানগুলিকে প্রকাশ করে৷

বিচ্ছিন্ন বিশ্বে কাজ করুন

বিষয়বস্তু স্ক্রিপ্টগুলি একটি বিচ্ছিন্ন বিশ্বে বাস করে, একটি বিষয়বস্তু স্ক্রিপ্টকে পৃষ্ঠা বা অন্যান্য এক্সটেনশনের বিষয়বস্তু স্ক্রিপ্টগুলির সাথে বিরোধ না করে তার জাভাস্ক্রিপ্ট পরিবেশে পরিবর্তন করতে দেয়৷

নিম্নলিখিত উদাহরণের মতো কোড সহ একটি ওয়েব পৃষ্ঠায় একটি এক্সটেনশন চলতে পারে৷

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 ফাইল, CSS ফাইল বা উভয়ই অন্তর্ভুক্ত করতে পারে। সমস্ত স্বয়ংক্রিয়-চালিত বিষয়বস্তু স্ক্রিপ্ট অবশ্যই মিলের নিদর্শনগুলি নির্দিষ্ট করবে৷

manifest.json

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}
নাম টাইপ বর্ণনা
matches স্ট্রিং এর অ্যারে প্রয়োজন। এই বিষয়বস্তুর স্ক্রিপ্টটি কোন পৃষ্ঠাগুলিতে প্রবেশ করানো হবে তা নির্দিষ্ট করে৷ এই স্ট্রিংগুলির সিনট্যাক্সের বিশদ বিবরণের জন্য ম্যাচ প্যাটার্ন দেখুন এবং কিভাবে URL গুলি বাদ দেওয়া যায় সে সম্পর্কে তথ্যের জন্য প্যাটার্ন এবং গ্লবগুলিকে মিল করুন ৷
css স্ট্রিং এর অ্যারে ঐচ্ছিক। মিলিত পৃষ্ঠাগুলিতে ইনজেক্ট করা CSS ফাইলগুলির তালিকা৷ পৃষ্ঠার জন্য যেকোন DOM তৈরি বা প্রদর্শিত হওয়ার আগে এই অ্যারেতে যে ক্রমানুসারে তারা প্রদর্শিত হবে সেগুলিকে ইনজেকশন দেওয়া হয়।
js স্ট্রিং এর অ্যারে ঐচ্ছিক। জাভাস্ক্রিপ্ট ফাইলগুলির তালিকা যা মিলিত পৃষ্ঠাগুলিতে প্রবেশ করানো হবে৷ ফাইলগুলি এই অ্যারেতে প্রদর্শিত ক্রম অনুসারে ইনজেকশন করা হয়। এই তালিকার প্রতিটি স্ট্রিংকে অবশ্যই এক্সটেনশনের রুট ডিরেক্টরিতে একটি সংস্থানের একটি আপেক্ষিক পথ থাকতে হবে৷ লিডিং স্ল্যাশ (`/`) স্বয়ংক্রিয়ভাবে ছাঁটা হয়।
run_at রানআট ঐচ্ছিক। স্ক্রিপ্ট কখন পৃষ্ঠায় ইনজেকশন করা উচিত তা নির্দিষ্ট করে। document_idle ডিফল্ট।
match_about_blank বুলিয়ান ঐচ্ছিক। স্ক্রিপ্টটি একটি about:blank ফ্রেমে ইনজেক্ট করা উচিত কিনা যেখানে প্যারেন্ট বা ওপেনার ফ্রেমটি matches ঘোষিত প্যাটার্নগুলির একটির সাথে মিলে যায়৷ ডিফল্ট থেকে মিথ্যা.
match_origin_as_fallback বুলিয়ান ঐচ্ছিক। স্ক্রিপ্টটি এমন ফ্রেমে ইনজেক্ট করা উচিত যা একটি মিলিত উত্স দ্বারা তৈরি করা হয়েছিল, তবে যার URL বা উত্স সরাসরি প্যাটার্নের সাথে মেলে না৷ এর মধ্যে রয়েছে বিভিন্ন স্কিম সহ ফ্রেম, যেমন about: , data: , blob: , এবং filesystem: . সম্পর্কিত ফ্রেমে ইনজেকশনও দেখুন।
world এক্সিকিউশন ওয়ার্ল্ড ঐচ্ছিক। একটি স্ক্রিপ্টের মধ্যে চালানোর জন্য জাভাস্ক্রিপ্ট বিশ্ব। ডিফল্ট ISOLATED । এছাড়াও বিচ্ছিন্ন বিশ্বে কাজ দেখুন।

গতিশীল ঘোষণা সঙ্গে ইনজেকশন

ডায়নামিক কন্টেন্ট স্ক্রিপ্টগুলি উপযোগী হয় যখন কন্টেন্ট স্ক্রিপ্টের মিলের ধরণগুলি সুপরিচিত না হয় বা যখন কন্টেন্ট স্ক্রিপ্টগুলি সর্বদা পরিচিত হোস্টগুলিতে ইনজেকশন করা উচিত নয়।

Chrome 96-এ প্রবর্তিত, গতিশীল ঘোষণাগুলি স্ট্যাটিক ঘোষণার মতোই, কিন্তু সামগ্রী স্ক্রিপ্ট অবজেক্টটি manifest.json- এর পরিবর্তে chrome.scripting নামস্থানে পদ্ধতি ব্যবহার করে Chrome এর সাথে নিবন্ধিত হয়। স্ক্রিপ্টিং API এক্সটেনশন ডেভেলপারদেরও অনুমতি দেয়:

স্ট্যাটিক ঘোষণার মতো, গতিশীল ঘোষণা জাভাস্ক্রিপ্ট ফাইল, CSS ফাইল বা উভয়ই অন্তর্ভুক্ত করতে পারে।

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" ব্যবহার করে মঞ্জুর করা যেতে পারে৷

নিম্নলিখিতটি একটি সক্রিয় ট্যাব-ভিত্তিক এক্সটেনশনের একটি ভিন্ন সংস্করণ।

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 স্ট্রিং এর অ্যারে ঐচ্ছিক। এই গ্লোবের সাথে মেলে শুধুমাত্র সেই URLগুলি অন্তর্ভুক্ত করতে matches পরে প্রয়োগ করা হয়৷ এটি @include Greasemonkey কীওয়ার্ড অনুকরণ করার উদ্দেশ্যে করা হয়েছে।
exclude_globs স্ট্রিং এর অ্যারে ঐচ্ছিক। এই গ্লোবের সাথে মেলে এমন URLগুলি বাদ দিতে matches পরে প্রয়োগ করা হয়েছে৷ @exclude Greasemonkey কীওয়ার্ড অনুকরণ করার উদ্দেশ্যে।

বিষয়বস্তু স্ক্রিপ্ট একটি পৃষ্ঠায় ইনজেকশন করা হবে যদি নিম্নলিখিত দুটি সত্য হয়:

  • এর URL যেকোন matches প্যাটার্ন এবং যেকোনো include_globs প্যাটার্নের সাথে মেলে।
  • URLটি একটি 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" ],
}]);

গ্লোব বৈশিষ্ট্যগুলি মিলের নিদর্শনগুলির চেয়ে একটি ভিন্ন, আরও নমনীয় বাক্য গঠন অনুসরণ করে৷ গ্রহণযোগ্য গ্লোব স্ট্রিং হল URL গুলি যাতে "ওয়াইল্ডকার্ড" তারকাচিহ্ন এবং প্রশ্ন চিহ্ন থাকতে পারে৷ তারকাচিহ্ন ( * ) খালি স্ট্রিং সহ যেকোনো দৈর্ঘ্যের যেকোনো স্ট্রিংয়ের সাথে মেলে, যখন প্রশ্ন চিহ্ন ( ? ) কোনো একক অক্ষরের সাথে মেলে।

উদাহরণ স্বরূপ, গ্লোব 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 এ নয় 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: https://www.nytimes.com/science এ নয় 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 ফিল্ড নিয়ন্ত্রণ করে যখন জাভাস্ক্রিপ্ট ফাইলগুলি ওয়েব পেজে ইনজেক্ট করা হয়। পছন্দের এবং ডিফল্ট মান হল "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 ইভেন্টের জন্য শোনার প্রয়োজন নেই, DOM সম্পূর্ণ হওয়ার পরে সেগুলি চালানোর নিশ্চয়তা রয়েছে৷ window.onload পরে যদি কোনও স্ক্রিপ্ট অবশ্যই চালানোর প্রয়োজন হয়, তাহলে document.readyState প্রপার্টি ব্যবহার করে onload ইতিমধ্যেই ফায়ার হয়েছে কিনা তা পরীক্ষা করতে পারে।
document_start স্ট্রিং css থেকে যেকোনো ফাইলের পরে স্ক্রিপ্ট ইনজেকশন করা হয়, কিন্তু অন্য কোনো DOM তৈরি বা অন্য কোনো স্ক্রিপ্ট চালানোর আগে।
document_end স্ট্রিং DOM সম্পূর্ণ হওয়ার সাথে সাথেই স্ক্রিপ্টগুলি ইনজেকশন করা হয়, কিন্তু ইমেজ এবং ফ্রেমের মতো সাবরিসোর্স লোড হওয়ার আগেই।

ফ্রেম নির্দিষ্ট করুন

ম্যানিফেস্টে নির্দিষ্ট করা ঘোষণামূলক বিষয়বস্তু স্ক্রিপ্টগুলির জন্য, "all_frames" ক্ষেত্রটি এক্সটেনশনকে নির্দিষ্ট করার অনুমতি দেয় যে JavaScript এবং CSS ফাইলগুলি নির্দিষ্ট ইউআরএল প্রয়োজনীয়তাগুলির সাথে মেলে বা শুধুমাত্র একটি ট্যাবের সর্বোচ্চ ফ্রেমে ইনজেকশন করা উচিত কিনা:

manifest.json 

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

chrome.scripting.registerContentScripts(...) ব্যবহার করে প্রোগ্রাম্যাটিকভাবে বিষয়বস্তু স্ক্রিপ্ট নিবন্ধন করার সময়, সমস্ত allFrames প্যারামিটারটি নির্দিষ্ট ইউআরএল প্রয়োজনীয়তার সাথে মেলে বা শুধুমাত্র একটি ট্যাবের শীর্ষে থাকা ফ্রেমে ইনজেকশন করা উচিত কিনা তা নির্দিষ্ট করতে ব্যবহার করা যেতে পারে৷ এটি শুধুমাত্র tabId এর সাথে ব্যবহার করা যেতে পারে, এবং ফ্রেমআইড বা ডকুমেন্ট আইডি নির্দিষ্ট করা থাকলে ব্যবহার করা যাবে না:

service-worker.js 

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

এক্সটেনশানগুলি ফ্রেমে স্ক্রিপ্ট চালাতে চাইতে পারে যেগুলি একটি ম্যাচিং ফ্রেমের সাথে সম্পর্কিত, কিন্তু নিজেরাই মেলে না৷ একটি সাধারণ দৃশ্য যখন এটি হয় তখন এমন ফ্রেমের ক্ষেত্রে ইউআরএল আছে যেগুলি একটি ম্যাচিং ফ্রেম দ্বারা তৈরি করা হয়েছিল, কিন্তু যেগুলির URLগুলি স্ক্রিপ্টের নির্দিষ্ট প্যাটার্নগুলির সাথে মেলে না৷

এটি এমন হয় যখন একটি এক্সটেনশন ইউআরএলগুলির সাথে ফ্রেমে ইনজেকশন করতে চায় যেগুলির about: , data: , blob: , এবং filesystem: স্কিম রয়েছে৷ এই ক্ষেত্রে, ইউআরএলটি কন্টেন্ট স্ক্রিপ্টের প্যাটার্নের সাথে মেলে না (এবং, about: এবং data: এর ক্ষেত্রে, এমনকি URL-এ মূল URL বা মূল অন্তর্ভুক্ত করবেন না, যেমন 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 সেট করা হলে, ক্রোম ফ্রেমের ইউআরএল-এর পরিবর্তে ফ্রেমটি মেলে কিনা তা নির্ধারণ করতে ফ্রেমের সূচনাকারীর উৎপত্তির দিকে তাকাবে। মনে রাখবেন যে এটি টার্গেট ফ্রেমের উৎপত্তির থেকেও ভিন্ন হতে পারে (যেমন, data: URL-এর একটি শূন্য মূল রয়েছে)।

ফ্রেমের ইনিশিয়েটর হল সেই ফ্রেম যা টার্গেট ফ্রেম তৈরি বা নেভিগেট করে। যদিও এটি সাধারণত সরাসরি অভিভাবক বা ওপেনার, এটি নাও হতে পারে (যেমন একটি ফ্রেমের ক্ষেত্রে একটি 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, নিজের কাছে বার্তা পোস্ট করে। এই বার্তাটি কন্টেন্ট স্ক্রিপ্ট দ্বারা আটকানো এবং পরিদর্শন করা হয় এবং তারপর এক্সটেনশন প্রক্রিয়াতে পোস্ট করা হয়। এইভাবে, পৃষ্ঠাটি এক্সটেনশন প্রক্রিয়ার সাথে যোগাযোগের একটি লাইন স্থাপন করে। বিপরীতটি অনুরূপ উপায়ে সম্ভব।

এক্সটেনশন ফাইল অ্যাক্সেস

একটি বিষয়বস্তু স্ক্রিপ্ট থেকে একটি এক্সটেনশন ফাইল অ্যাক্সেস করতে, আপনি chrome.runtime.getURL() এ কল করতে পারেন যাতে নিম্নলিখিত উদাহরণে দেখানো হয়েছে ( content.js ): আপনার এক্সটেনশন সম্পদের সম্পূর্ণ URL পেতে

content-script.js 

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

একটি CSS ফাইলে ফন্ট বা ছবি ব্যবহার করতে, আপনি @@extension_id ব্যবহার করে একটি URL তৈরি করতে পারেন যা নিম্নলিখিত উদাহরণে দেখানো হয়েছে ( 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() কল করে, এটি ইনজেকশন দেওয়ার আগে ক্রস-সাইট স্ক্রিপ্টিং আক্রমণের বিরুদ্ধে সামগ্রী ফিল্টার করার বিষয়ে সতর্ক থাকুন। "ম্যান-ইন-দ্য-মিডল" আক্রমণ এড়াতে শুধুমাত্র HTTPS-এর মাধ্যমে যোগাযোগ করুন।

দূষিত ওয়েব পৃষ্ঠাগুলির জন্য ফিল্টার করতে ভুলবেন না। উদাহরণস্বরূপ, নিম্নলিখিত নিদর্শনগুলি বিপজ্জনক, এবং ম্যানিফেস্ট 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);

পরিবর্তে, স্ক্রিপ্ট চালায় না এমন নিরাপদ API পছন্দ করুন:

করবেন

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);