2012-06-25 17 views
5

परिचय के कईChrome एक्सटेंशन घटना श्रोता आग बार

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

समस्या

यह काम करता है वर्णित है, हालांकि केवल पहली बार के लिए। जब मैं एक और कीवर्ड को हाइलाइट करूंगा और इसके लिए खोज करूंगा, एक्सटेंशन अभी भी पिछले कीवर्ड याद करता है और एक ही समय में 2 विंडो फेंकता है। और अगर मैं एक और खोजशब्द खोजूंगा जो मुझे 2 पिछली खोजों के साथ 3 विंडो देगा और एक नया ...

मैंने निष्पादन के बाद पृष्ठभूमि स्क्रिप्ट में श्रोता को हटाने का प्रयास किया है, लेकिन काम नहीं किया है। ऐसा लगता है कि पुराने श्रोताओं वहां हैं और वे सामग्री स्क्रिप्ट से अनुरोध के लिए उत्तर दे रहे हैं। क्या मैं उन्हें किसी भी तरह से हटा सकता हूं?

मैं डाल करने की कोशिश की है:

chrome.extension.onConnect.removeListener(listener); 

getClickHandler() फ़ंक्शन के अंत में, लेकिन काम नहीं करता।

मैं भी सोच रहा था कि शायद पृष्ठभूमि स्क्रिप्ट में कोड के इस टुकड़े कि क्या कर रही है, लेकिन नहीं जानते कि

return function(info, tab) { 

कृपया, आप किसी भी सुझाव है?

अग्रिम में बहुत धन्यवाद!

पीएस। इस पॉप-अप विंडो को इस समय बंद नहीं किया जा सकता है और इसके बारे में पता है। लेकिन आप एक साफ खिड़की पाने के लिए हमेशा पेज रीफ्रेश कर सकते हैं। समस्या यह है कि दूसरी बार मुझे एक ही समय में 2 पॉप अप खोले जाएंगे ... और जैसा ऊपर वर्णित है।

मालसूची फ़ाइल:

{ 
    "name": "Easy search Accelerator", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Easily search for anything...", 
    "icons": { 
    "16": "icon.png", 
    "48": "icon.png", 
    "128": "icon.png" 
    }, 
    "background": { 
    "scripts": ["sample.js"] 
    }, 
    "permissions": [ 
    "contextMenus", 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
    ], 
    "manifest_version": 2 
} 

पृष्ठभूमि पेज/लिपि (sample.js):

chrome.contextMenus.create({ 
    "title": 'Search for "%s"', 
    "contexts":['selection'], 
    "onclick": getClickHandler() 
}); 
function getClickHandler() { 
    return function(info, tab) { 

    var url = "https://www.google.co.uk/search?q=" + info.selectionText; 

    chrome.extension.onConnect.addListener(function listener(port) { 
    console.assert(port.name == "searchQuery"); 
    port.onMessage.addListener(function(msg) { 
     if (msg.keywordRequest == "Yes") 
     port.postMessage({keyword: url}); 
    }); 
}); 

    chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() { 
    chrome.tabs.executeScript(null, { file: "frame.js" }); 

    }); 
    }; 
}; 

सामग्री स्क्रिप्ट (frame.js)

var port = chrome.extension.connect({name: "searchQuery"}); 
port.postMessage({keywordRequest: "Yes"}); 
port.onMessage.addListener(function listen(msg) { 

    var test = msg.keyword; 
    $("body").append("<div style=\"position: fixed;top: 20px;right: 20px;z-index: 9999;\"><iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe></div>"); 
}); 

उत्तर

9

बंदरगाहों के लिए इस्तेमाल किया जाना चाहिए लंबे समय तक "कनेक्शन"।

chrome.extension.sendRequest (सामग्री स्क्रिप्ट) और chrome.extension.onRequest (पृष्ठभूमि) अपने मामले (sendMessage/onMessage instead of *Request in Chrome 20+) में इस्तेमाल किया जाना चाहिए।

ये तरीके इस प्रकार के रूप में इस्तेमाल किया जा सकता है:

  • विस्तार initialisation पर: आग sendRequest(request_obj, response_func)
  • पृष्ठभूमि::
  • सामग्री स्क्रिप्ट पृष्ठभूमि में एक onRequest घटना में आबद्ध पिछले वस्तु प्राप्त की। कुछ करो, और response_func का आह्वान करें।

पी एस। क्या आप वास्तव में एक स्ट्रिंग को जोड़ने के लिए jQuery, बस सहित हैं? यदि हां, तो मैं दृढ़ता से jQuery ड्रॉप करने और वेनिला जावास्क्रिप्ट का उपयोग करने की अनुशंसा करता हूं:

var div = document.createElement('div'); 
div.style.cssText = "position: fixed;top: 20px;right: 20px;z-index: 9999;"; 
div.innerHTML = "<iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe>"; 
document.body.appendChild(div); 
संबंधित मुद्दे