Chrome扩展程序 - 从网页检索全局变量

Question

我正在开发Chrome扩展程序.我希望解析"原始"Gmail邮件(当前查看的邮件)的内容.

我试图利用jQuery.load()如下

$(windows).load(function() { alert(GLOBALS); });

并将其放在内容脚本中,但它也不起作用.我正在使用Chrome的开发人员工具,它会在调用时返回以下错误alert(GLOBALS);

未捕获的ReferenceError:未定义GLOBALS

虽然,在使用开发人员工具的控制台时,键入控制台GLOBALS会返回一个数组.

有关如何从内容脚本访问GLOBALS的任何线索？

Answer 1

内容脚本在隔离的环境中运行.要访问(页面的window)任何全局属性,您必须注入新<script>元素,或使用事件侦听器来传递数据.

有关在页面上下文中注入元素的示例,请参阅此答案<script>.

例

contentscript.js("run_at": "document_end"在清单中):

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.remove();
};

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains the transferred data (can be anything, ranging
    // from JavaScript objects to strings).
    // Do something, for example:
    alert(e.detail);
});

script.js - 位于扩展目录中,这将被注入页面本身:

setTimeout(function() {
    /* Example: Send data from the page to your Chrome extension */
    document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
        detail: GLOBALS // Some variable from Gmail.
    }));
}, 0);

由于此文件是通过DOM中的chrome-extension:URL加载的,因此必须将"script.js"添加到清单文件的web_accessible_resources部分.否则,Chrome将拒绝加载脚本文件.

您应该在网页中尽可能少地运行逻辑,并在内容脚本中处理大部分逻辑.这有多种原因.首先,页面中注入的任何脚本都在与网页相同的上下文中运行,因此网页可以(故意或无意)修改JavaScript/DOM方法,使扩展程序停止工作.其次,内容脚本可以访问额外的功能,例如chrome.*API和跨域网络请求的有限子集(前提是扩展已声明这些功能的权限).

Answer 2

用于在chrome扩展content_script和页面上的javascript之间进行通信的更现代的解决方案是使用html5 postMessage API.发送到"窗口"的任何消息都可以从网页上的javascript和扩展名的content_script中看到.

扩展名的content_script.js:

window.addEventListener('message', function(event) {
    console.log('content_script.js got message:', event);
    // check event.type and event.data
});

setTimeout(function () {
    console.log('cs sending message');
    window.postMessage({ type: 'content_script_type',
                         text: 'Hello from content_script.js!'},
                       '*' /* targetOrigin: any */ );
}, 1000);

在网页上运行的javascript:

window.addEventListener('message', function(event) {
    console.log('page javascript got message:', event);
});

setTimeout(function() {
    console.log('page javascript sending message');
    window.postMessage({ type: 'page_js_type',
                         text: "Hello from the page's javascript!"},
                       '*' /* targetOrigin: any */);
}, 2000);

另请参阅http://developer.chrome.com/extensions/content_scripts.html#host-page-communication