Question

我正在构建一个Chrome扩展程序，用于从用户的Google云端硬盘中检索数据并将其插入任意页面。我已经让OAuth工作了，但我似乎无法访问令牌（我可以看到通过chrome://identity-internals设置）。

此处的问题是，当点击Chrome扩展程序导航栏按钮时，我会触发执行test.js的请求。 test.js显然没有chrome.identity的概念，但需要该信息才能发出XHR请求。我试过了

在localStorage中存储身份验证令牌，以便test.js可以检索它（没有运气）
将test.js嵌套在AuthToken请求中（不确定如何将变量实际传递到文件中并检索它）。

有什么想法吗？

提前谢谢！

chrome.browserAction.onClicked.addListener(function (tab) {

            chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
                // This works
                alert(token);
                // This doesn't work
                localStorage.setItem("authtoken", token);

            });
            chrome.tabs.executeScript(tab.id, {
                // This file needs access to the authtoken
                // but within test.js, chrome.identity is undefined.
                "file": "test.js"
            }, function () {

            });     

});

Answer 1

localStorage（实际上它是window.localStorage）按原点存储（方案+主机名+端口号），扩展程序在特权组件中有自己的一个可以访问受限制的chrome。* API（有些在content scripts docs中列为例外），即弹出窗口和后台/事件页面，选项以及其他具有chrome-extension://abc.....的URL的页面（abc ...是扩展ID）。

网页的

localStorage属于其自己的来源，例如https://www.google.com。

内容脚本在网页上下文中运行，因此他们无法直接访问扩展程序localStorage。他们只看到了localStorage他们网页的来源。

解决方案1：使用另一个executeScript来设置将从文件中注入的内容脚本使用的变量：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
        chrome.tabs.executeScript(tab.id, {
            code: 'var token=' + JSON.stringify(token) + ';'
        }, function() {
            chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
            });
        });
    });     
});

使用JSON序列化是为了不打扰转义特殊字符并能够传递对象。

解决方案2：使用messaging API 在注入内容脚本后传递数据：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
        chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
            chrome.tabs.sendMessage(tab.id, {token: token});
        });
    });     
});

内容脚本：

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.token) {
        document.getElementById('token').textContent = msg.token;
        //nowYouCanProcessToken(msg.token);
    }
});

解决方案3：使用chrome.storage API 可以从内容脚本和扩展程序的上述特权部分访问。

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
        chrome.storage.local.set({token: token}, function() {
            chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
            });
        });     
    });     
});

内容脚本：

chrome.storage.local.get('token', function(data) {
    if (data.token) {
        document.getElementById('token').textContent = data.token;
        //nowYouCanProcessToken(data.token);
    }
});

让chrome.getAuthToken在脚本

1 个答案: