在另一个JS文件中访问数组 - Chrome扩展

Question

嗨，我正在为一些简单的网站拦截器做一个chrome扩展。 我有两个不同的JS文件需要共享包含要阻止的URL的同一个数组。

• background.js处理webRequests和阻止网站
• options.html是用户可以编辑要阻止的URL的选项页面，它调用storeURL.js，以便它可以将html页面上列表中的所有元素存储到js数组中。 到目前为止没问题。

但是我无法从background.js访问storeURL.js中的数组。 似乎在两个不同的实例中调用它们。 如果我尝试在我的background.html中包含storeURL.js和background.js，则会导致运行两个完全独立的storeURL.js脚本。

我该怎么做呢？ 我应该将storeURL.js中的数组内容存储到文件中吗？

一些例子：

background.js

chrome.webRequest.onBeforeRequest.addListener(
    blocking,["blocking"]);
    { urls: blockedURLS, types: [] }, ["blocking"]);

storeURL.js根据options.html中的列表填充数组

var blockedURLS = [];
        $('li').each(function(i, elem) {
            blockedURLS.push($(elem).text());
        });

我的background.js中的blockedURLS显示为未定义。 我还尝试将我的options.html文件指向background.js，并将所有j包含在一个文件中，其中包含以下内容：

<script type="text/javascript" src="background.js"></script>

然而，当我这样做时，似乎第二个background.js被调用而不是仅仅指向已经运行的那个。

感觉就像我已经走到了尽头，可能有一个简单的解决方案可以解决我的问题。 我也是JS / chrome扩展的新手。

感谢您抽时间阅读！

编辑：经过一些更多的摆弄，我能够在我的background.js中访问我的blockedURL数组。 但它永远不会更新。

var blockedURLS = ["hi"] ;

    var list = document.getElementById('list');
    $("#saveList").click(function(e) {
        e.preventDefault();
        localStorage.setItem('todoList', list.innerHTML);
        alertify.success("You have saved your list.");

        //Pushes each element in the list from options.html into the urls array
        blockedURLS = [];
        $('li').each(function(i, elem) {
            blockedURLS.push($(elem).text());
        });
        alert("Currently blocked:\n" + blockedURLS);
    });
    $("#reset").click(function(e) {
        e.preventDefault();
        localStorage.clear();
        location.reload();
    });

    loadToDo();

    function loadToDo() {
      if (localStorage.getItem('todoList')){
        list.innerHTML = localStorage.getItem('todoList'); 
    }
    }

应该发生的是，在我进入我的options.html并保存列表后，“hi”应该替换为我列表中的所有不同的URL。 但事实并非如此。 然而，blockedURL数组在该警报中正确打印。

Answer 1

我最近必须处理这类事情。 我从来没有找到一个非常好的方法...所以我使用了Chrome Extension API的Storage api。 但是使用它并不是很有趣，因为所有方法都是异步的，所以你不能简单地这样做

myValue = chrome.storage.local.get("MyValue")

如果你想我创建了一个对象，它自动将数据存储在chrome存储中，但允许简单和同步调用，如myValue = storage.myValue或storage.myValue = "something"

这里是github链接

它是用CoffeeScript编写的，因此您可以在bin文件夹中找到javascript文件。 生成的javascript不是很容易阅读/修改，但你可以通过阅读我想的CoffeeScript代码来理解这个想法。

如果你愿意，我可以解释它的工作原理。 在评论中告诉我，我会更新我的回复。

并注意它是我为我使用而编写的代码，所以它不是我曾经做过的更干净和无bug的代码:-)但它工作正常。

编辑：我忘了说你需要在所有页面/内容脚本中包含这些文件，当然你需要使用它。

何对不起我的英语很差......这实际上不是我的主要语言;-)

Answer 2

我不得不使用以下命令：

var bg = chrome.extension.getBackgroundPage();

然后我可以通过以下方式访问blockedURLS数组：

alert(bg.blockedURLS);

并且还可以编辑数组

chrome.extension.getBackgroundPage().blockedURLS = [];

这将把它设置为一个空数组。

谢谢大家的帮助，它帮助我思考了解决这个问题的不同可能性。