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。但事实并非如此。 blockURL数组在该警报中正确打印。

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代码来理解这个想法。

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

请注意，这是我为我使用而编写的代码，所以它不是我做过的更干净，更无bug的代码:-)但它运行正常。

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

对于我可怜的英语，我很抱歉...这实际上不是我的主要语言; - ）

Answer 2

I had to use the following command:

var bg = chrome.extension.getBackgroundPage();

then I could access the blockedURLS array by:

alert(bg.blockedURLS);

and also edit the array by

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

which would set it to an empty array.

Thanks guys for the help, it helped me in thinking of different possibilities on approaching this problem.

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

2 个答案: