Google Chrome Extension - Tabbed Bin

प्रस्तावना

शुभ दिन, HabraHabr के प्रिय आगंतुक!
हमारे जीवन में ज्ञान के इस अगले दिन (जो, हालांकि, मैंने विशेष रूप से काम पर, स्कूल नहीं) पर खर्च किया, इस लेख के प्रभाव के तहत, मैं Google Chrome के लिए एक एक्सटेंशन बनाने में अपने अनुभव के बारे में एक कहानी लिख रहा हूं - TabBasket (मैं नहीं जानता कि आप कैसे हैं) लेकिन मैं नामों पर बकवास कर रहा हूं)। लेख एक मिश्रित शैली में डिज़ाइन किया गया है - पाठ के तत्व ओवरलैप, साथ ही कोड की व्याख्या और प्रमुख बिंदुओं का विवरण।
सीधे मुख्य बिंदु पर आगे बढ़ने से पहले, मैं ध्यान देता हूं कि मेरा सीएसएस ज्ञान थोड़ा गड़बड़ है, बहुत कम अनुभव था, इसलिए मेरे कुछ निर्णय थोड़ा अजीब लग सकते हैं।

हमारे पास क्या है?

विस्तार को लिखने के लिए, हमें व्यावहारिक रूप से किसी भी उपकरण की आवश्यकता नहीं है, सभी काम नोटपैड या गेदिट में भी किए जा सकते हैं। हम आपके स्वाद के लिए संपादक चुनते हैं (व्यक्तिगत रूप से, ऐसे मामलों में मैं या तो नोटपैड ++ या नेटबीन्स का उपयोग करता हूं; पहला आसान है, दूसरा अधिक कार्यात्मक है, विकल्प हमेशा आपका है)।

बिंदु पर पहुँचो

पहली बातें पहला स्रोत ।

यह माना जाता है कि पाठक पहले से ही एक्सटेंशन बनाने की मूल बातें से परिचित है (फिर, ऊपर वर्णित लेख से), तो आइए जल्दी से प्रकट के साथ शुरू करें:

{
"name" : "TabBasket " ,
"version" : "1.5" ,
"permissions" : [
"tabs" , "http://*/*"
],
"background_page" : "back.html" ,
"browser_action" : {
"default_title" : "Closed tabs" ,
"default_icon" : "icon.png" ,
"popup" : "popup.html"
}
}

* This source code was highlighted with Source Code Highlighter .

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

हम आगे बढ़ते हैं। हम back.html फ़ाइल पार्स करते हैं:

/* Tab constructor function. */
function AnyTab()
{
this .id = 0
this .url = ""
this .name = ""
this .favicon = ""
}

* This source code was highlighted with Source Code Highlighter .

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

var active = []
var closedTabs = []
var maxTabCount = 15

* This source code was highlighted with Source Code Highlighter .

हमें दो सरणियों की आवश्यकता होगी - सक्रिय (खुले) टैब और बंद। मेरे द्वारा चयनित टैब की अधिकतम संख्या (मेरी राय में) इष्टतम है। हम ईवेंट हैंडलर लटकाते हैं

chrome.tabs.onUpdated.addListener(onTabUpdated)
chrome.tabs.onRemoved.addListener(onTabRemoved)
chrome.tabs.onCreated.addListener(onTabCreated)

* This source code was highlighted with Source Code Highlighter .

इस मामले में, onTabUpdated, onTabRemoved, और onTabCreated फ़ंक्शन हैंडलर के नाम हैं। अब, चलो गोपनीयता के घूंघट को थोड़ा खोलते हैं - जब टैब बनाया जाता है, तो आपको उन विशेषताओं को याद रखना होगा जो हमें चाहिए (लिंक, नाम, आदि)। ऐसा केवल इसलिए किया जाता है क्योंकि बंद टैब की केवल आईडी ही ऑनटैब्रिड फंक्शन में आती है, और पहले से ही इसका कोई उल्लेख नहीं है। इसलिए, टैब बंद करते समय, इसे सक्रिय सरणी में अपनी आईडी द्वारा खोजा जाता है (वैसे, यह वहां नहीं हो सकता है - यदि प्रोग्राम में टैब पहले से ही खुला था तो एक्सटेंशन स्थापित किया गया था), डेटा को बंदटैब्स सरणी में कॉपी किया गया है और तदनुसार, सक्रिय सरणी से हटा दिया गया है । अब हमारे पास बंद टैब के बारे में पूरी जानकारी है और इसे आसानी से बहाल कर सकते हैं! एक चौकस पाठक, हालांकि, इस तथ्य पर ध्यान आकर्षित करेगा कि मैंने onTabUpdated फ़ंक्शन का उल्लेख नहीं किया। निम्नलिखित विशेषता के कारण इसकी एक विशेष भूमिका है (समस्या पढ़ें) - टैब के बारे में सभी जानकारी तुरंत ऑनटैबक्रिएटेड फ़ंक्शन पर नहीं आती है। नग्न आंखों के साथ आप देख सकते हैं कि नए बने टैब पर शीर्षक कैसे बदलता है, आइकन लोड हो गया है। यह डेटा बाद में onTabUpdated फ़ंक्शन में प्रवाहित होता है।

वर्कअर्स की भूमिका अपडेटटैब फ़ंक्शन द्वारा निभाई जाती है। यदि आप पहले पैरामीटर के रूप में -1 पास करते हैं, तो बस एक नया टैब बनाया जाएगा। एक अन्य मामले में, टैब की आईडी जिसकी जानकारी अपडेट की गई है, वहां से पारित कर दी गई है।

