Google क्रोम के लिए एक सरल एक्सटेंशन विकसित करना

ब्राउज़र एक्सटेंशन इन दिनों बहुत लोकप्रिय हैं। हमेशा किसी भी एक्सटेंशन को लिखने का एक कारण होता है, और कई और भी होते हैं।

इस लेख में मैं बात करना चाहता हूं कि मैंने व्यक्तिगत उद्देश्यों के लिए Google क्रोम के लिए एक छोटा सा विस्तार कैसे लिखा। और लेख का उद्देश्य एक युवा प्रोग्रामर की मदद करना है जिसे अंग्रेजी समझने में कठिनाई होती है। तीसरे वर्ष में हर कोई Google दस्तावेज़ नहीं पढ़ पाएगा, जो केवल अंग्रेजी में है। और मैं एक विस्तार करना चाहता हूं।

यदि आप देखते हैं, तो रूसी में क्रोम के लिए एक्सटेंशन के विकास पर कुछ भी समझदार नहीं है, केवल यह लेख उपलब्ध है जो बहुत मूल बातें बताता है।

यह पोस्ट एक अधिक उन्नत संस्करण होगा।

चलिए शुरू करते हैं।

मैं बहुत मूल बातों में नहीं जाना चाहता और इसलिए मैं पहले इस लेख को पढ़ने की सलाह देता हूं।

मेरा एक्सटेंशन डाउनलोड करें और कोड को पढ़ने के समानांतर देखें।

हम पहले से ही मोटे तौर पर जानते हैं कि क्या है।
संक्षेप में, यह मुख्य एक्सटेंशन फ़ाइल है, जो ब्राउज़र को बताती है कि एक्सटेंशन किन चीजों का उपयोग करेगा, और मुख्य पैरामीटर (नाम, विवरण, आदि)।

हम सीधे अपने विस्तार के लिए आगे बढ़ते हैं।
यह एक सरल स्क्रिप्ट है जो उन फ्रीलांस पेज से हटाती है जो उन विज्ञापनों की खोज में बाधा डालते हैं जो मुझे ब्याज देते हैं (अधिक सटीक होने के लिए, मैं केवल दीर्घकालिक परियोजनाओं की तलाश में हूं)। मौजूदा अंतर्निहित फ़िल्टर में जोड़।

manifest.json

{
"name" : "Ffilter" ,
"version" : "1.0" ,
"background_page" : "bg.html" , // background .
"icons" : {
"48" : "icon_48.png" ,
"128" : "icon_128.png"
},
"page_action" :{ //
"default_title" : "Ffilter" ,
"default_icon" : "icon_19.png" ,
"default_popup" : "popup.html" //
},
"permissions" : [ //
"tabs" , "http://www.free-lance.ru/*"
],
"content_scripts" :[{ // DOM .
"matches" : [ "http://www.free-lance.ru/*" ],
"js" : [ "jq.js" , "script.js" ]
}]
}

* This source code was highlighted with Source Code Highlighter .

पर विचार करें।
नाम, संस्करण - यह सभी के लिए स्पष्ट है।

बैकग्राउंड_पेज - यहां बैकग्राउंड पेज का नाम होना चाहिए। पृष्ठभूमि पृष्ठ एक बहुत महत्वपूर्ण तत्व हैं, हालांकि कुछ अनुप्रयोगों के लिए यह आवश्यक नहीं है। लेकिन हमारे मामलों में, कोई भी इसके बिना नहीं कर सकता।
पृष्ठभूमि पृष्ठ हमेशा काम करता है जब एक्सटेंशन काम करता है (अर्थात, जब यह चालू होता है)। वह हमेशा अकेली रहती है और अन्य सभी तत्वों से संवाद और नियंत्रण कर सकती है।

पता बार के पास, एक्सटेंशन बार की सूची में, पता बार में प्रदर्शित करने के लिए विभिन्न आकारों में आइकन की आवश्यकता होती है।

