Note that there are some explanatory texts on larger screens.

plurals
  1. POIn Chrome extension, content scripts can't affect inside the iframe?
    primarykey
    data
    text
    <p>In the manifest.json file, I declare that I want to inject some scripts, like this:</p> <pre><code>{ "name": "my extension", "version": "1.0", "background_page": "background.html", "permissions": ["contextMenus", "tabs", "http://*.example.com/*"], "content_scripts": [ { "matches": [ "http://*.taobao.com/*", "http://*.yintai.com/*" ], "run_at": "document_idle", "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], "all_frames": true } ] } </code></pre> <p>In the content script, I create an iframe, among other things. It works fine so far. Like this:</p> <pre><code>$('&lt;div id="my_notifier"&gt;&lt;/div&gt;').appendTo($('body')).html('&lt;iframe src="http://example.com"&gt;&lt;/iframe&gt;'); </code></pre> <p>The problem is, inside the iframe, it does not inherit anything from the content scripts. If I want to use jQuery, I have to use <code>&lt;script src=...</code> to include it again inside the iframe.</p> <p>I prefer not to include jQuery again because I already put it in the extension. I don't want the user to download jQuery again and again on every page that the extension needs to run on.</p> <p>I've tried the attribute <code>"all_frames": true</code>, but it doesn't work.</p> <p>Please advise. Thanks.</p> <p>Edit: I added example.com to the <code>matches</code> attribute like this:</p> <pre><code>"content_scripts": [ { "matches": [ "http://*.taobao.com/*", "http://*.yintai.com/*", "http://*.example.com/*" ], "run_at": "document_idle", "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], "all_frames": true } ] </code></pre> <p>But it does not work.</p> <p>To be clearer, say the contents of the iframe (example.com) is:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; $('div').html('hi'); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>There will be an error: $ is not defined</p> <p>To make it work, I have to use:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $('div').html('hi'); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    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