function updateTab(index, tab) {
/* Add new tab. index = -1 passed in onTabCreated */
if (index === -1) {
var newTab = new AnyTab()
newTab.id = tab.id
newTab.url = tab.url
newTab.name = tab.title
newTab.favicon = tab.favIconUrl
active.push(newTab)
}
/* Or update tab. Find index first. */
else {
var j, tbCt = active.length

for ( j = 0; j < tbCt; j++ ) {
if ( index == active[j].id )
break
}

if ( j == tbCt ) {
console.log( "updateTab not found ID " +index)
return
}

active[j].id = tab.id
active[j].url = tab.url
active[j].name = tab.title
active[j].favicon = tab.favIconUrl || "icon.png"
}
}

* This source code was highlighted with Source Code Highlighter .

सबसे कठिन हिस्सा पीछे है, अब थोड़ा देखो और popup.html के बारे में?
इस एक्सटेंशन का इंटरफ़ेस साइटों की सूची के साथ एक पॉप-अप विंडो है, अधिक सहज उपयोग के लिए बाईं ओर एक आइकन है। इसके अलावा शीर्ष पर टूलआयर वर्ग का एक div है - यह उपकरण क्षेत्र है, जबकि वहां केवल एक बटन सम्मानजनक रूप से flaunted है - सूची की सफाई।

इस पृष्ठ का जावास्क्रिप्ट भरना काफी विशिष्ट और पारदर्शी है, यहाँ प्रमुख बिंदु back.html तक पहुँच है, अर्थात, chrome.extension.getBackgroundPage () पद्धति को कॉल करके वहाँ घोषित सभी फ़ंक्शन और चर।

स्क्रिप्ट स्वैच्छिक है, लेकिन अगर आप इसे तार्किक भागों में तोड़ते हैं, तो यह बहुत सरलता से निकलता है:

• सूची निर्माण
• माउसओवर और माउसआउट हैंडलर को परिभाषित करना
• सूची आइटम, साथ ही कर्सर पर क्लिक करने के कार्यों का कार्यान्वयन

यह पहले से ही शुद्ध, सरल जावास्क्रिप्ट है, हमारे द्वारा पहले से ही उपयोग की गई तकनीकों का थोड़ा मिश्रण है।
निर्माण:

var back = chrome.extension.getBackgroundPage()
for ( var k = back.closedTabs.length - 1; k >= 0; k--) {
document .write ( "<div id='" + back.closedTabs[k].id + "' onclick='divClick(this)' class='divClass'>" )
document .write ( "<img src=" + back.closedTabs[k].favicon + " class='imgClass'>" )
var txtName = back.closedTabs[k].name
if (txtName.length > 40)
txtName = txtName.substr(0, 35) + "..."
document .write ( "<span class='labelClass'>" + txtName + "</span>" )
document .write ( "</div>" )
}

* This source code was highlighted with Source Code Highlighter .

संचालकों:

var divs = document .getElementsByTagName( "div" );
for ( var i = 0; i < divs.length; i++)
{
if (divs[i].id === "toolDiv" ) {
divs[i].onclick = cleanToolClick
} else {
divs[i].onmouseover = mouseOverEvent
divs[i].onmouseout = mouseOutEvent
}
}

* This source code was highlighted with Source Code Highlighter .

विकास के एक निश्चित बिंदु पर, मैंने अपने आप को यह सोचते हुए पकड़ा कि क्रोम में एक नया टैब बनाते समय chrome.tabs.create फ़ंक्शन का उपयोग करें (जो, वैसे, उन तर्कों की एक वस्तु लेता है जो लेख से याद रखने की तुलना में प्रलेखन में झांकना आसान है), टैब स्वचालित रूप से onTabCreated में हो जाता है , इसलिए आपको सक्रिय रूप से सक्रिय रूप से बनाए गए टैब को जोड़ने के बारे में चिंता करने की ज़रूरत नहीं है!

टूडू

सुधार के लिए सुझाव लिखें! अभी के लिए, अधिक से अधिक टैब की पसंद के साथ विकल्प पेज बनाना केवल स्पष्ट प्रतीत होता है, लेकिन इस तरह की एक सनक के कारण, मैं एक पेज बनाना नहीं चाहता (पढ़ें आलसी)!

उपसंहार

किए गए कार्य के परिणामस्वरूप, हमें घरेलू और रोजमर्रा की जिंदगी में एक काफी उपयोगी विस्तार मिलता है जो ब्राउज़र टोकरी की तरह बहुत आवश्यक कार्यक्षमता को लागू करता है। आलेख में टैब के साथ काम करने के लिए बुनियादी तकनीकों का वर्णन है, जो Google Chrome एक्सटेंशन के संरचनात्मक तत्वों की करीबी बातचीत के सिद्धांत हैं। एक्सटेंशन बनाना एक बहुत ही रोचक और रोमांचक गतिविधि है! एक बुनियादी आवश्यकता HTML, सीएसएस और जावास्क्रिप्ट का बुनियादी ज्ञान है, लेकिन अनिवार्य नहीं है - कुछ भी नहीं एक जीवंत हित के सामने खड़ा होगा!
और मैं कोड पर टिप्पणियों को स्वीकार करता हूं, क्योंकि मैं खुद को जेएस का नवागंतुक मानता हूं!
अपने प्रयासों में शुभकामनाएँ, इसके लिए जाओ, प्रयोग करो, सृजन करो!