Accessing global object from content script in chrome extension

Question

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?

Accepted Answer

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:

- Content Script: Bind an event listener to the page example 1. Whenever you want to notify the method from the background page:

- Injected script: Create and fire this specific event example 1. → The event listener from 1) gets triggered.

- In this event listener, use `chrome.runtime.sendMessage` to request the functionality from the background example 2.

- In the background page, handle this request using `chrome.runtime.onMessage`.

- 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'
        });
    }
});
```

Accessing global object from content script in chrome extension

Solution

Problem

Related problems