javascriptgoogle-chromegoogle-chrome-extensioncontent-script

Access variables and functions defined in page context from an extension

I want to control youtube.com's player in my extension:

manifest.json:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

The problem is that the console gives me the "Started!", but there is no "State Changed!" when I play/pause YouTube videos.

When this code is put in the console, it worked. What am I doing wrong?

Solution

  • 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.

    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:

    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)

    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)