বিষয়বস্তু স্ক্রিপ্টগুলি এমন ফাইল যা ওয়েব পৃষ্ঠাগুলির প্রসঙ্গে চলে৷ স্ট্যান্ডার্ড ডকুমেন্ট অবজেক্ট মডেল (DOM) ব্যবহার করে, তারা ব্রাউজার পরিদর্শন করা ওয়েব পৃষ্ঠাগুলির বিশদ পড়তে, তাদের পরিবর্তন করতে এবং তাদের অভিভাবক এক্সটেনশনে তথ্য পাঠাতে সক্ষম হয়।
বিষয়বস্তু স্ক্রিপ্ট ক্ষমতা বুঝতে
বিষয়বস্তু স্ক্রিপ্টগুলি এক্সটেনশনের সাথে বার্তা বিনিময় করে তাদের অভিভাবক এক্সটেনশন দ্বারা ব্যবহৃত Chrome APIগুলি অ্যাক্সেস করতে পারে৷ তারা chrome.runtime.getURL() দিয়ে একটি এক্সটেনশনের ফাইলের URL অ্যাক্সেস করতে পারে এবং ফলাফলটি অন্যান্য URL-এর মতোই ব্যবহার করতে পারে৷
// Code for displaying EXTENSION_DIR/images/myimage.png:
var imgURL = chrome.runtime.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
অতিরিক্তভাবে, বিষয়বস্তু স্ক্রিপ্ট নিম্নলিখিত ক্রোম APIগুলি সরাসরি অ্যাক্সেস করতে পারে:
বিষয়বস্তু স্ক্রিপ্ট সরাসরি অন্যান্য API অ্যাক্সেস করতে অক্ষম.
বিচ্ছিন্ন বিশ্বে কাজ করুন
বিষয়বস্তু স্ক্রিপ্টগুলি একটি বিচ্ছিন্ন বিশ্বে বাস করে, একটি বিষয়বস্তু স্ক্রিপ্টকে পৃষ্ঠা বা অতিরিক্ত সামগ্রী স্ক্রিপ্টগুলির সাথে বিরোধ না করে তার জাভাস্ক্রিপ্ট পরিবেশে পরিবর্তন করতে দেয়৷
নীচের উদাহরণের মতো কোড সহ একটি ওয়েব পৃষ্ঠায় একটি এক্সটেনশন চলতে পারে৷
<html>
<button id="mybutton">click me</button>
<script>
var greeting = "hello, ";
var button = document.getElementById("mybutton");
button.person_name = "Bob";
button.addEventListener("click", function() {
alert(greeting + button.person_name + ".");
}, false);
</script>
</html>
এই এক্সটেনশন নিম্নলিখিত বিষয়বস্তু স্ক্রিপ্ট ইনজেক্ট করতে পারে.
var greeting = "hola, ";
var button = document.getElementById("mybutton");
button.person_name = "Roberto";
button.addEventListener("click", function() {
alert(greeting + button.person_name + ".");
}, false);
বোতাম টিপলে উভয় সতর্কতা প্রদর্শিত হবে।
বিচ্ছিন্ন বিশ্বগুলি বিষয়বস্তু স্ক্রিপ্ট, এক্সটেনশন এবং ওয়েব পৃষ্ঠাকে অন্যদের দ্বারা তৈরি কোনো ভেরিয়েবল বা ফাংশন অ্যাক্সেস করার অনুমতি দেয় না। এটি কন্টেন্ট স্ক্রিপ্টগুলিকে কার্যকারিতা সক্ষম করার ক্ষমতা দেয় যা ওয়েব পৃষ্ঠায় অ্যাক্সেসযোগ্য হওয়া উচিত নয়।
স্ক্রিপ্ট ইনজেক্ট করুন
বিষয়বস্তু স্ক্রিপ্ট প্রোগ্রাম বা ঘোষণামূলকভাবে ইনজেক্ট করা যেতে পারে.
প্রোগ্রাম্যাটিকভাবে ইনজেকশন করুন
বিষয়বস্তু স্ক্রিপ্টগুলির জন্য প্রোগ্রাম্যাটিক ইনজেকশন ব্যবহার করুন যা নির্দিষ্ট অনুষ্ঠানে চালানো প্রয়োজন।
একটি প্রোগ্রাম্যাটিক কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করতে, ম্যানিফেস্টে সক্রিয় ট্যাব অনুমতি প্রদান করুন। এটি সক্রিয় সাইটের হোস্টে নিরাপদ অ্যাক্সেস এবং ট্যাব অনুমতিতে অস্থায়ী অ্যাক্সেস মঞ্জুর করে, ক্রস-অরিজিন অনুমতিগুলি নির্দিষ্ট না করেই সামগ্রী স্ক্রিপ্টটিকে বর্তমান সক্রিয় ট্যাবে চালানোর জন্য সক্ষম করে৷
{
"name": "My extension",
...
"permissions": [
"activeTab"
],
...
}
বিষয়বস্তু স্ক্রিপ্ট কোড হিসাবে ইনজেক্ট করা যেতে পারে.
chrome.runtime.onMessage.addListener(
function(message, callback) {
if (message == "changeColor"){
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="orange"'
});
}
});
অথবা একটি সম্পূর্ণ ফাইল ইনজেকশন করা যেতে পারে।
chrome.runtime.onMessage.addListener(
function(message, callback) {
if (message == "runContentScript"){
chrome.tabs.executeScript({
file: 'contentScript.js'
});
}
});
ঘোষণামূলকভাবে ইনজেকশন করুন
কন্টেন্ট স্ক্রিপ্টের জন্য ঘোষণামূলক ইনজেকশন ব্যবহার করুন যা স্বয়ংক্রিয়ভাবে নির্দিষ্ট পৃষ্ঠাগুলিতে চালানো উচিত।
ঘোষণামূলকভাবে ইনজেক্ট করা স্ক্রিপ্টগুলি ম্যানিফেস্টে "content_scripts" ক্ষেত্রের অধীনে নিবন্ধিত হয়। তারা JavaScript ফাইল, CSS ফাইল বা উভয়ই অন্তর্ভুক্ত করতে পারে। সমস্ত স্বয়ংক্রিয়-চালিত বিষয়বস্তু স্ক্রিপ্ট অবশ্যই মিলের নিদর্শনগুলি নির্দিষ্ট করবে৷
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
],
...
}
| নাম | টাইপ | বর্ণনা |
|---|---|---|
matches {: # ম্যাচ } | | প্রয়োজন। এই বিষয়বস্তুর স্ক্রিপ্টটি কোন পৃষ্ঠাগুলিতে প্রবেশ করানো হবে তা নির্দিষ্ট করে৷ এই স্ট্রিংগুলির সিনট্যাক্সের আরও বিশদ বিবরণের জন্য ম্যাচ প্যাটার্ন দেখুন এবং কীভাবে URLগুলি বাদ দেওয়া যায় সে সম্পর্কে তথ্যের জন্য প্যাটার্ন এবং গ্লবগুলিকে মিল করুন ৷ |
css {: #css } | | ঐচ্ছিক। মিলিত পৃষ্ঠাগুলিতে ইনজেক্ট করা CSS ফাইলগুলির তালিকা৷ পৃষ্ঠার জন্য যেকোন DOM তৈরি বা প্রদর্শিত হওয়ার আগে এই অ্যারেতে যে ক্রমানুসারে তারা প্রদর্শিত হবে সেগুলিকে ইনজেকশন দেওয়া হয়। |
js {: #js } | | ঐচ্ছিক। জাভাস্ক্রিপ্ট ফাইলগুলির তালিকা যা মিলিত পৃষ্ঠাগুলিতে প্রবেশ করানো হবে৷ তারা এই অ্যারে প্রদর্শিত ক্রমে ইনজেকশনের হয়. |
match_about_blank {: #match_about_blank } | বুলিয়ান | ঐচ্ছিক। স্ক্রিপ্টটি একটি about:blank ফ্রেমে ইনজেক্ট করা উচিত কিনা যেখানে প্যারেন্ট বা ওপেনার ফ্রেমটি matches ঘোষিত প্যাটার্নগুলির একটির সাথে মিলে যায়৷ ডিফল্ট থেকে false । |
ম্যাচ এবং গ্লোব বাদ দিন
ম্যানিফেস্ট রেজিস্ট্রেশনে নিম্নলিখিত ক্ষেত্রগুলি অন্তর্ভুক্ত করে নির্দিষ্ট পৃষ্ঠার মিল কাস্টমাইজ করা যায়।
| নাম | টাইপ | বর্ণনা |
|---|---|---|
exclude_matches {: #exclude_matches } | | ঐচ্ছিক। এই বিষয়বস্তু স্ক্রিপ্ট অন্যথায় ইনজেকশনের হবে যে পৃষ্ঠাগুলি বাদ দেয়. এই স্ট্রিংগুলির সিনট্যাক্স সম্পর্কে আরও বিস্তারিত জানার জন্য ম্যাচ প্যাটার্নস দেখুন। |
include_globs {: #ইনক্লুড_গ্লোবস } | | ঐচ্ছিক। এই গ্লোবের সাথে মেলে শুধুমাত্র সেই URLগুলি অন্তর্ভুক্ত করতে matches পরে প্রয়োগ করা হয়৷ @include Greasemonkey কীওয়ার্ড অনুকরণ করার উদ্দেশ্যে। |
exclude_globs {: #exclude_globs } | | ঐচ্ছিক। এই গ্লোবের সাথে মেলে এমন URLগুলি বাদ দিতে matches পরে প্রয়োগ করা হয়েছে৷ @exclude Greasemonkey কীওয়ার্ড অনুকরণ করার উদ্দেশ্যে। |
বিষয়বস্তু স্ক্রিপ্ট একটি পৃষ্ঠাতে ইনজেকশন করা হবে যদি এর URL যেকোন matches প্যাটার্ন এবং যেকোনও include_globs প্যাটার্নের সাথে মেলে, যতক্ষণ না URLটি exclude_matches বা exclude_globs প্যাটার্নের সাথে মেলে না।
যেহেতু matches বৈশিষ্ট্য প্রয়োজন, তাই exclude_matches , include_globs , এবং exclude_globs শুধুমাত্র কোন পৃষ্ঠাগুলি প্রভাবিত হবে তা সীমিত করতে ব্যবহার করা যেতে পারে৷
নিম্নলিখিত এক্সটেনশনটি কন্টেন্ট স্ক্রিপ্টটিকে http://www.nytimes.com/ health- এ প্রবেশ করাবে কিন্তু http://www.nytimes.com/ ব্যবসায় নয়।
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"exclude_matches": ["*://*/*business*"],
"js": ["contentScript.js"]
}
],
...
}
গ্লোব বৈশিষ্ট্যগুলি মিলের নিদর্শনগুলির চেয়ে একটি ভিন্ন, আরও নমনীয় বাক্য গঠন অনুসরণ করে৷ গ্রহণযোগ্য গ্লোব স্ট্রিং হল URL গুলি যাতে "ওয়াইল্ডকার্ড" তারকাচিহ্ন এবং প্রশ্ন চিহ্ন থাকতে পারে৷ তারকাচিহ্ন * খালি স্ট্রিং সহ যেকোনো দৈর্ঘ্যের যে কোনো স্ট্রিংয়ের সাথে মেলে, যখন প্রশ্ন চিহ্ন ? যেকোনো একক অক্ষরের সাথে মিলে যায়।
যেমন গ্লোব http://??? .example.com/foo/ * নিচের যেকোনো একটির সাথে মেলে:
- http:// www .example.com/foo /bar
- http:// the .example.com/foo /
যাইহোক, এটি নিম্নলিখিতগুলির সাথে মেলে না :
- http:// my .example.com/foo/bar
- http:// উদাহরণ .com/foo/
- http://www.example.com/foo
এই এক্সটেনশনটি কন্টেন্ট স্ক্রিপ্টটিকে http://www.nytimes.com/ arts /index.html এবং http://www.nytimes.com/ jobs /index.html- এ ইনজেক্ট করবে কিন্তু http://www.nytimes.com- এ নয় / ক্রীড়া /index.html ।
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"include_globs": ["*nytimes.com/???s/*"],
"js": ["contentScript.js"]
}
],
...
}
এই এক্সটেনশনটি কন্টেন্ট স্ক্রিপ্টটিকে http:// history .nytimes.com এবং http://.nytimes.com/ ইতিহাসে প্রবেশ করাবে কিন্তু http:// science .nytimes.com বা http://www.nytimes.com- এ নয় / বিজ্ঞান ।
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"exclude_globs": ["*science*"],
"js": ["contentScript.js"]
}
],
...
}
সঠিক সুযোগ অর্জনের জন্য এক, সমস্ত বা এর মধ্যে কিছু অন্তর্ভুক্ত করা যেতে পারে।
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"exclude_matches": ["*://*/*business*"],
"include_globs": ["*nytimes.com/???s/*"],
"exclude_globs": ["*science*"],
"js": ["contentScript.js"]
}
],
...
}
রান সময়
যখন JavaScript ফাইলগুলি ওয়েব পেজে ইনজেক্ট করা হয় তখন run_at ফিল্ড দ্বারা নিয়ন্ত্রিত হয়। পছন্দের এবং ডিফল্ট ক্ষেত্রটি হল "document_idle" , তবে প্রয়োজনে "document_start" বা "document_end" হিসেবেও নির্দিষ্ট করা যেতে পারে।
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"run_at": "document_idle",
"js": ["contentScript.js"]
}
],
...
}
| নাম | টাইপ | বর্ণনা |
|---|---|---|
document_idle {: # নথি_ নিষ্ক্রিয় } | স্ট্রিং | পছন্দের যখনই সম্ভব "document_idle" ব্যবহার করুন।ব্রাউজার "document_end" এবং windowonload ইভেন্ট ফায়ার হওয়ার পরপরই স্ক্রিপ্ট ইনজেক্ট করার জন্য একটি সময় বেছে নেয়। ইনজেকশনের সঠিক মুহূর্ত নির্ভর করে ডকুমেন্টটি কতটা জটিল এবং এটি লোড হতে কতক্ষণ সময় নিচ্ছে এবং পৃষ্ঠা লোডের গতির জন্য অপ্টিমাইজ করা হয়েছে।"document_idle" এ চলমান বিষয়বস্তু স্ক্রিপ্টগুলির window.onload ইভেন্টের জন্য শোনার প্রয়োজন নেই, DOM সম্পূর্ণ হওয়ার পরে সেগুলি চালানোর নিশ্চয়তা রয়েছে৷ window.onload এর পরে যদি কোনও স্ক্রিপ্ট অবশ্যই চালানোর প্রয়োজন হয়, তাহলে document.readyState প্রপার্টি ব্যবহার করে onload ইতিমধ্যেই ফায়ার হয়েছে কিনা তা পরীক্ষা করতে পারে। |
document_start {: #ডকুমেন্ট_স্টার্ট } | স্ট্রিং | css থেকে যেকোনো ফাইলের পরে স্ক্রিপ্ট ইনজেকশন করা হয়, কিন্তু অন্য কোনো DOM তৈরি বা অন্য কোনো স্ক্রিপ্ট চালানোর আগে। |
document_end {: #ডকুমেন্ট_এন্ড } | স্ট্রিং | DOM সম্পূর্ণ হওয়ার সাথে সাথেই স্ক্রিপ্টগুলি ইনজেকশন করা হয়, কিন্তু ইমেজ এবং ফ্রেমের মতো সাবরিসোর্স লোড হওয়ার আগেই। |
ফ্রেম নির্দিষ্ট করুন
"all_frames" ক্ষেত্রটি এক্সটেনশনকে নির্দিষ্ট করার অনুমতি দেয় যে JavaScript এবং CSS ফাইলগুলি নির্দিষ্ট URL এর প্রয়োজনীয়তাগুলির সাথে মেলে বা শুধুমাত্র একটি ট্যাবের সর্বোচ্চ ফ্রেমে ইনজেকশন করা উচিত কিনা৷
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"all_frames": true,
"js": ["contentScript.js"]
}
],
...
}
| নাম | টাইপ | বর্ণনা |
|---|---|---|
all_frames {: #all_frames } | বুলিয়ান | ঐচ্ছিক। ডিফল্ট থেকে false , যার অর্থ শুধুমাত্র উপরের ফ্রেমটি মিলেছে৷যদি true উল্লেখ করা হয়, তাহলে এটি সমস্ত ফ্রেমে প্রবেশ করাবে, এমনকি ফ্রেমটি ট্যাবের সর্বোচ্চ ফ্রেম না হলেও। প্রতিটি ফ্রেম ইউআরএল প্রয়োজনীয়তার জন্য স্বাধীনভাবে চেক করা হয়, ইউআরএল প্রয়োজনীয়তা পূরণ না হলে এটি চাইল্ড ফ্রেমে প্রবেশ করাবে না। |
এম্বেডিং পৃষ্ঠার সাথে যোগাযোগ
যদিও বিষয়বস্তু স্ক্রিপ্টের কার্যকরী পরিবেশ এবং সেগুলি হোস্ট করে এমন পৃষ্ঠাগুলি একে অপরের থেকে বিচ্ছিন্ন, তারা পৃষ্ঠার DOM-এ অ্যাক্সেস ভাগ করে নেয়। যদি পৃষ্ঠাটি বিষয়বস্তু স্ক্রিপ্টের সাথে বা বিষয়বস্তু স্ক্রিপ্টের মাধ্যমে এক্সটেনশনের সাথে যোগাযোগ করতে চায়, তবে এটি অবশ্যই ভাগ করা DOM-এর মাধ্যমে তা করতে হবে।
একটি উদাহরণ window.postMessage ব্যবহার করে সম্পন্ন করা যেতে পারে:
var port = chrome.runtime.connect();
window.addEventListener("message", function(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);
document.getElementById("theButton").addEventListener("click",
function() {
window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);
নন-এক্সটেনশন পৃষ্ঠা, example.html, নিজের কাছে বার্তা পোস্ট করে। এই বার্তাটি কন্টেন্ট স্ক্রিপ্ট দ্বারা আটকানো এবং পরিদর্শন করা হয় এবং তারপর এক্সটেনশন প্রক্রিয়াতে পোস্ট করা হয়। এইভাবে, পৃষ্ঠাটি এক্সটেনশন প্রক্রিয়ার সাথে যোগাযোগের একটি লাইন স্থাপন করে। বিপরীতটি অনুরূপ উপায়ে সম্ভব।
নিরাপদে থাকুন
যদিও বিচ্ছিন্ন বিশ্বগুলি সুরক্ষার একটি স্তর সরবরাহ করে, সামগ্রীর স্ক্রিপ্টগুলি ব্যবহার করে একটি এক্সটেনশন এবং ওয়েব পৃষ্ঠায় দুর্বলতা তৈরি করতে পারে৷ যদি বিষয়বস্তু স্ক্রিপ্ট একটি পৃথক ওয়েবসাইট থেকে বিষয়বস্তু গ্রহণ করে, যেমন একটি XMLHttpRequest তৈরি করা, এটি ইনজেকশন করার আগে বিষয়বস্তু ক্রস-সাইট স্ক্রিপ্টিং আক্রমণগুলি ফিল্টার করতে সতর্ক থাকুন৷ "ম্যান-ইন-দ্য-মিডল" আক্রমণ এড়াতে শুধুমাত্র HTTPS-এর মাধ্যমে যোগাযোগ করুন।
দূষিত ওয়েব পৃষ্ঠাগুলির জন্য ফিল্টার করতে ভুলবেন না। উদাহরণস্বরূপ, নিম্নলিখিত নিদর্শনগুলি বিপজ্জনক:
var data = document.getElementById("json-data")
// WARNING! Might be evaluating an evil script!
var parsed = eval("(" + data + ")")
var elmt_id = ...
// WARNING! elmt_id might be "); ... evil script ... //"!
window.setTimeout("animate(" + elmt_id + ")", 200);
পরিবর্তে, নিরাপদ API পছন্দ করুন যা স্ক্রিপ্ট চালায় না:
var data = document.getElementById("json-data")
// JSON.parse does not evaluate the attacker's scripts.
var parsed = JSON.parse(data);
var elmt_id = ...
// The closure form of setTimeout does not evaluate scripts.
window.setTimeout(function() {
animate(elmt_id);
}, 200);