पेज_एक्शन एक महत्वपूर्ण वस्तु है। यह ब्राउज़र को बताता है कि हमारा एक्सटेंशन प्रत्येक टैब के लिए अलग-अलग होगा, अर्थात, पता बार में आइकन प्रदर्शित होगा, और पैनल में नहीं (उदाहरण के लिए, जीमेल चेकर )। जीमेल चेकर जैसे एक्सटेंशन को व्यक्तिगत नहीं माना जाता है, वे पूरे ब्राउज़र के लिए एक बार खोले जाते हैं (उनके लिए, ब्राउजर_एक्शन ऑब्जेक्ट का उपयोग पेज_एक्शन ऑब्जेक्ट के बजाय, चित्रों में क्रमशः किया जाता है)।


default_title , default_icon - नाम, आइकन, क्रमशः।
default_popup - html एक्सटेंशन पेज का नाम जो आइकन पर क्लिक करने पर पॉप अप होगा। पिछले विषय को देखें, यदि सब कुछ स्पष्ट नहीं है।

अनुमतियाँ - अनुमतियों के साथ एक सरणी। यह हमारे लिए सिस्टम ऑब्जेक्ट टैब के साथ संवाद करने और फ्रीलांस एड्रेस का उपयोग करने के लिए उपयोगी है (मेरा मतलब है कि ajax अनुरोध नहीं है, लेकिन पेज के साथ js काम करता है)।

content_scripts हमारे लिए एक महत्वपूर्ण वस्तु है, यह वह है जो हमें फ्रीलांस पेज पर js का उपयोग करने की अनुमति देता है। हम पृष्ठ का पता निर्दिष्ट करते हैं और जेएस फाइलों को निर्दिष्ट करते हैं जो शरीर को लोड करने के तुरंत बाद निष्पादित किए जाएंगे। मैं jQuery का उपयोग करता हूं और अपने कार्यों को परिभाषित करता हूं। आदेश मायने रखता है।
यह जानना महत्वपूर्ण है कि विस्तार स्क्रिप्ट पृष्ठ की वस्तुओं / स्क्रिप्ट चर को स्वयं नहीं देख सकती हैं। इसका मतलब यह है कि यदि पृष्ठ पर पहले से ही अपना jQuery है, तो हम इसका उपयोग नहीं कर पाएंगे, आपको निश्चित रूप से अपना लोड करना होगा। इसे अलग-थलग दुनिया कहा जाता है और यह कभी-कभी सुविधाजनक होता है। विस्तार से, निश्चित रूप से, डोम में हेरफेर कर सकते हैं।

हम और आगे बढ़ें।
यदि आपने सब कुछ सही ढंग से कल्पना की है, तो आप देखते हैं कि हमारे विस्तार में 3 मुख्य ऑब्जेक्ट हैं: एक पृष्ठभूमि पृष्ठ (सभी के लिए एक), एक फ़िल्टर विंडो (प्रत्येक पृष्ठ के लिए), और प्रत्येक पृष्ठ पर स्क्रिप्ट।

सामान्य एल्गोरिथ्म इस प्रकार है:
फ़िल्टर को केवल वर्तमान पृष्ठ पर स्क्रिप्ट के साथ संवाद करना चाहिए। स्क्रिप्ट को केवल वर्तमान पृष्ठ पर फ़िल्टर से निर्देश स्वीकार करना चाहिए और उन्हें निष्पादित करना चाहिए। दोनों को पृष्ठभूमि पृष्ठ के साथ संवाद नहीं करना चाहिए, लेकिन पृष्ठभूमि पृष्ठ को फ़िल्टर को नियंत्रित करना चाहिए। आखिरकार, फिल्टर केवल फ्रीलान्स पेज पर दिखाई देना चाहिए। और वैसे, पेज_एक्शन एक्सटेंशन हमेशा डिफ़ॉल्ट रूप से छिपा होता है, और आपको पृष्ठभूमि पृष्ठ के माध्यम से इसे सक्षम करने की आवश्यकता होती है, यह तब होता है जब फ्रीलांस पेज लोड होता है।


