Firefox WebExtensions inject script in iframe

chrome extension content script
chrome extension inject javascript
firefox extension content script
firefox webextensions tutorial
firefox extension matches all urls
firefox debug content script
firefox add on matches
firefox extension development

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.

content_scripts, Inject the scripts specified in js and css into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab� In Firefox, content script requests (for example, using fetch ()) happen in the context of an extension, so you must provide an absolute URL to reference page content. In Chrome, these requests happen in context of the page, so they are made to a relative URL. For example, /api is sent to https:// «current page URL» /api.

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.

1463074, User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ( KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Steps to reproduce:� use the WebExtensions messaging APIs to exchange messages with the background pages (e.g. to be able to call WebExtensions API not directly available to the content scripts, like the tabs API) example apiContentScript.js // Define an object with all the APIs to inject in the userScript sandboxes.

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

Content scripts, Background scripts can access all the WebExtension JavaScript APIs, but they can't If you try to inject a content script into a page in these domains, it fails and the There is only one global scope per frame, per extension. Inject the scripts specified in js and css into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements.

Content script all_frames option ignores , script is added to the iframe. This is what happens in chrome. https://developer. mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_scripts states� load the extension from its source folder using the Load Temporary Add-on feature. The extension stays loaded until you restart Firefox. open the extension's source folder at the command-line and use web-ext to run the extension. The extension stays loaded until you restart Firefox. in Firefox use File > Open File and find the example in the

WebExtension: content scripts should be injected , WebExtension: content scripts should be injected in data URL pages A page can easily circumvent such addons by using an iFrame with a data-URL. Report this add-on for abuse. If you think this add-on violates Mozilla's add-on policies or has security or privacy issues, please report these issues to Mozilla using this form. Please don't use this form to report bugs or request add-on features; this report will be sent to Mozilla and not to the add-on developer.

Webpage can override WebExtension frames, contentWindow.eval to execute javascript code with the privileges and API of the inject (raise security errors) * access the document loaded in the injected iframe� Hello, I’m porting a chrome extension to FF and trying to go with WebExtensions. I’m seing a major difference between Chrome and Firefox: if I create an iframe with a js script as src, the chrome object is not exposed in this script for the Firefox case, this is not the case with Chrome… When the script is injected in the iframe (using chrome.tabs.executeScript , the chrome object

Comments
  • Do not put answers within your question. This section is for Questions! Put your answer below in the Answer section.
  • I already tried the setting of all_frames before but didn't get any results due to wrong URL-patterns. After you commented I looked at it again and got it to work just the way I wanted it, so thank you for sending me on the right track. I will edit my question with a part of my manifest.json for anyone being on the wrong track like me. One question remains. You wrote something about the correct Permission. What are you refering to? As I couldnt find any permissions that would help this case, nor do I use any in my current solution.
  • @rainbowschedule Depending on what the script does, if you only have permission for site A and the iframe is from a different site B, then some functions that require permission (e,g, XHR/fetch) may not functions as you expect since you only have permission for site A.
  • Thank you for your reply. I read that in theory it is not possible but that they were some workarounds for that. Is it not possible to somehow run my script in the .html of that iframe directly? I dont necessarily need any cross-domain activities. Just alter that without caring about it being displayed on another website.
  • Hi rainbowschedule. I have to say that I'm relly interested in this issue and I get it in my face several times. You can see this simple example: link In this example, the life is so easy, because the iframe and the container page are in the same domain (and with all permision) and you can easy get access to everithing... var x = document.getElementById("myframe"); var y = x.contentDocument; console.log(y.children[0].children[1].getElementsByTagName('P')[0].innerHTML)
  • In my case I luckily didn't have to access the iframe from the parent document, so I can just inject my script directly in the iframe (see erosman's answer or my edited question). With my new gained knowledge and what I've read before I think you can still access an iframe from outside via Window.postMessage() where you have to inject scripts in the parent document and the iframe to be able to communicate between them via this method. Maybe this can help you in the future.