javascript - Chrome 扩展 - 从网页中检索全局变量

Question

我正在为 Chrome 开发一个扩展程序。我希望解析“原始”Gmail 邮件(当前查看的邮件)的内容。

我尝试如下使用 jQuery.load()

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

并将它放在内容脚本中，但它也不起作用。我正在使用 Chrome 的开发人员工具，它在调用 alert(GLOBALS);

时返回以下错误

Uncaught ReferenceError: GLOBALS is not defined

尽管如此，当使用开发人员工具的控制台时，在控制台中键入 GLOBALS 它会返回一个数组。

知道如何从内容脚本访问 GLOBALS 吗？

Answer 1

Content scripts在隔离环境中运行。要访问任何全局属性(页面的 window )，您必须注入(inject)一个新的 <script>元素，或使用事件监听器来传递数据。

参见 this answer例如注入(inject) <script>页面上下文中的元素。

例子

contentscript.js( list 中的 "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 - 位于扩展目录中，这将被注入(inject)页面本身:

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);

由于此文件是通过 chrome-extension: URL 从 DOM 中加载的，因此必须将“script.js”添加到 list 文件的 web_accessible_resources 部分。否则 Chrome 将拒绝加载脚本文件。

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