Google Chrome एक्सटेंशन: हॉट की बनाना

नमस्कार, प्रिय हभ्रवचन।
Google Chrome ब्राउज़र के लिए एक्सटेंशन के विकास पर व्यक्तिगत अनुभव और युक्तियों की एक श्रृंखला जारी रखना।
इस रिलीज़ में, "वैश्विक" ब्राउज़र-स्तरीय हॉटकीज़।

इसलिए, कार्य विस्तार में वैश्विक कीबोर्ड शॉर्टकट के लिए समर्थन को लागू करना है, प्रत्येक उपयोगकर्ता को स्वयं के लिए अनुकूलित करने की क्षमता के साथ कुछ एक्सटेंशन फ़ंक्शन करने के लिए।
के साथ शुरू करने के लिए, ब्राउज़र के पास वैश्विक गर्म कुंजियों के लिए मूल समर्थन नहीं है।

लेकिन सभी ब्राउज़र विंडो में कीस्ट्रोक्स के ईवेंट हैंडलिंग को जोड़कर समस्या को हल किया जा सकता है। यह विकल्प पूरी तरह कार्यात्मक नहीं है, क्योंकि यह दस्तावेज़ के शरीर में फोकस की उपस्थिति पर निर्भर करता है, लेकिन ज्यादातर मामलों में यह काम करता है।
यह महत्वपूर्ण है। यह ध्यान में रखा जाना चाहिए कि इस तरह से निर्मित हैंडलर अधिकांश मानक ब्राउज़र हॉटकी को ओवरलैप करते हैं। उदाहरण के लिए, यदि डॉक्यूमेंट में StopDefault के साथ एक क्लिक + Ctrl + अंक प्रसंस्करण है, तो टैब के बीच स्विच करने के लिए एक समान ब्राउज़र हॉटकी काम नहीं करेगा यदि ऐसे हैंडलर के साथ दस्तावेज़ में फ़ोकस है। उपयोगकर्ता को इस बारे में चेतावनी दी जानी चाहिए, यदि उसे संयोजनों को अनुकूलित करने का अवसर दिया जाता है।

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

ऐसा दिखता है।

mainfest.json

