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扩展事件侦听器火灾倍

回答

相关问题