javascriptgoogle-chromegoogle-chrome-extensioncontent-script

Chrome plugin content script cannot access all window objects?


I'm trying to fetch an object from the current page window via a content script. The object itself is available if I log the window/this object but when I try to access it via the content script it returns undefined?

I'm using a content script for this that injects itself on document_idle and via "MAIN" world so the js objects of the page are shared with my content script, see manifest.json:

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://example.com/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_idle",
      "world": "MAIN"
    }
  ]
}

And here you have content.js:

addEventListener("load", (event) => {
    console.log("loading")
    console.log(window)
    console.log(window.THEOplayer)
});

And the output in console.log: window output which clearly depicts the object I want to use

and then the output of theoplayer is undefined. Output showing a return of an undefined theoplayer

I have tried different solutions accessing it via the this object. Without using the addEventListener...

I can't seem to find a way to access this object. Even though it seem it's available in the window it returns a undefined whenever I try to access it via the script. It seems that this object is, one way or another blacklisted from being accessed via my script? But can't seem to find such a feature via the documentation of the chrome plugin content scripts . can somebody have a explanation for this and a possible workaround?


Solution

  • Your content script is already running correctly in the context of the page (MAIN world), so the problem is likely that the object appears after your content script runs, for example it may be added by an asynchronously running page script. You can wait for it by using setInterval and rechecking the object.

    (() => {
      let timer;
      if (!check()) timer = setInterval(check, 100);
    
      function check() {
        let obj = window.THEOplayer;
        if (!obj) return;
        clearInterval(timer);
        // use the object
        console.log(obj);
        return true;
      }
    })();