Use a content script to access the page context variables and functions

Question

I m learning how to create Chrome extensions  I just started developing one to catch YouTube events  I want to use it with YouTube flash player  later I will try to make it compatible with HTML5    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

User · Answer

If you wish to inject pure function  instead of text  you can use this method    x000D   x000D  function inject    x000D      document body style backgroundColor    blue   x000D    x000D   x000D     this includes the function as text and the barentheses make it run itself  x000D  var actualCode       inject         x000D   x000D  document documentElement setAttribute  onreset   actualCode   x000D  document documentElement dispatchEvent new CustomEvent  reset     x000D  document documentElement removeAttribute  onreset    x000D   x000D   x000D    And you can pass parameters  unfortunatelly no objects and arrays can be stringifyed  to the functions  Add it into the baretheses  like so    x000D   x000D  function inject color   x000D      document body style backgroundColor   color  x000D    x000D   x000D     this includes the function as text and the barentheses make it run itself  x000D  var color    yellow   x000D  var actualCode       inject      color       x000D   x000D   x000D

User · Answer

Underlying cause  Content scripts are executed in an  quot isolated world quot  environment  Solution   To access functions variables of the page context   quot main world quot   you have to inject the code into the page itself using DOM  Same thing if you want to expose your functions variables to the page context  in your case it s the state   method    Note in case communication with the page script is needed  Use DOM CustomEvent handler  Examples  one  two  and three   Note in case chrome API is needed in the page script  Since chrome   APIs can t be used in the page script  you have to use them in the content script and send the results to the page script via DOM messaging  see the note above     Safety warning  A page may redefine or augment hook a built-in prototype so your exposed code may fail if the page did it in an incompatible fashion  If you want to make sure your exposed code runs in a safe environment then you should either a  declare your content script with  quot run at quot    quot document start quot  and use Methods 2-3 not 1  or b  extract the original native built-ins via an empty iframe  example  Note that with document start you may need to use DOMContentLoaded event inside the exposed code to wait for DOM  Table of contents  Method 1  Inject another file Method 2  Inject embedded code Method 2b  Using a function Method 3  Using an inline event Dynamic values in the injected code  Method 1  Inject another file This is the easiest best method when you have lots of code  Include your actual JS code in a file within your extension  say script js  Then let your content script be as follows  explained here  Google Chome    Application Shortcut    Custom Javascript   var s   document createElement  script       TODO  add  quot script js quot  to web accessible resources in manifest json s src   chrome runtime getURL  script js    s onload   function         this remove        document head    document documentElement  appendChild s    Note  For security reasons  Chrome prevents loading of js files  Your file must be added as a  quot web accessible resources quot  item  example       manifest json must include    quot web accessible resources quot     quot script js quot     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 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  quot Dynamic values in the injected code quot      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 ----- gt    join   n     Method 2b  Using a function 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  quot Injected script quot         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    quot undefined quot   Method 3  Using an inline event Sometimes  you want to run some code immediately  e g  to run some code before the  lt head gt  element is created  This can be done by inserting a  lt script gt  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  Dynamic values in the injected code Occasionally  you need to pass an arbitrary variable to the injected function  For example  var GREETING    quot Hi  I m  quot   var NAME    quot Rob quot   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    quot  function GREETING  NAME         Hi  I m  Rob  quot                                                                   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

User · Answer

You can use a utility function I ve created for the purpose of running code in the page context and getting back the returned value   This is done by serializing a function to a string and injecting it to the web page   The utility is available here on GitHub   Usage examples -       Some code that exists only in the page context - window someProperty    property   function someFunction name    test         return new Promise res   gt  setTimeout     gt res  resolved     name   1200                            Content script examples -  await runInPageContext      gt  someProperty      returns  property   await runInPageContext      gt  someFunction        returns  resolved test   await runInPageContext async  name    gt  someFunction name    with name         resolved with name   await runInPageContext async     args    gt  someFunction    args    with spread operator and rest parameters        returns  resolved with spread operator and rest parameters   await runInPageContext       func   name    gt  someFunction name       args    with params object        doc  document      timeout  10000         returns  resolved with params object

User · Answer

I ve also faced the problem of ordering of loaded scripts  which was solved through sequential loading of scripts  The loading is based on Rob W s answer   function scriptFromFile file        var script   document createElement  script        script src   chrome extension getURL file       return script     function scriptFromSource source        var script   document createElement  script        script textContent   source      return script     function inject scripts        if  scripts length     0          return      var otherScripts   scripts slice 1       var script   scripts 0       var onload   function             script parentNode removeChild script           inject otherScripts              if  script src                  script onload   onload          document head appendChild script         else           document head appendChild script           onload              The example of usage would be   var formulaImageUrl   chrome extension getURL  formula png    var codeImageUrl   chrome extension getURL  code png     inject       scriptFromSource  var formulaImageUrl        formulaImageUrl              scriptFromSource  var codeImageUrl        codeImageUrl              scriptFromFile  EqEditor eq editor-lite-17 js        scriptFromFile  EqEditor eq config js        scriptFromFile  highlight highlight pack js        scriptFromFile  injected js         Actually  I m kinda new to JS  so feel free to ping me to the better ways

User · Answer

in Content script   i add script tag to the head which binds a  onmessage  handler  inside the handler i use   eval to execute code  In booth content script i use onmessage handler as well   so i get two way communication   Chrome Docs    Content Script  var pmsgUrl   chrome extension getURL  pmListener js       head   first   append   lt script src    pmsgUrl    type  text javascript  gt  lt  script gt         Listening to messages from DOM window addEventListener  message   function event      console log  CS    message in from DOM   event     if event data hasOwnProperty  cmdClient          var obj   JSON parse event data cmdClient       DoSomthingInContentScript obj            pmListener js is a post message url listener     pmListener js    Listen to messages from Content Script and Execute Them window addEventListener  message   function  msg      console log  im in REAL DOM      if  msg data cmnd        eval msg data cmnd            console log  injected To Real Dom      This way   I can have 2 way communication between CS to Real Dom  Its very usefull for example if you need to listen webscoket events   or to any in memory variables or events

User · Answer

The only thing missing hidden from Rob W s excellent answer is how to communicate between the injected page script and the content script   On the receiving side  either your content script or the injected page script  add an event listener   document addEventListener  yourCustomEvent   function  e      var data   e detail    console log  received   data         On the initiator side  content script or injected page script  send the event   var data       allowedTypes   those supported by structured cloning  see the list below     inShort   no DOM elements or classes functions       document dispatchEvent new CustomEvent  yourCustomEvent     detail  data        Notes    DOM messaging uses structured cloning algorithm  which can transfer only some types of data in addition to primitive values  It can t send class instances or functions or DOM elements  In Firefox  to send an object  i e  not a primitive value  from the content script to the page context you have to explicitly clone it into the target using cloneInto  a built-in function   otherwise it ll fail with a security violation error   document dispatchEvent new CustomEvent  yourCustomEvent       detail  cloneInto data  document defaultView

[javascript] Use a content script to access the page context variables and functions

Examples related to javascript

Examples related to google-chrome

Examples related to google-chrome-extension

Examples related to youtube-api

Examples related to content-script