Javascript chrome扩展中的选择和站点搜索

我正在尝试编写google chrome扩展，它接受用户选择的单词和用户定义的单词 并在该网站上搜索这个词（通过Google和contextmenu）。选项页面中有一个表单。 用户在表单字段中输入站点（字段/站点的数量可变-用户指定 哪些站点以及相应的数量）。所有站点都保存到阵列中。阵列已保存到本地存储[“arr”]。所有这些都在options.html中

在bg.html（背景页）上 首先，我从localStorage获取数组（现在一切都好了），然后在循环中创建contextmenu项。对于所有contextmenu项，我只有一个onclick事件处理程序。 在事件处理程序内部，我试图获取正确的数组元素（在哪个站点上搜索） 然后选择ontext（搜索内容），然后打开一个包含谷歌搜索结果的新选项卡。
我最大的问题是： 1） 我根本无法获取数组元素（在事件处理程序中）！！（要搜索的站点未定义）。 2） onclick事件仅适用于其中一个上下文菜单项。 3） 有时会创建上下文菜单项，但单击根本不起作用

我的代码： manifest.json

{
  "name": "Context Site Search",
  "version" : "0.0.0.1",
  "background_page" : "bg.html",
  "options_page": "options.html",
  "permissions" : [
    "tabs",
    "contextMenus",
    "http://www.google.com"
    ]
}

bg.html：

<script type="text/javascript">

var ar = localStorage.getItem("arr").split(",");//getting array from localStorage 

for (var i=0;i<ar.length;i++){ // creating contextmenu items in a loop

chrome.contextMenus.create({
    "title": "find ' %s' в "+ ar[i],
    "contexts": [ "selection"],
    "onclick" : clickhandler
});
}

var clickhandler = function(e,ar){
var baseUrl = "http://www.google.com/search?q=site%3A";

if (e.selectionText){
baseUrl += ar[i]+ "&q="+ encodeURI(e.selectionText);
chrome.tabs.create(
{"url": baseUrl}

);

 }

}

</script>

var ar=localStorage.getItem（“arr”）.split（“，”）//从本地存储获取阵列
对于（var i=0；i
经过测试，这应该可以达到目的。注意，我还添加了一些改进，比如对循环使用
for（…in…）
，对URL参数使用
encodeURIComponent
（
encodeURI
表示完整URL，
encodeURIComponent
表示URI组件，即参数）。此外，使用JSON在
localStorage
中存储数据

我认为您做得不对的是，您在创建菜单项后定义了
clickHandler
。创建菜单项时，
clickHandler
为空，单击时不会发生任何事情。我通过在菜单项创建中内联定义函数解决了这一问题

经过测试，这应该可以达到目的。注意，我还添加了一些改进，比如对循环使用
for（…in…）
，对URL参数使用
encodeURIComponent
（
encodeURI
表示完整URL，
encodeURIComponent
表示URI组件，即参数）。此外，使用JSON在
localStorage
中存储数据

我认为您做得不对的是，您在创建菜单项后定义了
clickHandler
。当您创建菜单项时，
clickHandler
为空，当您单击它时不会发生任何事情。我通过简单地在菜单项创建中内联定义函数来修复此问题。
当您将函数分配给
onclick
property没有立即对其进行求值。在对其求值时，您的循环早已结束，
ar[i]
不包含您期望的内容

这是一个经典的javascript问题，可以通过闭包解决：

chrome.contextMenus.create({
    "title": "find ' %s' в "+ ar[i],
    "contexts": [ "selection"],
    "onclick" : (function(element) {
                    return function(info, tab) {
                        var baseUrl = "http://www.google.com/search?q=site%3A";

                        if (info.selectionText) {
                            baseUrl += element + "&q="+ encodeURI(info.selectionText);
                            chrome.tabs.create({"url": baseUrl});
                        }
                    }
                })(ar[i])
});

我们创建了一个匿名函数，该函数立即求值并返回一个真实的事件处理程序

值现在将始终作为闭包中的

元素

变量可用。

当您将函数分配给

onclick

属性时，不会立即对其求值。求值时，您的循环早已结束，

ar[i]

不包含您期望的内容

这是一个经典的javascript问题，可以通过闭包解决：

chrome.contextMenus.create({
    "title": "find ' %s' в "+ ar[i],
    "contexts": [ "selection"],
    "onclick" : (function(element) {
                    return function(info, tab) {
                        var baseUrl = "http://www.google.com/search?q=site%3A";

                        if (info.selectionText) {
                            baseUrl += element + "&q="+ encodeURI(info.selectionText);
                            chrome.tabs.create({"url": baseUrl});
                        }
                    }
                })(ar[i])
});

---

我们创建了一个匿名函数，该函数立即求值并返回一个真实的事件处理程序值现在将始终作为闭包中的

元素

变量可用。

它工作正常，但非常糟糕。单击任何菜单项只能在一个网站上搜索。@DrStrangeLove，你是对的，显然我没有彻底测试它。在工作版本中编辑。它工作正常，但非常糟糕。单击任何菜单项只能在一个网站。@DrStrangeLove，你是对的，显然我没有彻底测试它。在工作版本中编辑。如果你需要更改上下文菜单项，只需使用chrome.contextMenus删除所有内容。移除所有内容并重新创建它们。更新中的代码看起来正常，问题出在其他地方。使用localStorage.clear（）可以吗在save（）开始时？？我认为没有必要，您仍将覆盖旧值。如果您需要更改上下文菜单项，只需使用

chrome.contextMenus删除所有内容。移除所有
并重新创建它们。更新中的代码看起来正常，问题出在其他地方。在save（）开始时使用localStorage.clear（）是否可以？我认为没有必要，您将覆盖旧值。
chrome.contextMenus.create({
    "title": "find ' %s' в "+ ar[i],
    "contexts": [ "selection"],
    "onclick" : (function(element) {
                    return function(info, tab) {
                        var baseUrl = "http://www.google.com/search?q=site%3A";

                        if (info.selectionText) {
                            baseUrl += element + "&q="+ encodeURI(info.selectionText);
                            chrome.tabs.create({"url": baseUrl});
                        }
                    }
                })(ar[i])
});