Underlying cause:
A content script is executed in an ISOLATED
“world” environment, meaning it can’t access JS functions and variables in the MAIN
“world” (the page context), and can’t expose its own JS stuff, like the state()
method in your case.
Solution:
Inject the code into the JS context of the page (MAIN
“world”) using methods shown below.
On using chrome
API:
• via externally_connectable
messaging on <all_urls>
allowed since Chrome 107.
• via CustomEvent
messaging with the normal content script, see the next paragraph.
On messaging with the normal content script:
Use CustomEvent
as shown here, or here, or here. In short, the injected script sends a message to the normal content script, which calls chrome.storage
or chrome.runtime.sendMessage
, then sends the result to the injected script via another CustomEvent message. Don’t use window.postMessage
as your data may break sites that have a listener expecting a certain format of the message.
Caution!
The page may redefine a built-in prototype or a global and exfiltrate data from your private communication or make your injected code fail. Guarding against this is complicated (see Tampermonkey’s or Violentmonkey’s “vault”), so make sure to verify all the received data.
Table of contents
So, what’s best? For ManifestV3 use the declarative method (#5) if the code should always run, or use chrome.scripting
(#4) for conditional injection from an extension script like the popup or service worker, or use the content script-based methods (#1 and #3) otherwise.
-
Content script controls injection:
- Method 1: Inject another file – ManifestV3 compatible
- Method 2: Inject embedded code – MV2
- Method 2b: Using a function – MV2
- Method 3: Using an inline event – ManifestV3 compatible
-
Extension script controls injection (e.g. background service worker or the popup script):
- Method 4: Using executeScript’s world – ManifestV3 only
-
Declarative injection:
- Method 5: Using
world
in manifest.json – ManifestV3 only, Chrome 111+
- Method 5: Using
-
Dynamic values in the injected code
Method 1: Inject another file (ManifestV3/MV2)
Particularly good when you have lots of code. Put the code in a file within your extension, say script.js
. Then load it in your content script like this:
var s = document.createElement('script');
s.src = chrome.runtime.getURL('script.js');
s.onload = function() { this.remove(); };
// see also "Dynamic values in the injected code" section in this answer
(document.head || document.documentElement).appendChild(s);
The js file must be exposed in web_accessible_resources
:
-
manifest.json example for ManifestV2
"web_accessible_resources": ["script.js"],
-
manifest.json example for ManifestV3
"web_accessible_resources": [{ "resources": ["script.js"], "matches": ["<all_urls>"] }]
If not, the following error will appear in the console:
Denying load of chrome-extension://[EXTENSIONID]/script.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Method 2: Inject embedded code (MV2)
This method is useful when you want to quickly run a small piece of code. (See also: How to disable facebook hotkeys with Chrome extension?).
var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Note: template literals are only supported in Chrome 41 and above. If you want the extension to work in Chrome 40-, use:
var actualCode = ['/* Code here. Example: */' + 'alert(0);',
'// Beware! This array have to be joined',
'// using a newline. Otherwise, missing semicolons',
'// or single-line comments (//) will mess up your',
'// code ----->'].join('\n');
Method 2b: Using a function (MV2)
For a big chunk of code, quoting the string is not feasible. Instead of using an array, a function can be used, and stringified:
var actualCode="(" + function() {
// All code is executed in a local scope.
// For example, the following does NOT overwrite the global `alert` method
var alert = null;
// To overwrite a global variable, prefix `window`:
window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
This method works, because the +
operator on strings and a function converts all objects to a string. If you intend on using the code more than once, it’s wise to create a function to avoid code repetition. An implementation might look like:
function injectScript(func) {
var actualCode="(" + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
Note: Since the function is serialized, the original scope, and all bound properties are lost!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
Method 3: Using an inline event (ManifestV3/MV2)
Sometimes, you want to run some code immediately, e.g. to run some code before the <head>
element is created. This can be done by inserting a <script>
tag with textContent
(see method 2/2b).
An alternative, but not recommended is to use inline events. It is not recommended because if the page defines a Content Security policy that forbids inline scripts, then inline event listeners are blocked. Inline scripts injected by the extension, on the other hand, still run.
If you still want to use inline events, this is how:
var actualCode="// Some code example \n" +
'console.log(document.documentElement.outerHTML);';
document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
Note: This method assumes that there are no other global event listeners that handle the reset
event. If there is, you can also pick one of the other global events. Just open the JavaScript console (F12), type document.documentElement.on
, and pick on of the available events.
Method 4: Using chrome.scripting API world
(ManifestV3 only)
- Chrome 95 or newer,
chrome.scripting.executeScript
withworld: 'MAIN'
- Chrome 102 or newer,
chrome.scripting.registerContentScripts
withworld: 'MAIN'
, also allowsrunAt: 'document_start'
to guarantee early execution of the page script.
Unlike the other methods, this one is for the background script or the popup script, not for the content script. See the documentation and examples.
Method 5: Using world
in manifest.json (ManifestV3 only)
In Chrome 111 or newer you can add "world": "MAIN"
to content_scripts
declaration in manifest.json to override the default value which is ISOLATED
. The scripts run in the listed order.
"content_scripts": [{
"world": "MAIN",
"js": ["page.js"],
"matches": ["<all_urls>"],
"run_at": "document_start"
}, {
"js": ["content.js"],
"matches": ["<all_urls>"],
"run_at": "document_start"
}],
Dynamic values in the injected code (MV2)
Occasionally, you need to pass an arbitrary variable to the injected function. For example:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
To inject this code, you need to pass the variables as arguments to the anonymous function. Be sure to implement it correctly! The following will not work:
var scriptToInject = function (GREETING, NAME) { ... };
var actualCode="(" + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
// ^^^^^^^^ ^^^ No string literals!
The solution is to use JSON.stringify
before passing the argument. Example:
var actualCode="(" + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
If you have many variables, it’s worthwhile to use JSON.stringify
once, to improve readability, as follows:
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]).slice(1, -1) + ')';
Dynamic values in the injected code (ManifestV3)
-
Use method 1 and add the following line:
s.dataset.params = JSON.stringify({foo: 'bar'});
Then the injected script.js can read it:
(() => { const params = JSON.parse(document.currentScript.dataset.params); console.log('injected params', params); })();
To hide the params from the page scripts you can put the script element inside a closed ShadowDOM.
-
Method 4 executeScript has
args
parameter, registerContentScripts currently doesn’t (hopefully it’ll be added in the future).