Chrome 扩展中的选择和站点搜索

我正在尝试编写接受用户选择的单词和用户定义的谷歌浏览器扩展 网站并在该网站上搜索这个词（通过 Google 和上下文菜单）。选项页面中有一个表单。 用户在表单字段中输入站点（字段/站点的数量可变 - 用户指定 哪些站点以及多少个）。所有站点都保存到数组中。数组保存到 localStorage["arr"]。所有这些都在 options.html 中。

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

我的代码： 清单.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>

请帮忙！我究竟做错了什么？？如何解决这个问题？ 任何帮助表示赞赏。

提前致谢！！

更新：感谢 serg，我终于得到了一些东西..但是有新问题： 1）在选项页面输入的上下文菜单项的数量神秘地增加了一倍（甚至五倍！！）。 2）单击“保存”按钮不会立即用新菜单项替换旧菜单项。（重新加载 显然需要扩展）。 我怀疑，我错误地编写了保存函数，该函数在单击保存按钮时运行... 这是代码：

var arr = [];
function save() {
localStorage.clear();

var nodes = document.querySelectorAll("input[type=text]");
for (var i=0; i<nodes.length; i++){
    if (nodes[i].value == "" ){
        alert('Enter Data!');return false;
} else {
 arr.push( nodes[i].value);


   }}

localStorage['arr'] =  JSON.stringify(arr);

}


</script>

UPDATE2:

我想出了加倍/五倍的事情。这取决于用户单击“保存”按钮的次数。 1）有机会阻止这种情况吗？例如多次单击仅将一组值添加到数组？ 2）上下文菜单项仍然没有改变。它们仅在重新加载扩展后才会更改..:(( 重新加载扩展和更改 localStorage 有什么区别？

当您将函数分配给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])
});

我们创建了匿名函数，该函数立即进行评估并返回一个真实的事件处理程序。诀窍是当前ar[i]值现在将始终可用element闭包内的变量。