We Keep Coding

Firefox WebExtensions inject script in iframe

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.

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.

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

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.

URL tracking functionality

I want my webpage to have two parts. The top part has a textbox. When the user types a URL into the textbox, the bottom part browses to the content of that URL. When the user clicks a link within the bottom part, the bottom part navigates to the new URL, and the textbox in the top part changes to the new URL. How can I do it?
NOTE: This behavior is the same as in Google Translate (e.g. here), but without any translation.

first problem..
Same origin issue
The only way to achieve what you are asking is exactly the way google translate does what it does - which is to use a server-side powered script as a proxy request:
http://translate.google.com/translate_un?depth=1&hl=en&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&tl=en&twu=1&u=http://de.wikipedia.org/wiki/USA&lang=de&usg=ALkJrhgoLkbUGvOPUCHoNZIkVcMQpXhxZg
The above is the URL taken from the iframe that Google translate uses to display the translated page. The main thing to note is that the domain part of the URL is the same as the parent page's URL http://translate.google.com -- if both your frame and your parent window do not share the same domain, then your parent window's JavaScript wont be able to access anything within the iframe. It will be blocked by your browser's in-built security.
Obviously the above wont be a problem if in your project you are only ever going to be navigating your own pages (on the same domain), but considering you are proffering Google Translate as an example I'm assuming not.
What would Google do?
What the above URL does is to ask the server-side to fetch the wikipedia page and return it so that the iframe can display it - but to the iframe this page appears to be hosted on translate.google.com rather than wikipedia. This means that the iframe stays within the same origin as the parent window, and means that JavaScript can be used to edit or modify the page within the iframe.
next problem....
Rewrite the proxied content
Basically what I'm saying is that this can't be achieved with just HTML and client-side JavaScript - you need to have something to help from the server-side i.e. PHP, Python, Ruby, Lisp, Node.. and so on. This script will be responsible for making sure the proxied page appears/renders correctly e.g. you will have to make sure relative links to content/images/css on the original server are not broken (you can use the base tag or physically rewrite relative links). There are also many sites that would see this as an illegal use of their site, as per their site's terms of use and so should be black listed from your service.
final problem..?
Prevent the user from breaking away from your proxy
Once you have your proxy script, you can then use an iframe (please avoid using old framesets), and a bit of JavaScript magic that onload or ondomready of the iframe rewrites all of the links, forms and buttons in the page. This is so that when clicked or submitted, they post to your proxy script rather than the original destination. This rewrite code would also have to send the original destination to your proxy script some how - like u in the Google translate URL. Once you've sorted this, it will mean your iframe will reload with the new destination content, but - all importantly - your iframe will stay on the same domain.
too many problems!
If it were me, personally, I'd rethink your strategy
Overall this is not a simple task, and it isn't 100% fullproof either because there are many things that will cause problems:
Certain sites are designed to break out of frames.
There are ways a user can navigate from a page that can not be easily rewritten i.e. any navigation powered by JavaScript.
Certain pages are designed to break when served up from the wrong host.
Sites that do this kind of 'proxying' of other websites can get into hot water with regards to copyright and usage.
The reason why Google can do it is because they have a lot of time, money and resources... oh and a great deal of what Google translate does is actually handled on the server-side - not in JavaScript.
suggestions
If you are looking for tracking users navigating through your own site:
Use Google Analytics.
Or implement a simple server-side tracking system using cookies.
If you are looking to track users coming to your site and then travelling on to the rest of the world wide web:
Give up, web technologies are designed to prevent things like this.
Or join an online marketing company, they do their best to get around the prevention of things like this.

add a javascript function to your second frame -
<frame id="dataframe" src="frame_a.htm" onload="load()">
let the text box have an id - say "test"
function load()
{
document.getElementById('test').value=document.getElementById('dataframe').src
}

Looking for a javascript that will force/redirect child page into iframe found in parent page

im new here new in programming. I hope you can help me :)
I am using Iframe for a project. Ive read about Iframes and I know its not the best choice.
Unfortunately I cant find another replacement for it and make it work the way I wish.
Here is my problem:
I have an index.html page, which holds a main Iframe. I have external links on same server, e.g page1.html page2.html page3.html.... what need is, prevent direct access to e.g page1 through search engines and load page1 content into index.html iframe.
I came across many scripts, redirecting to index.html and load child page into Iframe, the issue is about its ugly url link in the browser. e.g
""domainname/index.html?domainname/page1.html""
This bothers me because I need to access pages with simple url like e.g "domainname/page1" but if a user type it and click "go" it will convert to ""domainname/index.html?domainname/page1.html""
I found another choice, but I dont know how to implement it the way i need it, i.e access sub-domains with simple slash (domainname/content) here it the link:
http://www.hashbangcode.com/blog/using-jquery-load-content-page-without-iframe-536.html

Have you considered using a robots.txt file to instruct the search engine crawlers to ignore the pages? Saves you a lot of trouble and lets you build the site without such contrivances.

Have you checked out using robots.txt? This could be used to prevent browsers to avoid pages you do not wish to appear in search results.

Sandboxing Javascript code

I am working on a game in Javascript, and I would like to be able to include a modding API. How can I allow a developer to execute arbitrary code using my API while keeping them from doing malicious activities (stealing cookies, redirecting to a malicious site)?

There's a project by Google that aims to allow you to do something like this.

I'm working on something like this and my solution was to run the script-ables inside an iFrame that points to a subdomain (http://bar.foo.com) instead of the main site (http://foo.com). Input is provided to the script via url #fragment#identifiers and output is provided through the URL fragment identifier of a nested, invisible iFrame pointing back at the original name.
Remember, you can set a child frame's URL even if you can't see it, and you can always check a frame's specific URL if it's on the same domain.

Javascript iFrame Limitations

I know that, for security reasons, javascript can't read the contents of an iframe if it belongs to a different domain. This makes sense, given that the entire page could be an iframe with snooping scripts outside of the frame.
The question is - are there equal limitations in the other direction? Can javascript within an iframe (from a different domain) read and manipulate the dom in its parent window?
Thanks!

You can't.
This would be a security hole. Now that everyone is crazy adding facebook iframes to their sites, imagine if javascript from FB could interact with your page ;)
Anyway, i set up a small example, and got the same origin warning when i tried to get a parent's div from inside the iframe (which was in another domain)

If you want to use this in a two domains that you own (not trying to attack anyone) you can do that using ajax as described Here.