Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What you see is expected behavior.</p> <blockquote> <p>Content scripts execute in a special environment called an isolated world. They <strong>have access to the DOM of the page</strong> they are injected into, but <strong>not to any JavaScript variables or functions created by the page</strong>. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.</p> </blockquote> <p><a href="http://developer.chrome.com/extensions/content_scripts.html#execution-environment" rel="nofollow">http://developer.chrome.com/extensions/content_scripts.html#execution-environment</a></p> <p>When you run <code>console.info(myVar);</code> from the page, the console of Chrome dev tools or from the injected script, it runs in the context of the page and thus sees the variable as defined.</p> <p>However, when running the same code from inside of your extension code, you're operating in a completely different environment, so <code>myVar</code> is undefined.</p> <p>You can work around this using shared DOM perhaps.<br> <a href="http://developer.chrome.com/extensions/content_scripts.html#host-page-communication" rel="nofollow">http://developer.chrome.com/extensions/content_scripts.html#host-page-communication</a></p> <h2>EDIT</h2> <p>Unless someone corrects me, the <code>console.info(myVar);</code> code below is injected into <code>script</code> element while still being executed in the context of the extension:</p> <pre><code>$("&lt;script /&gt;", { html: "console.info(myVar);" // myVar points to extension's myVar, not page's }); </code></pre> <p>A simple test can be run by logging <code>chrome.extension</code> object or declaring <code>myVar</code> inside of the contentscript – the <code>chrome.extension</code> will be available and <code>myVar</code> will be logged exactly as defined in the contentscript.</p> <p>The suggestion is to use an external script (which is also better for modularity), add it to <code>web_accessible_resources</code> and create a <code>script</code> element with a <code>src</code> property pointing to that external script.</p> <p>The example extension code below alerts "test" when loading the test.html page with extension enabled.</p> <p><strong>manifest.json</strong></p> <pre><code>{ "name": "Test", "version": "0.1.0", "manifest_version": 2, "description": "Just a test.", "content_scripts": [{ "matches": ["&lt;all_urls&gt;"], "js": ["contentscript.js"] }], "web_accessible_resources": [ "myscript.js" ] } </code></pre> <p><strong>test.html</strong> (the visited page)</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script&gt; window.test = 'test'; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>contentscript.js</strong></p> <pre><code>var script = document.createElement('script'); script.type = 'text/javascript'; script.src = chrome.extension.getURL('myscript.js'); document.getElementsByTagName('head')[0].appendChild(script); </code></pre> <p><strong>myscript.js</strong> (this is the external script that will run in the context of the page)</p> <pre><code>alert(window.test); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload