访问另一个 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，并将所有 js 包含在一个文件中，其中包含以下内容：

<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" 这样的简单和同步调用

Here the github link

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

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

请注意，这是我为自己使用而编写的代码，所以它不是我曾经编写过的更干净、没有错误的代码 :-) 但它工作正常。

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

呵呵，对不起，我的英语很差……这实际上不是我的主要语言；-)

Answer 2

我必须使用以下命令：

var bg = chrome.extension.getBackgroundPage();

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

alert(bg.blockedURLS);

并通过

编辑数组

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

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

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