Chrome擴展事件偵聽器火災倍

介紹多Chrome擴展事件偵聽器火災倍

我有一個問題，我的Chrome擴展程序。它應該顯示一個小的覆蓋彈出窗口（在jQuery中創建），並根據您的文本選擇使用來自Google的搜索結果。基本上，您應該能夠突出顯示任何頁面上的文本，右鍵單擊它（上下文菜單），單擊「搜索所選關鍵字」，然後在同一選項卡中彈出一個小窗口，其中包含所有搜索結果谷歌。

問題

它的工作原理描述的，但是，只有首次。當我突出顯示另一個關鍵字並搜索它時，擴展名仍然是REMEMBERS以前的關鍵字，並同時拋出2個窗口。如果我會搜索另一個關鍵字，會給我3個窗口與2以前的搜索和一個新的...

我試圖在後臺腳本中刪除偵聽器後執行，但沒有奏效。它看起來像舊的聽衆在那裏，他們正在回答內容腳本的請求。我可以以某種方式刪除它們嗎？

我試圖把：

chrome.extension.onConnect.removeListener(listener);

在getClickHandler（）函數的結束，但不起作用。

我也在想，也許這片在後臺腳本代碼這樣做，但不知道

return function(info, tab) {

請，你有什麼建議嗎？

非常感謝提前！

PS。這個彈出式窗口目前無法關閉，我意識到這一點。但你可以隨時刷新頁面以獲得一個乾淨的窗口。問題是第二次我會在同一時間打開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>"); 
});

來源

2012-06-25 lokigfx

端口應該用於長期「連接」。

chrome.extension.sendRequest（內容腳本）和chrome.extension.onRequest（背景）應該在你的情況下（sendMessage/onMessage instead of *Request in Chrome 20+）一起使用。

這些方法可以被使用如下：

在擴展初始化：在後臺綁定onRequest事件
內容腳本：火sendRequest(request_obj, response_func)
背景：收到的前一個對象。做一些事情，並調用response_func。

PS。你真的包括jQuery，只是追加一個字符串？如果是，我強烈建議放棄jQuery並使用vanilla JavaScript：

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);

來源

2012-06-25 10:54:38

Chrome擴展事件偵聽器火災倍

回答

相關問題