CODEWITHSUNDEEP
google-chrome-extension
Betty
Betty

Reputation: 572

In Chrome extension, content scripts can't affect inside the iframe?

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>

Upvotes: 6

Views: 7796

Answers (2)

e382df99a7950919789725ceeec126
e382df99a7950919789725ceeec126

Reputation: 5981

The answer is quiet easy:

  • Check if new tab was updated
  • Is your Url ?
  • Execute the script you want

dynamically deploying content scripts in chrome extensions

Upvotes: -1

serg
serg

Reputation: 111255

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
        }
    ]

Upvotes: 5

Related Questions