在Chrome扩展中从内容脚本访问全局对象 [英] Accessing global object from content script in chrome extension

问题描述

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

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

当执行像点击扩展按钮这样的事件时，我使用 chrome.tabs运行内容脚本。在这种情况下，如何访问ContentObject中的SomeObject ？

解决方案

无法直接访问从< a href =https://developer.chrome.com/extensions/content_scripts.html =noreferrer>内容脚本或注入脚本。

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

1. 内容脚本：将一个事件监听器绑定到页面 ^示例1 。
   
   无论何时您想从后台页面通知该方法：
此特定事件 ^示例1 。

→来自 1）的事件侦听器被触发。

2. 在这个事件侦听器中，使用 chrome.runtime.sendMessage 从后台请求功能 ^示例2 。
   
3. 在后台页面，请使用 chrome.runtime.onMessage 。


4. 或者，使用 chrome.tabs.executeScript（tab.id，func） 。

要使用内容脚本中的背景页面方法，只需要执行第3步和第4步。

下面是一个示例， nt脚本与后台页面进行通信：

  //示例背景页面
函数some_method（arg_name）{
返回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）; 
} 
}）; 
 
 //示例contentscript.js 
 chrome.runtime.sendMessage（{
类型：'localStorage  - 步骤4'，
名称：'preference'$ b $例如：如果没有设置首选项，请设置一个：
 chrome.runtime.sendMessage（{$ b $，如果（value === null）{
} b $ b类型：'localStorage  - 步骤5'，
名称：'preference'，
值：'default'
}）; 
} 
}）; 
  

参见

• SO：应了解背景脚本VS内容脚本vs注入脚本。


• SO：示例代码：在注入脚本和内容脚本之间进行通信。

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.

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

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.

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

解决方案

There is no way to get direct access to the background page's global object from a Content script or 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.sendMessage to 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).

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:

// 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 should know about background scripts vs Content Scripts vs Injected scripts.
• SO: Example code: Communicating between an Injected script and a Content script.

这篇关于在Chrome扩展中从内容脚本访问全局对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！