注入的 HTML 访问 Chrome API 和全局变量

Question

我正在开发一个 Chrome 扩展程序，而且我是这个过程的新手。我正在开发的扩展程序将 HTML 侧边栏注入页面，将 java-script 函数注入到标题中，然后让用户按下侧边栏上的按钮来创建/保存我的扩展程序的数据。

但是，当我想保存信息时，我使用 localStorage，但是，localStorage 总是相对于当前网站保存。我如何使用 localStorage 来保存我们的扩展程序？

此外，我想在 chrome 扩展中使用一些全局 javascript 变量。这些属于哪里？我知道我目前无法从注入的 Javascript 访问它们。

我研究了消息传递，但遇到了一些问题。我不确定它在将 javascript 注入页面标题的范围内是如何工作的。我已尝试使用此示例，但我的扩展程序似乎没有捕捉到该消息。

// This function is called in the injected header javascript.
function sendToExtension() {
    setTimeout(function() {
    console.log('page javascript sending message');
    window.postMessage({ type: 'page_js_type',
        text: "Hello from the page's javascript!"},
        '*' /* targetOrigin: any */);
    }, 10);
}

// This is installed in a background script.
window.addEventListener('message', function(event) {
    console.log('content_script.js got message:', event);
});

Answer 1

你必须使用 Chrome 的 sendMessage 函数和 onMessage 监听器。见下文：

function sendToExtension() {
    console.log('Sending message');
    chrome.runtime.sendMessage({ext: "myExtension"}, function(response) {
      console.log(response.ack);
    });
}

// Listener - Put this in the background script to listen to all the events.
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.ext) {
        console.log('Message received from ' + request.ext);
        sendResponse({ack:'received'}); // This send a response message to the requestor
    }
});