嗨,我正在制作一个谷歌浏览器的扩展程序,用于练习,它是一个简单的网站屏蔽器。我有两个不同的JS文件需要共享包含要屏蔽的URL的同一数组。
- background.js 处理网络请求和阻止网站
- 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数组是正确的。