Firefox WebExtensions 注入 iframe 中的脚本

Question

I am new to javascript and writing web extensions. I want to write a web extension which changes the color of schedule entrys in my university planner. After some starting struggle I've been finally able to write a Firefox WebExtension that does exactly that on my uni's platform. The problem is that my uni uses multiple platforms for different tasks which can either be accessed directly or via a platform that connects them all. I've only been able to succesfully change the colors on the platform that directly shows me my schedule, not on the "general" platform. After some more research I found the problem. The planner is loaded in an iframe and since both platforms have a different domain this seems to be a bigger problem then I thought. I read a lot of confusing information on how to work with these cross-domain iframes which I couldn't really understand or am just unable to execute.

As far as I know I should be able to simply inject my script directly in the iframe and get the wanted result. But I haven't been able to do so. I didn't find any helpful information on how to do that with an WebExtension. I would really appreciate if someone could help me figure this out.

Maybe my idea is completly wrong and I need to try something else like using post message (which I didn't understand how to implement either) or something completly different. So anyways, I am looking forward to your replies.

Answer 1

As far as I know I should be able to simply inject my script directly in the iframe and get the wanted result. But I haven't been able to do so.

iframe is just like a web page and you can inject scripts into it like any web page.

There are the following considerations:

• Extension must have to correct Permission for iframe (which maybe from a different domain)
• Setting all_frames: true (default is false) in content_scripts

If you are injecting script by other method than manifest.json , let me know and I explain that too.

Answer 2

I'm so sorry, but it is not posible to modify one website on an iframe if this iframe contains a website from other domain.

Maybe, you founded some examples with java script, but if you see this examples in deep you'll find that they works because the domain is always the same...

The different origin forbiden this actions.

Answer 3

Solution

Thanks to erosman 's comment I looked at my manifest.json again and played around a bit to finally get my script to work the way I wanted. My problem was actually in wrong URL-patterns I provided. For anyone having a similar problem like me I will provide what would've saved my past me a lot of time.

Like erosman says:

iframe is just like a web page and you can inject scripts into it like any web page.

Since I don't care about accessing the iframe's content from the parent document this means I can indeed just inject my script into the iframe directly and let it work there. The result will be visible on the webpage containing the iframe. In terms of Firefox WebExtensions this simply means setting the right parameters in your manifest.json . In content_scripts set "all_frames": true to allow your script to get injected into frames. Now you have to provide the URL of the webpage displaying the iframe aswell as the iframe's URL. Your content_scripts should look like:

    "content_scripts": [
        {
         "matches": ["*://*.webpage.org/*", "*://*.iframe.com/*"],
         "all_frames": true,
         "js": ["script.js"]
        }
     ]