bg.html

chrome.tabs.onUpdated.addListener( function (id,info,tab) {
if (info.url)
if (/free-lance.ru/.test(info.url))
chrome.pageAction.show(id);
});

* This source code was highlighted with Source Code Highlighter .

केवल js कोड दिया गया है (केवल इसकी आवश्यकता है)।
chrome.tabs सिस्टम ऑब्जेक्ट है जिसके साथ आपको सबसे अधिक काम करना है, आपने अनुमान लगाया, यह टैब के लिए जिम्मेदार है।

हम अपने फ़ंक्शन को ऑनपेडड इवेंट (टैब को अपडेट करते हुए, लिंक के बाद) पर लटकाते हैं । जैसे ही टैब की पहचानकर्ता पैरामीटर आते हैं, अपडेट के बारे में जानकारी, टैब की वस्तु। हमें जानकारी चाहिए - इसमें वर्तमान पृष्ठ का पता है। हम जांचते हैं कि क्या यह फ्रीलान्स है और यदि ऐसा है, तो इस टैब के पहचानकर्ता को पास करते हुए chrome.pageAction ऑब्जेक्ट पर शो विधि को कॉल करें।

chrome.pageAction - पता बार के अंदर एक्सटेंशन के लिए जिम्मेदार ऑब्जेक्ट, और हम आपको उस टैब में आइकन दिखाने के लिए कहते हैं जिसकी हमें ज़रूरत है (जहां फ्रीलांस अभी-अभी खोला गया है)।

पृष्ठभूमि पृष्ठ की सभी क्रियाएं समाप्त हो गई हैं, साइट खुल गई है, एक आइकन दिखाई दिया है, अब आप उस पर क्लिक कर सकते हैं और पॉपअप.html दिखाई देगा।

popup.html

सभी कोड को पार्स करने का कोई मतलब नहीं है, केवल यह जानना महत्वपूर्ण है कि इस विंडो से पृष्ठ पर प्रतीक्षा कर रहे स्क्रिप्ट का उपयोग कैसे करें, परिवहन कैसे सेट करें?

सामान्य तौर पर, प्रलेखन तुरंत इस विधि का सुझाव देता है:

chrome.tabs.executeScript( null , {code: "alert('hello!')" });

* This source code was highlighted with Source Code Highlighter .

या आप यह कर सकते हैं:

chrome.tabs.executeScript( null , {file : “script.js”});

* This source code was highlighted with Source Code Highlighter .

लेकिन इस बारे में सोचें कि वहां मापदंडों को कैसे पारित किया जाए? केवल स्ट्रिंग? (वैसे, अशक्त - इसका मतलब है कि हम वर्तमान टैब पर स्क्रिप्ट निष्पादित करना चाहते हैं)
यह मेरे अनुकूल था, मैं वस्तुओं को पारित करने के लिए एक रास्ता ढूंढ रहा था। और इस तरह की एक विधि पाई गई थी, लेकिन यह प्रलेखन में छिपा हुआ था।
पोर्ट क्रोम में एक विशेष वस्तु है जिसका उपयोग स्क्रिप्ट से पृष्ठभूमि पृष्ठ और पॉपअप, या पृष्ठभूमि पृष्ठ और स्क्रिप्ट में पॉपअप से संवाद करने के लिए किया जा सकता है।

टैब से जुड़ने के लिए आपको उस स्क्रिप्ट से कनेक्ट करना होगा:

var port = chrome.tabs.connect(id);

* This source code was highlighted with Source Code Highlighter .

जहां आईडी स्क्रिप्ट के साथ आवश्यक टैब की संख्या है। पोर्ट लौटाया गया ट्रांसपोर्ट ऑब्जेक्ट है।

