Chrome extension 和 .click() 循环使用 localStorage 中的值

Question

我做了一个 Chrome 扩展来帮助在我们公司的内部网中使用一个小型搜索引擎。那个搜索引擎是一个非常古老的网页，非常复杂，而且它不带url中的参数。原作者不可能协助：

扩展弹出窗口提供了一个输入文本框来键入您的查询。您的然后查询保存在 localStorage
插入了一个内容脚本读取 localStorage 密钥并执行 document.getElementById("textbox").value = "your query"; 然后执行的 Intranet 页面 document.getElementById("textbox").click();

预期的结果是执行了您的搜索。就这样。

问题是点击在无限循环中无限次执行，我不明白为什么它会重复。

如果您能提供帮助，我将不胜感激。这是我的第一个 Chrome 扩展，到目前为止，我一直在学习如何制作它们，这是一次很棒的经历。

这是相关代码：

您输入查询的扩展程序弹出窗口

popup.html

<input type="search" id="cotext"><br>
<input type="button" value="Name Search" id="cobutton">

弹窗附js

popup.js

var csearch = document.getElementById("cotext");
var co = document.getElementById("cobutton");
co.addEventListener("click", function() {
    localStorage["company"] = csearch.value;
    window.open('url of intranet that has content script applied');
});

现在背景文件有助于各部分之间的通信：

background.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
sendResponse({data: localStorage[request.key]});
});

最后，清单中配置的内容脚本将被注入该搜索引擎的 url。

incomingsearch.js

chrome.extension.sendRequest(
{method: "getLocalStorage", key: "company"},
    function(response) {
    var str = response.data;
    if (document.getElementById("txtQSearch").value === "") {
        document.getElementById("txtQSearch").value = str;
    }
    document.getElementById("btnQSearch").click();
    });

因此，正如我之前提到的，代码有效……不仅一次（它应该如此），而且多次有效。我真的在某个地方有一个无限循环吗？我没有看到它...目前我已禁用 .click() 并改为使用 .focus() ，但这是一种解决方法。我真的很想在这里使用 .click() 。

提前致谢！

Answer 1

循环可能是点击按钮导致的，即使它有值。试着把它放在你的 if.也就是说，你把它复杂化了。

您可以通过将 localstorage 替换为 chrome.storage extension api 来直接访问内容脚本中的扩展数据。将 "storage"（静默）权限添加到您的 manifest.json，如下所示：

"permissions": ["storage"]

删除background.js中的消息传递代码。然后将弹出按钮侦听器内容替换为：

chrome.storage.local.set({ "company": csearch.value }, function() {
  chrome.tabs.create({ url: "whatever url" })
})

将内容脚本替换为：

chrome.storage.local.get("company", function(items) {
  if(document.querySelector("#txtQSearch").value == "") {
    document.querySelector("#txtQSearch").value = items.company
    document.querySelector("#btnQSearch").click()
  }
})

document.querySelector() 在这里执行与 getElementById 相同的功能，但它更健壮。它也有更少的大写字母，这在我看来更容易打字。

Chrome extension 和 .click() 循环使用 localStorage 中的值

Chrome extension and .click() loops using values from localStorage

javascript

google-chrome-extension

local-storage

onclicklistener