5

介绍

我的 Chrome 扩展程序有问题。它应该显示一个小的覆盖弹出窗口（在 jQuery 中创建），其中包含基于您的文本选择的 Google 搜索结果。基本上，您应该能够突出显示任何页面上的文本，右键单击它（上下文菜单），单击“搜索'选定的关键字'”，然后在同一选项卡中弹出一个小窗口作为覆盖所有搜索结果来自谷歌。

问题

它按描述工作，但仅是第一次。当我将突出显示另一个关键字并搜索它时，扩展仍然会记住以前的关键字并同时抛出 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>");
});
4

1 回答 1

9

端口应该用于长期的“连接”。

chrome.extension.sendRequest(content script) 和chrome.extension.onRequest(background) 应在您的情况下使用（sendMessage/onMessage而不是*RequestChrome 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-25T10:54:38.713 回答