Menu
In the manifest.json file, I declare that I want to inject some scripts, like this:
{
"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
}
]
}
In the content script, I create an iframe, among other things. It works fine so far. Like this:
$('<div id="my_notifier"></div>').appendTo($('body')).html('<iframe src="http://example.com"></iframe>');
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 <script src=... to include it again inside the iframe.
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.
I've tried the attribute "all_frames": true, but it doesn't work.
Please advise. Thanks.
Edit: I added example.com to the matches attribute like this:
"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
}
]
But it does not work.
To be clearer, say the contents of the iframe (example.com) is:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div></div>
<script type="text/javascript">
$('div').html('hi');
</script>
</body>
</html>
There will be an error: $ is not defined
To make it work, I have to use:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('div').html('hi');
</script>
</body>
</html>
884
If you have a web application already, and would like to build a chrome extension for it - using iframes is an amazing tool. You can just inject an iframe of that web app in any page instead of re-implementing the whole UI from ground up.
A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).
To use Read Aloud, navigate to the web page you want to read, then click the Read Aloud icon on the Chrome menu. In addition, the shortcut keys ALT-P, ALT-O, ALT-Comma, and ALT-Period can be used to Play/Pause, Stop, Rewind, and Forward. You may also select the text you want to read before activating the extension.
Page Edit is an extension that let you make changes to any HTML webpage. To work with this add-on, simply open the toolbar popup UI and then click on the big toggle button at the left side. Once the add-on is active, the icon turns to blue color.
You need to add your iframe's url http://example.com to the list and specify which content scripts to inject:
"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"]
},{
"matches":["http://example.com/*"],
"run_at": "document_idle",
"js": ["jquery-1.5.1.min.js"],
"all_frames": true
}
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
