Chrome extension code vs Content scripts vs Injected scripts
JavaScript code in Chrome extensions can be divided in the following groups:
Extension code - Full access to all permitted
chrome.*
APIs.
This includes the background page, and all pages which have direct access to it viachrome.extension.getBackgroundPage()
, such as the browser pop-ups.Content scripts (via the manifest file or
chrome.tabs.executeScript
) - Partial access to some of thechrome
APIs, full access to the page's DOM (not to any of thewindow
objects, including frames).
Content scripts run in a scope between the extension and the page. The globalwindow
object of a Content script is distinct from the page/extension's global namespace.Injected scripts (via this method in a Content script) - Full access to all properties in the page. No access to any of the
chrome.*
APIs.
Injected scripts behave as if they were included by the page itself, and are not connected to the extension in any way. See this post to learn more information on the various injection methods.
To send a message from the injected script to the content script, events have to be used. See this answer for an example. Note: Message transported within an extension from one context to another are automatically (JSON)-serialised and parsed.
In your case, the code in the background page (chrome.tabs.onUpdated
) is likely called before the content script script.js
is evaluated. So, you'll get a ReferenceError
, because init
is not .
Also, when you use chrome.tabs.onUpdated
, make sure that you test whether the page is fully loaded, because the event fires twice: Before load, and on finish:
//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
// Execute some script when the page is fully (DOM) ready
chrome.tabs.executeScript(null, {code:"init();"});
}
});
Jon
Updated on January 20, 2021Comments
-
Jon over 3 years
I am trying to get my Chrome Extension to run the function
init()
whenever a new page is loaded, but I am having trouble trying to understand how to do this. From what I understand, I need to do the following in background.html:- Use
chrome.tabs.onUpdated.addListener()
to check when the page is changed - Use
chrome.tabs.executeScript
to run a script.
This is the code I have:
//background.html chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { chrome.tabs.executeScript(null, {code:"init();"}); }); //script.js function init() { alert("It works!"); }
I am also wondering if the init() function will have access to my other functions located in other JS files?
- Use
-
Jon about 12 yearsThank you for the tip about
chrome.tabs.onUpdated
firing twice. So my question I guess is how would I injectinit()
? Should I inject all of my JavaScripts?init()
is normally called when the user clicks on the Browser Action icon, andinit()
triggers a bunch of other functions. -
Rob W about 12 years@user1277607 When it have to access any of the page's global variables, inject the script. When
function init
has to access both the page and extensions code, use a content script. See the linked answer to see how to inject scripts, and this answer for a guideline on implementing a Content script which has to access the page's variables. -
pvnarula about 8 yearsHi @RobW , I have 1 question. In terms of performance or processing they both make any difference. If I have to process some big script, which is better place to do background or content script? Or both ways can create some lapses?
-
Rob W about 8 years@pvnarula If it is CPU-intensive, consider using a Worker in a background page. If there is an expensive one-time initialization step, use a background script. If on the other hand there is tab/page-specific code that e.g. heavily relies on the DOM (and responsiveness of the background page is important), use a content script, because execution of JavaScript in one tab will not interfere with another tab, whereas putting it in the background page prevents the extension's background script from responding to other events.
-
Sandeep Kumar almost 7 yearsFor
chrome.tabs.executeScript
,console
,localStorage
work, though those are global window objects. But not the ones which application has defined in window namespace e.g.window.ContextHub = window.ContextHub || {};
. Is there a whitelisted set which is allowed and which is not?