एक्सटेंशन अलग-अलग, लेकिन आपस में जुड़े हुए कॉम्पोनेंट से बने होते हैं. कॉम्पोनेंट में बैकग्राउंड स्क्रिप्ट, कॉन्टेंट स्क्रिप्ट, विकल्प पेज, यूज़र इंटरफ़ेस (यूआई) एलिमेंट, और कई तरह की लॉजिक फ़ाइलें शामिल हो सकती हैं. एक्सटेंशन कॉम्पोनेंट, वेब डेवलपमेंट टेक्नोलॉजी की मदद से बनाए जाते हैं: एचटीएमएल, सीएसएस, और JavaScript. किसी एक्सटेंशन के कॉम्पोनेंट, उसके फ़ंक्शन पर निर्भर करेंगे और हो सकता है कि हर विकल्प की ज़रूरत न हो.
यह ट्यूटोरियल एक ऐसा एक्सटेंशन बनाएगा जिसकी मदद से उपयोगकर्ता developer.chrome.com पर किसी भी पेज के बैकग्राउंड का रंग बदल सकते हैं. इसमें कई मुख्य कॉम्पोनेंट का इस्तेमाल करके, उनके संबंधों को दिखाया जाएगा.
शुरू करने के लिए, एक नई डायरेक्ट्री बनाएं, ताकि एक्सटेंशन की फ़ाइलें एक साथ रखी जा सकें.
पूरा हो चुका एक्सटेंशन यहां मिल सकता है.
मेनिफ़ेस्ट बनाएं
एक्सटेंशन उनके मेनिफ़ेस्ट से शुरू होते हैं. manifest.json नाम की एक फ़ाइल बनाएं और उसमें नीचे दिया गया कोड शामिल करें.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
मेनिफ़ेस्ट फ़ाइल को होल्ड करने वाली डायरेक्ट्री को, उसकी मौजूदा स्थिति में डेवलपर मोड में एक्सटेंशन के तौर पर जोड़ा जा सकता है.
chrome://extensionsपर जाकर, एक्सटेंशन मैनेजमेंट पेज खोलें.- एक्सटेंशन मैनेजमेंट पेज को, Chrome मेन्यू पर क्लिक करके, ज़्यादा टूल पर कर्सर घुमाकर और फिर एक्सटेंशन को चुनकर भी खोला जा सकता है.
- डेवलपर मोड के आगे मौजूद टॉगल स्विच पर क्लिक करके, डेवलपर मोड चालू करें.
- अनपैक किया गया लोड करें बटन पर क्लिक करें और एक्सटेंशन डायरेक्ट्री चुनें.
टा-डा! एक्सटेंशन इंस्टॉल हो गया. मेनिफ़ेस्ट में कोई भी आइकॉन शामिल नहीं किया गया था, इसलिए एक्सटेंशन के लिए एक सामान्य टूलबार आइकॉन बनाया जाएगा.
निर्देश जोड़ें
एक्सटेंशन इंस्टॉल किया जा चुका है, लेकिन इसमें कोई निर्देश नहीं है. बैकग्राउंड स्क्रिप्ट के बारे में बताने के लिए, background.js टाइटल वाली फ़ाइल बनाएं और उसे एक्सटेंशन डायरेक्ट्री में रखें.
बैकग्राउंड स्क्रिप्ट और कई दूसरे अहम कॉम्पोनेंट, मेनिफ़ेस्ट में रजिस्टर होने चाहिए. मेनिफ़ेस्ट में बैकग्राउंड स्क्रिप्ट को रजिस्टर करने से एक्सटेंशन को यह पता चलता है कि किस फ़ाइल का रेफ़रंस देना है, और उस फ़ाइल को कैसे काम करना चाहिए.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
एक्सटेंशन को अब पता है कि इसमें एक स्थायी बैकग्राउंड स्क्रिप्ट शामिल है और वह रजिस्टर की गई फ़ाइल को ज़रूरी इवेंट के लिए स्कैन करेगा.
इस एक्सटेंशन के इंस्टॉल होते ही, आपको परसिस्टेंट वैरिएबल से जानकारी की ज़रूरत होगी. बैकग्राउंड स्क्रिप्ट में,
runtime.onInstalled के लिए लिसनिंग इवेंट शामिल करके शुरुआत करें. onInstalled लिसनर में, एक्सटेंशन storage API का इस्तेमाल करके वैल्यू सेट करेगा. इससे कई एक्सटेंशन कॉम्पोनेंट, उस वैल्यू को ऐक्सेस करके उसे अपडेट कर पाएंगे.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
storage API के साथ-साथ, ज़्यादातर एपीआई को मेनिफ़ेस्ट में "permissions" फ़ील्ड के तहत रजिस्टर किया जाना चाहिए, ताकि एक्सटेंशन उनका इस्तेमाल कर सके.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
एक्सटेंशन मैनेजमेंट पेज पर वापस जाएं और फिर से लोड करें लिंक पर क्लिक करें. व्यू की जांच करें नाम का एक नया फ़ील्ड, नीले लिंक के साथ बैकग्राउंड पेज में उपलब्ध हो जाता है.
बैकग्राउंड स्क्रिप्ट का कंसोल लॉग, "The color is green." देखने के लिए लिंक पर क्लिक करें
यूज़र इंटरफ़ेस का परिचय देना
एक्सटेंशन में यूज़र इंटरफ़ेस के कई फ़ॉर्मैट हो सकते हैं. हालांकि, यह पॉप-अप का इस्तेमाल करेगा.
popup.html शीर्षक वाली फ़ाइल बनाएं और उसे डायरेक्ट्री में जोड़ें. यह एक्सटेंशन,
बैकग्राउंड का रंग बदलने के लिए एक बटन का इस्तेमाल करता है.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
बैकग्राउंड स्क्रिप्ट की तरह, इस फ़ाइल को भी
page_action के तहत मेनिफ़ेस्ट में पॉप-अप के तौर पर दिखाया जाना चाहिए.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
default_icons फ़ील्ड में, page_action में टूलबार आइकॉन की कैटगरी भी शामिल की गई है.
इमेज फ़ोल्डर को यहां डाउनलोड करें. इसके बाद, उसे अनज़िप करें और एक्सटेंशन की डायरेक्ट्री में रखें. मेनिफ़ेस्ट
अपडेट करें, ताकि एक्सटेंशन को इमेज इस्तेमाल करने का तरीका पता चल सके.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
एक्सटेंशन, एक्सटेंशन मैनेजमेंट पेज पर इमेज, अनुमतियों की चेतावनी, और फ़ेविकॉन भी दिखाते हैं. ये इमेज, icons के तहत मेनिफ़ेस्ट में बताई गई हैं.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
अगर एक्सटेंशन को इस चरण में फिर से लोड किया जाता है, तो इसमें एक ग्रे-स्केल आइकॉन शामिल होगा, लेकिन फ़ंक्शन में कोई अंतर नहीं होगा. page_action के बारे में मेनिफ़ेस्ट में बताया गया है. इसलिए, एक्सटेंशन पर निर्भर करता है कि उपयोगकर्ता कब popup.html से इंटरैक्ट कर सकता है.
runtime.onInstalled लिसनर इवेंट में, declarativeContent एपीआई की मदद से, एलान किए गए नियमों को बैकग्राउंड स्क्रिप्ट में जोड़ें.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
एक्सटेंशन को अपने मेनिफ़ेस्ट में declarativeContent एपीआई को ऐक्सेस करने के लिए अनुमति की ज़रूरत होगी.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
जब उपयोगकर्ता किसी ऐसे यूआरएल पर जाएंगे जिसमें "developer.chrome.com" शामिल है, तो ब्राउज़र अब ब्राउज़र टूलबार में सभी रंगों वाले पेज ऐक्शन आइकॉन को दिखाएगा. हर रंग का आइकॉन होने पर, उपयोगकर्ता इस पर क्लिक करके
पॉप-अप.html देख सकते हैं.
पॉप-अप यूज़र इंटरफ़ेस (यूआई) का आखिरी चरण, बटन में रंग जोड़ना है. एक्सटेंशन डायरेक्ट्री में, इस कोड के साथ popup.js नाम की फ़ाइल बनाएं और उसे जोड़ें.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
यह कोड popup.html से बटन लेता है और स्टोरेज से कलर वैल्यू का अनुरोध करता है. इसके बाद, यह बटन के बैकग्राउंड पर रंग लागू करता है. popup.html में, popup.js के लिए स्क्रिप्ट टैग शामिल करें.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
हरा बटन देखने के लिए, एक्सटेंशन को फिर से लोड करें.
लेयर लॉजिक
एक्सटेंशन को अब पता है कि पॉप-अप developer.chrome.com पर उपयोगकर्ताओं के लिए उपलब्ध होना चाहिए और उस पर रंगीन बटन दिखता है, लेकिन आगे से उपयोगकर्ता इंटरैक्शन के लिए तर्क की ज़रूरत होती है. इस कोड को शामिल करने के लिए, popup.js को अपडेट करें.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
अपडेट किए गए कोड से, बटन पर एक onclick इवेंट जुड़ जाता है, जो प्रोग्राम के रूप में इंजेक्ट की गई
कॉन्टेंट की स्क्रिप्ट को ट्रिगर करता है. इससे पेज का बैकग्राउंड रंग वही हो जाता है जो बटन है. प्रोग्राम के हिसाब से, अपने-आप होने वाले इंजेक्शन की सुविधा से, वेब पेजों में अनचाहे कोड अपने-आप डालने के बजाय, उपयोगकर्ता की लगाई गई कॉन्टेंट स्क्रिप्ट को ऐक्सेस किया जा सकता है.
एक्सटेंशन को tabs एपीआई का कुछ समय के लिए ऐक्सेस देने के लिए, मेनिफ़ेस्ट को activeTab अनुमति की ज़रूरत होगी. इससे, एक्सटेंशन tabs.executeScript को कॉल करने की सुविधा चालू कर देता है.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
एक्सटेंशन अब पूरी तरह से काम कर रहा है! एक्सटेंशन को फिर से लोड करें, इस पेज को रीफ़्रेश करें, पॉप-अप खोलें और उसे हरा करने के लिए बटन पर क्लिक करें! हालांकि, हो सकता है कि कुछ उपयोगकर्ता बैकग्राउंड को अलग रंग में बदलना चाहें.
उपयोगकर्ताओं को विकल्प दें
फ़िलहाल, एक्सटेंशन उपयोगकर्ताओं को सिर्फ़ बैकग्राउंड का रंग हरा करने की अनुमति देता है. विकल्प पेज शामिल करने से, उपयोगकर्ताओं को एक्सटेंशन के फ़ंक्शन पर ज़्यादा कंट्रोल मिलता है. इससे उपयोगकर्ताओं के ब्राउज़िंग अनुभव को उनकी पसंद के मुताबिक बनाया जा सकता है.
options.html नाम की डायरेक्ट्री में एक फ़ाइल बनाकर शुरुआत करें और नीचे दिया गया कोड शामिल करें.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
फिर मेनिफ़ेस्ट में विकल्प पेज को रजिस्टर करें,
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
एक्सटेंशन को फिर से लोड करें और जानकारी पर क्लिक करें.
विवरण पेज को नीचे स्क्रोल करें और विकल्प पेज देखने के लिए एक्सटेंशन विकल्प चुनें, हालांकि वह अभी खाली दिखेगा.
आखिरी कदम, विकल्प लॉजिक को जोड़ना है. नीचे दिए गए कोड की मदद से, एक्सटेंशन डायरेक्ट्री में options.js नाम की एक फ़ाइल बनाएं.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
इसके बाद, रंग के चार विकल्प दिए जाते हैं. ये विकल्प, ऑनक्लिक इवेंट की सूची के साथ विकल्प पेज पर बटन के तौर पर जनरेट होते हैं. जब लोग किसी बटन पर क्लिक करते हैं, तो यह एक्सटेंशन के ग्लोबल स्टोरेज में मौजूद रंग की वैल्यू को अपडेट कर देता है. एक्सटेंशन की सभी फ़ाइलें, ग्लोबल स्टोरेज से रंग की जानकारी लेती हैं. इसलिए, किसी अन्य वैल्यू को अपडेट करने की ज़रूरत नहीं होती.
अगले चरण पर जाएं
बधाई! इस डायरेक्ट्री में अब पूरी तरह से काम करने वाला Chrome एक्सटेंशन है, लेकिन यह आसान है.
आगे क्या करना है?
- Chrome एक्सटेंशन की खास जानकारी में थोड़ा-बहुत बदलाव किया जाता है और एक्सटेंशन आर्किटेक्चर के बारे में बहुत सी जानकारी दी जाती है. साथ ही, कुछ ऐसे खास कॉन्सेप्ट जिनके बारे में डेवलपर को जानना होगा.
- डीबगिंग ट्यूटोरियल में, एक्सटेंशन को डीबग करने के लिए उपलब्ध विकल्पों के बारे में जानें.
- 'Chrome एक्सटेंशन' के पास, ओपन वेब पर उपलब्ध एपीआई के ऊपर भी बेहतरीन एपीआई का ऐक्सेस होता है. chrome.* API दस्तावेज़ हर एपीआई के बारे में जानेंगे.
- डेवलपर की गाइड में, बेहतर एक्सटेंशन बनाने से जुड़े दस्तावेज़ों के दर्जनों अतिरिक्त लिंक दिए गए हैं.