पृष्ठभूमि पृष्ठ या पॉप-अप विंडो से कनेक्ट करने के लिए, आपको एक्सटेंशन ऑब्जेक्ट तक पहुंचने की आवश्यकता है:

var port = chrome.extension.connect();

* This source code was highlighted with Source Code Highlighter .

एक विस्तार - कोई पहचानकर्ता की जरूरत नहीं।
आप इन कनेक्शनों को उसी तरह से सुन सकते हैं जैसे वहाँ और वहाँ:

chrome.extension.onConnect.addListener( function (port){
port.onMessage.addListener(MyFunc);
});

* This source code was highlighted with Source Code Highlighter .

ऑनमैसेज क्यों बाद में स्पष्ट हो जाएगा।

वापस popup.html पर जाएं।
इस बिंदु पर, मैं एक स्क्रिप्ट से संपर्क कर रहा हूं जो इस पृष्ठ पर "कर्तव्य पर" है।
यह मेरे लिए एक समस्या बन गई कि आपको टैब के पहचानकर्ता को निर्दिष्ट करने की आवश्यकता है, लेकिन मुझे यह आईडी नहीं पता है। यह मज़ेदार है कि हमें वर्तमान टैब की आवश्यकता है, और हम केवल संख्या के बजाय अशक्त भेज सकते हैं, लेकिन यह काम नहीं करेगा - आपको आईडी जानने की आवश्यकता है। कैसे?
मैंने उस पर बहुत समय मारा और इसे इस तरह किया:

chrome.windows.getCurrent( function (w){
chrome.tabs.getSelected(w.id, function (t){
port = chrome.tabs.connect(t.id);
})
});

* This source code was highlighted with Source Code Highlighter .

हम आपको यह बताने के लिए कहते हैं कि वर्तमान में कौन सी विंडो सक्रिय है, और कॉलबैक में विंडो ऑब्जेक्ट हमारे पास वापस आ गया है। इसके बाद, हम आपको इस विंडो में वर्तमान टैब कहने के लिए कहते हैं और वे इसे कॉलबैक में भी हमें लौटा देंगे। और उसके बाद ही हम स्क्रिप्ट से कनेक्शन खोलते हैं।
यह काम करता है, लेकिन यह मुझे लगता है कि यह गलत है - एक सरल तरीका होना चाहिए।

जब सभी फ़िल्टर डेटा एकत्र किया जाता है, तो बटन पर क्लिक करके हम विधि का उपयोग करके इस पोर्ट पर एक ऑब्जेक्ट भेजते हैं:

port.postMessage(obj);

* This source code was highlighted with Source Code Highlighter .

और उस पल में script.js काम करना शुरू कर देती है

Script.js में , यह महत्वपूर्ण है:

chrome.extension.onConnect.addListener( function (port){
port.onMessage.addListener(Filtr);
});

* This source code was highlighted with Source Code Highlighter .

हम पोर्ट को सुनते हैं और पोर्ट ऑब्जेक्ट के साथ आने वाले कनेक्शन की प्रतीक्षा करते हैं।
इस ऑब्जेक्ट में एक ऑनमैसेज घटना है - एक घटना जब एक संदेश यहां भेजा जाता है। हम अपने Filtr फ़ंक्शन को लटकाते हैं, जो दूसरे छोर पर port.postMessage () का उपयोग करके भेजे जाने वाले सभी तर्कों को ले जाएगा। Filtr फ़ंक्शन ऑब्जेक्ट में निर्दिष्ट सभी घोषणाओं को हटा देगा।

सब

वह सब है। यह काम करता है और मुझे नौकरी खोजने में मदद करता है।
अंग्रेजी के ज्ञान के बिना समझना मुश्किल था।
मुझे उम्मीद है कि आप काम आएंगे।

प्रलेखन , विस्तार ।