2

I am developing a Chrome extension and I want to load it after all page scripts have loaded.

Site page consists such code:

<html>
  <body>
  <div id="main">All body elements, texts, etc...</div>
  <script>
    window.netflix = window.netflix || {};
    netflix.falkorCache = {"genres":"58"}
  </script>
  </body>
</html>

My extension code is:

$(document).ready(function() {
  launchPlugin();

  function launchPlugin() {
    console.log(typeof(window.netflix));//I have also tried just `netflix`
    if(typeof(window.netflix)!=='undefined'){
      startNetflixPlayer();
    } else{
      setTimeout(
        function(){
          launchPlugin();
        }, 700);
    }
  }

  //other code...

});

But plugin never run startNetflixPlayer() because window.netflix is always undefined. I have also tried to check variable netflix but it also returns undefined.

At the same time if I try to check console.log(window.netflix) in Chrome's developer's console I see the result. console.log(typeof(window.netflix)) returns object. But after this Chrome extension still doesn't see this variable and returns undefined.

I believe I miss something simple but can't understand what exactly.

Any ideas how to access the variable (and object data) from the website using extension's script?

P.S. I have checked this answer also but it's not working for me: chrome extension: run script after page has finished loading javascript

Erazihel
  • 7,295
  • 6
  • 30
  • 53
Kir Mazur
  • 997
  • 2
  • 13
  • 27
  • 2
    1. Content scripts run in *isolated world* so you need to [Insert code into the page context using a content script](//stackoverflow.com/a/9517879) and 2. No need for `$(document).ready(function() {` if your content script runs at default setting which is `"run_at": "document_idle"`, 3. The devtools console has a context selector in its toolbar, the default is `Top` which means the page itself, but if you switch it to your extension you'll see `undefined` for the page variables just like your content script does. – wOxxOm Jun 26 '17 at 13:30
  • Seems like great advice! Checking it now. – Kir Mazur Jun 26 '17 at 13:40

1 Answers1

5

As I learned (thanks to @wOxxOm) – Content scripts in Chrome extensions run in isolated world so to access page's variables you need to insert targeted code into the site's page using a content script.

  1. You need to create start.js (whick will insert targeted code into the site's page) with such code:

    var s = document.createElement('script');
s.src = chrome.extension.getURL('content.js');
s.onload = function() {
  this.remove();
};
(document.head || document.documentElement).appendChild(s);

  2. You need to make changes for manifest.json:

    ...
"content_scripts": [
   {
     "matches": [ "*://www.yoursite.com/*" ],
     "js": ["start.js"],
     "css": [ "style.css"]
   }
 ],
 "web_accessible_resources": ["content.js"],
 ...

  3. Put targeted code to content.js. Now you can access any variables from the site's page inside content.js.

Kir Mazur
  • 997
  • 2
  • 13
  • 27
  • 1
    FYI, technically speaking, once the code is inserted into a DOM script element it's no longer a *content script*, but simply a page script just like any other page script that doesn't have priviledges of a content script. – wOxxOm Jun 26 '17 at 15:13
  • @wOxxOm what privileges do you mean? – Kir Mazur Jun 26 '17 at 15:37
  • A content script is a part of chrome extension which can access [4 chrome.* API](https://developer.chrome.com/extensions/content_scripts). Page scripts obviously can't do that. – wOxxOm Jun 26 '17 at 17:27