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

时间:2013-03-30 15:46:09

标签: javascript google-chrome google-chrome-extension local-storage html-injections

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

但是,当我想保存信息时,我使用localStorage,但是localStorage总是保存当前网站。如何使用localStorage保存我们的扩展程序?

此外,我想在chrome-extension中使用一些全局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);
});

1 个答案:

答案 0 :(得分:2)

您必须使用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
    }
});