{ ... "content_scripts": [ { "all_frames": true, //,       ,     iframe "js": ["js/hotkeys.js" ], //,     "matches": [ "http://*/*", "https://*/*" ], //    "run_at": "document_end" } ], ... 

यहां सब कुछ स्पष्ट है। सभी खुले पृष्ठों के लिए एक हैंडलर के अलावा पंजीकृत है।

हॉटकीज की सामान्य संरचना

 if(!EXT_HOTKEY_JS_INSERTED){ var EXT_HOTKEY_JS_INSERTED = true; var hotkeys = ''; var messages = ''; var timeout = ''; chrome.extension.sendRequest({operation: "hotkeys"}, function(response) { //       if (response) if (response.hotkeys){ hotkeys = JSON.parse(response.hotkeys); var d = document.createElement('DIV'); //       d.id = "hotkeyresponder"; //+: , ,  z-index document.body.appendChild(d); } }); document.addEventListener('keydown', event_handleKeyDownEvent, true); //,        function event_handleKeyDownEvent(e){ if (!hotkeys) return true; var c=0; var a=0; var s=0; var k = e.keyCode; if (e.shiftKey) s = 1; if (e.altKey) a = 1; if (e.ctrlKey) c = 1; if (k==27 && !c && !a && !s){ if (document.getElementById('hotkeyresponder').style.display!='none'){ //    Esc document.getElementById('hotkeyresponder').style.display="none"; e.preventDefault(); e.cancelBubble = true; e.bubbles = false; return false; } } for (var name in hotkeys){ if (hotkeys.hasOwnProperty(name)){ if (hotkeys[name].c == c && hotkeys[name].a == a && hotkeys[name].s == s){ // ,   ,  if (name == 'selectProfile' && k > 48 && k < 58 && (c || a || s)){ //   <+> chrome.extension.sendRequest({operation: "hotkey", key:name, id:(k-48)}, function(response) { responseHotkey(name,response.status,response.message); }); e.preventDefault(); e.cancelBubble = true; e.bubbles = false; return false; } else if (hotkeys[name].k==k){ //       .     ,     if (name=='toggleBodyi'){ document.getElementById('togglebody').onclick(); } //  ,       (toggle - ,  DOM, etc.) else{ // ,      chrome.extension.sendRequest({operation: "hotkey", key:name}, function(response) { responseHotkey('pp',response.status,response.message); }); } e.preventDefault(); e.cancelBubble = true; e.bubbles = false; return false; } else{ continue; } } } } } function responseHotkey(type,status,message){ //     if (status == 'OK' && message){ document.getElementById('hotkeyresponder').innerHTML = message; document.getElementById('hotkeyresponder').style.display = 'block'; if (timeout) clearTimeout(timeout); timeout = setTimeout(function(){document.getElementById('hotkeyresponder').style.display='none';},2000); } } } 

उपरोक्त स्क्रिप्ट दो एक्सटेंशन से थोड़ी अलग हॉटकी स्क्रिप्ट का संश्लेषण है। यह स्पष्ट है कि जब पुन: उपयोग किया जाता है, तो आपको अपनी आवश्यकताओं को पूरा करने के लिए इसे संशोधित करना होगा। उदाहरण के लिए, यदि सभी कुंजियों को स्पष्ट रूप से (सार्वभौमिक संशोधक के बिना) सेट किया गया है, तो आपको केवल एक को ब्लॉक करने की आवश्यकता है, जहां गर्म कुंजी के सभी 4 मापदंडों की तुलना करना है। यदि आपका एक्सटेंशन DOM में कोई क्रिया नहीं करता है, तो यह स्पष्ट है कि सशर्त ब्लॉक, हॉटकी के नाम के आधार पर, एक्सटेंशन के लिए एक सरल अनुरोध को समाप्त करने की आवश्यकता है।

खंडित पृष्ठभूमि। js

 chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { loadSettings(); //  if (request.operation == 'hotkeys'){ //     sendResponse({hotkeys:localStorage.hotkeys}); } else if (request.operation == 'hotkey'){ //   if (request.key == 'selectProfile'){ //  } //    } else{ //sendResponse({}); } }); 

वे कहते हैं कि sendRequest और onRequest समान सिंटैक्स और कार्यक्षमता के साथ sendMessage पक्ष में पदावनत onRequest । इस पोस्ट को लिखते समय, मैंने इसे अंत तक नहीं देखा था, लेकिन मेरे एक्सटेंशन अभी भी दृश्य समस्याओं के बिना काम करते हैं।

इस रूप में (यदि आप मैन्युअल रूप से सेटिंग को एक्सटेंशन में चलाते हैं), तो चाबियाँ पहले से ही चालू हैं।



सेटिंग्स हैं। यहां, सामान्य तौर पर, कई विकल्प हैं, सब कुछ आपके विवेक पर है। यदि कई कुंजियाँ हैं, तो यह इस चीज़ को जितना संभव हो उतना स्वचालित करने के लिए समझ में आता है।
मामले में किसी को अपनी कृतियों में दोहराने जा रहा है - मैं कोड टुकड़े दे देंगे।
मैनिफ़ेस्ट में एक पैरामीटर जोड़कर सेटिंग पेज ही किया जाता है:

 { ... "options_page": "options.html", ... } 

HTML में कुछ खास नहीं है, बस एक प्लेसहोल्डर है। सब कुछ जावास्क्रिप्ट पर बनता है।
options.html

 <html> <head> <title>Hotkeys</title> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript" src="js/options.js"></script> </head> <body> <!--  header'  . --> <div id="tab1"> <p style="margin-top:0;"> -   </p> </div> </body> </html> 

options.js
आपके लिए आवश्यक डेटा: मुख्य नाम, वर्तमान हॉटकी सेटिंग्स, और समर्थित शॉर्टकट के लिए आंतरिक नामों की एक सरणी।

 ... var keycodes = ['','','','','','','','','','Tab','','','','Enter','','','','','','','','','','','','','','Escape','','','','','Space','Page Up','Page Down','End','Home','Left','Up','Right','Down','','','','','Insert','Delete','','0','1','2','3','4','5','6','7','8','9','','','','','','','','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','MainM Left','MainM Right','Menu','','','NumPad 0','NumPad 1','NumPad 2','NumPad 3','NumPad 4','NumPad 5','NumPad 6','NumPad 7','NumPad 8','NumPad 9','NumPad *','NumPad +','','NumPad -','NumPad ,','NumPad /','F1','F2','F3','F4','F5','F6','F7','F8','F9','F10','F11','F12','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','=','','-','','','~','','','','','','','','','','','','','','','','','','','','','','','','','','','','\\']; var hotkeys = JSON.parse(localStorage.hotkeys); var phk = ['prevProfile', 'nextProfile', 'selectProfile', 'openOpts', 'toggleHideWidget', 'toggleWidget', 'toggleInCT', 'toggleBody', 'openWidget', 'toggleBodyi', 'actMC', 'actMG']; 

पृष्ठ आरंभीकरण समारोह: HTML भरना, प्रोसेसर लटकाना, वर्तमान सेटिंग्स प्रदर्शित करना।

 initt = function(){ ... for (var i = 0; i < phk.length;i++){ var d = document.createElement('DIV'); d.innerHTML = '<h4 style="margin:0;">'+_getMessage(phk[i]+'_title')+'</h4><input type="checkbox" id="'+phk[i]+'_c"><label for="'+phk[i]+'_c">Ctrl <b>+</b></label><input type="checkbox" id="'+phk[i]+'_a"><label for="'+phk[i]+'_a">Alt <b>+</b></label><input type="checkbox" id="'+phk[i]+'_s"><label for="'+phk[i]+'_s">Shift <b>+</b></label>'+((phk[i]=='selectProfile')?('<key 1-9><input type="hidden" id="'+phk[i]+'_k" value="$"> '):('<input type="text" id="'+phk[i]+'_k">'))+'<img src="img/delete.gif" id="'+phk[i]+'_imgerr" class="err_disp" style="height:16px;display:none;" /><img src="img/ok.png" id="'+phk[i]+'_imgok" class="err_disp" style="height:16px;display:none;" /><br/><span id="result_'+phk[i]+'" class="err_disp" style="color:red"></span>'; document.getElementById('tab1').appendChild(d); } document.getElementById('tab1').innerHTML+='<button>'+_getMessage('opts_13')+'</button>'; for (var i = 0; i < phk.length;i++){ if (hotkeys[phk[i]]){ document.getElementById(phk[i]+'_c').checked = (hotkeys[phk[i]]['c']?true:false); document.getElementById(phk[i]+'_a').checked = (hotkeys[phk[i]]['a']?true:false); document.getElementById(phk[i]+'_s').checked = (hotkeys[phk[i]]['s']?true:false); if (phk[i]!='selectProfile') document.getElementById(phk[i]+'_k').value = keycodes[hotkeys[phk[i]]['k']]; } } ... var m = document.querySelectorAll('input[type=text]') for (var i = 0; i < m.length; i++){ m[i].addEventListener('keydown',function(event){this.value=(keycodes[event.keyCode]?keycodes[event.keyCode]:'');prevDef(event);return false},false); } ... } 

फ़ंक्शन सहेजें। यह वैधता और टकराव की जाँच भी करता है। इसके अलावा, सही संयोजन तुरंत सहेजे जाते हैं, और त्रुटिपूर्ण तदनुसार चिह्नित किए जाते हैं।

 save = function(){ //     var err_els = document.getElementsByClassName('err_disp'); for (var i = 0; i < err_els.length; i++){ if (i%3==2) err_els[i].innerHTML = ''; else err_els.style.display = 'none'; } var hktp = {}; var hkts = {}; //      for (var i = 0; i < phk.length; i++){ if ((document.getElementById(phk[i]+'_c').checked || document.getElementById(phk[i]+'_a').checked || document.getElementById(phk[i]+'_s').checked) && document.getElementById(phk[i]+'_k').value){ //  hktp[phk[i]] = { c:document.getElementById(phk[i]+'_c').checked, a:document.getElementById(phk[i]+'_a').checked, s:document.getElementById(phk[i]+'_s').checked, k:document.getElementById(phk[i]+'_k').value, }; } else{ //   -  if (document.getElementById(phk[i]+'_c').checked || document.getElementById(phk[i]+'_a').checked || document.getElementById(phk[i]+'_s').checked || (document.getElementById(phk[i]+'_k').value && document.getElementById(phk[i]+'_k').value!='$')){ document.getElementById('result_'+phk[i]).innerHTML = _getMessage('opts_12'); document.getElementById(phk[i]+'_imgerr').style.display = 'inline'; } } } //  for (var i = 0; i < phk.length-1; i++){ for (var j = i+1; j < phk.length; j++){ if (hktp[phk[i]] && hktp[phk[j]]) if (hktp[phk[i]].c == hktp[phk[j]].c && hktp[phk[i]].a == hktp[phk[j]].a && hktp[phk[i]].s == hktp[phk[j]].s && (hktp[phk[i]].k == hktp[phk[j]].k || ((hktp[phk[i]].k == '$' || hktp[phk[j]].k == '$') && ((hktp[phk[i]].k*1>0 && hktp[phk[i]].k*1<=9) || (hktp[phk[j]].k*1>0 && hktp[phk[j]].k*1<=9))))){ document.getElementById('result_'+phk[i]).innerHTML = _getMessage('opts_11'); document.getElementById(phk[i]+'_imgerr').style.display = 'inline'; document.getElementById('result_'+phk[j]).innerHTML = _getMessage('opts_11'); document.getElementById(phk[j]+'_imgerr').style.display = 'inline'; hktp[phk[i]] = false; hktp[phk[j]] = false; } } } // ""    for (var name in hktp){ if (hktp.hasOwnProperty(name) && hktp[name]){ document.getElementById(phk[i]+'_imgok').style.display = 'inline'; hkts[name] = { c:(document.getElementById(name+'_c').checked?1:0), a:(document.getElementById(name+'_a').checked?1:0), s:(document.getElementById(name+'_s').checked?1:0), k:keycodes.in_array(document.getElementById(name+'_k').value), } } } localStorage.hotkeys = JSON.stringify(hkts); // } 

यदि आप _getMessage जैसे कार्यों से भ्रमित हैं, तो ये i18n फ़ंक्शंस के लिए रैपर हैं (मेरी पिछली पोस्ट देखें )
यहाँ यह काम पर कैसा दिखता है।


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