एक्सटेंशन अलग-अलग, लेकिन आपस में जुड़े हुए कॉम्पोनेंट से बने होते हैं. घटकों में बैकग्राउंड शामिल हो सकता है स्क्रिप्ट, कॉन्टेंट स्क्रिप्ट, एक विकल्प पेज, यूज़र इंटरफ़ेस (यूआई) एलिमेंट, और कई लॉजिक फ़ाइलें. एक्सटेंशन कॉम्पोनेंट, वेब डेवलपमेंट टेक्नोलॉजी की मदद से बनाए जाते हैं: एचटीएमएल, सीएसएस, और JavaScript. अगर आप एक्सटेंशन के कॉम्पोनेंट, इसकी सुविधाओं पर निर्भर करेंगे. हो सकता है कि इसके लिए हर विकल्प की ज़रूरत न पड़े.
यह ट्यूटोरियल एक ऐसा एक्सटेंशन बनाएगा जो उपयोगकर्ता को किसी भी इमेज के बैकग्राउंड का रंग बदलने की सुविधा देता है developer.chrome.com पर जाएं. शुरुआती जानकारी देने के लिए, इसमें कई मुख्य कॉम्पोनेंट का इस्तेमाल किया जाता है करने के लिए डिज़ाइन किया गया है.
शुरू करने के लिए, एक्सटेंशन की फ़ाइलों को होल्ड करने के लिए एक नई डायरेक्ट्री बनाएं.
पूरा किया गया एक्सटेंशन यहां देखा जा सकता है.
मेनिफ़ेस्ट बनाएं
एक्सटेंशन अपने मेनिफ़ेस्ट से शुरू होते हैं. manifest.json नाम की एक फ़ाइल बनाएं और उसमें
.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
मेनिफ़ेस्ट फ़ाइल को होल्ड करने वाली डायरेक्ट्री को डेवलपर मोड में, एक्सटेंशन के रूप में इस मोड में जोड़ा जा सकता है: मौजूदा स्थिति.
chrome://extensionsपर जाकर, एक्सटेंशन मैनेजमेंट पेज खोलें.- एक्सटेंशन मैनेजमेंट पेज को Chrome मेन्यू पर क्लिक करके भी खोला जा सकता है. इसके लिए, More Tools फिर एक्सटेंशन चुनकर.
- डेवलपर मोड के आगे मौजूद टॉगल स्विच पर क्लिक करके, डेवलपर मोड चालू करें.
- UNPACKED लोड करें बटन पर क्लिक करें और एक्सटेंशन डायरेक्ट्री चुनें.
टा-डा! एक्सटेंशन इंस्टॉल हो गया है. क्योंकि इसमें कोई आइकॉन शामिल नहीं किया गया था मेनिफ़ेस्ट है, तो एक्सटेंशन के लिए एक सामान्य टूलबार आइकॉन बनाया जाएगा.
निर्देश जोड़ें
भले ही एक्सटेंशन इंस्टॉल हो गया है, लेकिन इसमें कोई निर्देश नहीं है. बैकग्राउंड स्क्रिप्ट का परिचय दें
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 से कब इंटरैक्ट कर सकता है.
declarativeContent API के साथ, तय किए गए नियमों को बैकग्राउंड स्क्रिप्ट में जोड़ें
runtime.onInstalled लिसनर इवेंट.
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.js में स्क्रिप्ट टैग शामिल करें
popup.html.
<!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 इवेंट जोड़ता है. यह प्रोग्राम के हिसाब से इंजेक्ट किया गया कोड ट्रिगर करता है
कॉन्टेंट स्क्रिप्ट. इससे पेज का बैकग्राउंड रंग, बटन के रंग जैसा ही बदल जाता है. इसका इस्तेमाल किया जा रहा है
प्रोग्रैम्ड तरीके से इंजेक्शन लगाने की सुविधा से, अनचाही फ़ाइलों को अपने-आप डालने के बजाय, उपयोगकर्ता के ज़रिए अपलोड की गई कॉन्टेंट स्क्रिप्ट बनाई जा सकती है
में कोड डालने की ज़रूरत नहीं होती.
एक्सटेंशन को कुछ समय के लिए, इस मेनिफ़ेस्ट का ऐक्सेस देने के लिए, मेनिफ़ेस्ट को activeTab की अनुमति की ज़रूरत होगी
tabs एपीआई. इससे 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.* एपीआई दस्तावेज़ में, हर एपीआई की जानकारी दी जाएगी.
- डेवलपर की गाइड में बेहतर एक्सटेंशन बनाना.