Javascript 从 Chrome 扩展中的内容脚本访问全局对象

Accessing global object from content script in chrome extension

提问by Vivek R K

I have defined a global object in a .js file. For example file1.js contains the global object SomeObject. This file gets loaded in background.html.

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

Since file1.js is included in background.html, I am able to access the global object in this page. So no issues here.

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

When an event like click on the extension button is performed, I am running a content script using the chrome.tabs.executeScript(null, {file: "contentscript.js"});api.

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

How can I access SomeObject in the contentscript in this case?

在这种情况下，如何访问内容脚本中的 SomeObject？

回答by Rob W

There is no way to get direct accessto the background page's global object from a Content scriptor injected script.

有没有办法让直接访问从一到后台网页的全局对象的内容脚本或注入脚本。

To use a background page's method from an injected script , follow these steps:

要从注入的脚本中使用后台页面的方法，请按照下列步骤操作：

1. Content Script: Bind an event listener to the page ^{example 1}.
   Whenever you want to notify the method from the background page:
2. Injected script: Create and fire this specific event ^{example 1}.
   → The event listener from 1)gets triggered.
3. In this event listener, use chrome.runtime.sendMessageto request the functionality from the background ^{example 2}.
4. In the background page, handle this request using chrome.runtime.onMessage.
5. Optionally, inject code in the original tab using chrome.tabs.executeScript(tab.id, func).

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

To use a background page's method from a Content script, only steps 3 and 4 are needed.
Here's an example, in which the content script communicates with the background page:

要从内容脚本使用背景页面的方法，只需要第 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'
        });
    }
});

See also

也可以看看

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

• SO：关于后台脚本、内容脚本和注入脚本，您应该了解什么。
• SO：示例代码：在注入脚本和内容脚本之间进行通信。