javascript - 从 chrome 扩展中的内容脚本访问全局对象

Question

我在 .js 文件中定义了一个全局对象。例如 file1.js 包含全局对象 SomeObject。该文件在 background.html 中加载。

由于 file1.js 包含在 background.html 中，我可以访问此页面中的全局对象。所以这里没有问题。

当执行单击扩展按钮之类的事件时，我正在使用chrome.tabs.executeScript(null, {file: "contentscript.js"});api 运行内容脚本。

在这种情况下，如何访问 contentscript 中的 SomeObject？

Answer 1

无法从内容脚本或注入脚本直接访问后台页面的全局对象。

要使用注入脚本中的后台页面方法，请执行以下步骤：

1. 内容脚本：将事件侦听器绑定到页面^{示例 1}。
   每当您想从后台页面通知该方法时：
2. 注入脚本：创建并触发此特定事件^{示例 1}。 → 1)
   中的事件监听器被触发。
3. 在此事件侦听器中，用于chrome.runtime.sendMessage从后台^{示例 2}请求功能。
4. 在后台页面中，使用chrome.runtime.onMessage.
5. 或者，使用 . 在原始选项卡中注入代码chrome.tabs.executeScript(tab.id, func)。

要从内容脚本中使用背景页面的方法，只需要步骤 3 和 4。
这是一个示例，其中内容脚本与后台页面进行通信：

// Example background page
function some_method(arg_name) {
    return localStorage.getItem(arg_name);
}
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
    if (request.type == 'localStorage - step 4') {
        callback( some_method(request.name) );
    } else if (request.type == 'localStorage - step 5') {
        localStorage.setItem(request.name, request.value);
    }
});

// Example contentscript.js
chrome.runtime.sendMessage({
    type: 'localStorage - step 4',
    name: 'preference'
}, function(value) {
    if (value === null) {
        // Example: If no preference is set, set one:
        chrome.runtime.sendMessage({
            type: 'localStorage - step 5',
            name: 'preference',
            value: 'default'
        });
    }
});

也可以看看

• SO: What you should know about background scripts vs Content Scripts vs Injected scripts.
• SO: Example code: Communicating between an Injected script and a Content script.