Question

我想制作一个this的Chrome扩展程序（自动登录网站，可能不是最好的方法，因为这是我第一次做JS）并且有一个用户可以设置他的选项页面info并保存（localstorage？），以便内容脚本可以访问它以及选项页面。

以下是经过大量研究，查看示例等后我所得到的： http://pastebin.com/yTiXp4VY（所有文件的源代码）。

最后我放弃了，只是使用了反复试验，所以那里有很多错误。控制台报告说出于安全原因无法运行。请解释一下这个版本有什么问题。我不需要你修改我的代码，我只是在学习JS。

Answer 1

在大多数情况下，您的代码似乎是正确的。只有一个注释：您的选项页面可以直接访问localStorage，它不需要背景页面。但主要问题似乎是内容脚本的构建方式 - 它假定用户/密码数据将立即可用（同步）。这不是它的工作原理：您正在向后台页面发送消息，最终后台页面将回答，并且将调用内容脚本中的回调。最简单的方法是延迟所有操作，直到发生这种情况并获得数据。并且应该更容易将单个消息发送到后台页面，该页面将为您提供所有数据。像这样：

var userName = null;
var passWord = null;

chrome.extension.sendRequest( { eventName: "getLogin" },
    function(response) {
        userName = response.user;
        passWord = response.pass;

        // Now we can continue doing whatever we are doing
        checkIfAutoUrl();
    }
);

后台页面中的消息处理如下所示：

function onRequest(request, sender, sendResponse) {
    if (request.eventName == "getLogin") {
        sendResponse({user: getStorage("user"), pass: getStorage("pass")});
    }
}

请注意，响应是一个在此处具有两个属性user和pass的对象 - 这样内容脚本一旦获得响应就可以立即继续，它具有所有必需的数据而不是需要等待第二次回复。

更新：关于您收到的错误消息：Content Security Policy旨在保护您的扩展程序免遭恶意网站的攻击。这种保护的一部分是禁止HTML中的内联脚本 - 如onload="load_options()"。所有将运行的脚本都需要放在JavaScript文件中。因此，您可以将以下内容放入onload：

，而不是此options.js属性

window.addEventListener("load", load_options, false);

请参阅addEventListener documentation on MDN。

Chrome扩展程序（回调/本地存储）

1 个答案: