We Keep Coding

How to execute a content script every time a page loads?

I'm writing a Chrome extension that provides a content script to any page on GitHub (i.e. any URL matching https://github.com/*).
I'm simply trying to log something to the console each time a page on GitHub loads, like so:
window.onload = function() {
console.log("LOAD");
};
This listener function is executed the very first time a GitHub page is loaded, but if the user navigates to other pages on GitHub from there (by clicking on links or through other means), it doesn't fire. Why? :(
Steps to reproduce:
Open any repository's page on GitHub (example). You should see the message logged to the console.
Click on any link on that page. When the new page is loaded, no message is logged. :(
How do I solve this?

It seems that GitHub uses AJAX (along with history.pushState) to load some parts of the site, so onload will fire only when the page truly loads, but not when content is loaded via AJAX.
Since GitHub uses pushState to change the URL when AJAX content is done loading, you can detect when that happens, and execute your code.
There isn't actually a native event right now that fires when pushState is used, but there's this little hack:
(function(history){
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
return pushState.apply(history, arguments);
}
})(window.history);
So, run that, and then, instead of window.onload, you can do:
history.onpushstate = function () {
console.log("LOAD");
};
Not ALL of GitHub page's load this way (AJAX + pushState), so you'd have to use both, window.onload and history.onpushstate.
Also, you should use window.addEventListener('load', fn); instead of window.onload, since you don't know if GitHub's code could be overwriting window.onload.

iframe contents disappear when manipulated by mootools

I've got a third party (mootools) library creating tabs and I've got google double click for publishers (dfp) creating ads. dfp creates the ads in an iframe then the tabs script grabs an anchestor of the iframe and 'messes' with it to create the tabs. The contents of the iframe gets lost in the process.
I'm looking for a way of coping with this (tried firing the dfp stuff after the tabs had loaded but then the google scripts crashed).
The iframe is from a different domain to the parent window so anything which tries to do stuff to elements within the iframe is going to fail.
addTab: function(text, title, content) {
var grab = $(content);
var container = (grab || new Element('div'))
.setStyle('display', 'none')
.addClass(this.options.classContainer);
this.wrapper.adopt(container);
var pos = this.tabs.length;
var evt = (this.options.hover) ? 'mouseenter' : 'click';
var tab = {
container: container,
toggle: new Element('li').grab(new Element('a', {
href: '#',
title: title
}).grab(
new Element('span', {html: text})
)).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)
};
if (!grab && $type(content) == 'string') tab.url = content;
this.tabs.push(tab);
return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);
},

Whenever an iframe or an ancestor of it are disconnected from the DOM, the iframe's contents will be cleared and the iframe will reload when it or its ancestor is reinserted back. This anoying behaviour occurs in Firefox and Webkit, but I think the iframes won't reload on IE.
As a workaround, you will need to find a way to reorder your code so that the iframe is only added after the tab script is done doing its thing to the container.
Chrome also apparently has an option that causes the iframe to not reload if you move it with adoptNode instead of apendChild but I do not believe it is cross-browser.
for more, see this similar question: How to move an iFrame in the DOM without losing its state?

Change src of iframe from a popup window

In my web application, the user can open a popup window to select an edit an object. When the user presses OK on the popup, it's supposed to update the src of an iframe in the parent window (and of course reload the iframe) according to which object was selected.
My function (in the parent window) is:
function dismissEditPopup(win, newId) {
newId = html_unescape(newId);
var elem_iframe = document.getElementById("iframe_id");
// (*) this line doesn't work
elem_iframe.src = '/view_object/' + newId;
elem_iframe.contentWindow.location.reload();
win.close();
}
This function is called from a popup window, which contains a script:
<script type="text/javascript">
opener.dismissEditPopup(window, "hash_of_new_object");
</script>
The problem is that the line (*) fails silently. In the inspector in both Firefox 3.6 and Google Chromium, I see that the src attribute of the iframe is being updated, but elem_iframe.contentWindow.location.href is unchanged. (If I add a line elem_iframe.contentWindow.location.href = elem_iframe.src;, the assignment is ignored.). There are no errors in the Javascript error console. Strangely, it does work as expected if I assign to elem_iframe.src from the Javascript console.
I am able to change the value of a hidden <input> field in the same way, using document.getElementById("hidden_id").value = newId;.
Everything is served from the same website.
(Similar to Changing iframe src with Javascript, but the answers to that question don't work, presumably because the code is called from a popup.)

Take this line out:
elem_iframe.contentWindow.location.reload();
It's reloading the iframe and the new src is not loaded.

Loading a javascript into HEAD by its chrome url

I am developing a custom plugin for Firefox. For one of the functions in this plugin I have a button which when clicked has to toggle hide/show for another div element. This is achieved by the means of a Javascript function. The function itself is in a file that is packaged in the plugin as well.
Since the div elements are on the browser page I am trying to get the Javascript for this function loaded into the HEAD of the page by using its chrome URL. However, it is not giving the desired result.
Below are snippets of the relevant code:
The actual Javascript that performs the toggle action. The chrome URL for this is: chrome://firefox_extension/content/togglerowz.js If I put this URL in the browser it is able to display the code below.
function toggle(doc) {
var resultBlock = doc.getElementById("RowzFFExtensionDynamicContainer");
var toggleButton = doc.getElementById("RowzFFToggle");
if (resultBlock.style.display == "block") {
resultBlock.style.display = "none";
toggleButton.value = "Maximize";
} else {
resultBlock.style.display = "block";
toggleButton.value = "Minimize";
}
}
Another Javascript that loads this into the browser HEAD. This is triggered by a window load event.
var doc = aEvent.originalTarget;
var togglerowzscript = doc.createElement("script");
togglerowzscript.type = "application/javascript";
togglerowzscript.src = "chrome://firefox_extension/content/togglerowz.js";
var headvar = doc.getElementsByTagName("head")[0];
headvar.appendChild(togglerowzscript);
When the page loads, the following contents are in the HEAD element of the page (as viewed in Firebug):
<script type="application/javascript" src="chrome://firefox_extension/content/togglerowz.js">
Filtered chrome url chrome://firefox_extension/content/togglerowz.js
</script>
When I click the button the error console says toggle is not defined.

Did you whitelist the relevant chrome package as allowing untrusted content to load parts of it? The default setting is to not allow that for various security and privacy reasons. See https://developer.mozilla.org/en/chrome_registration#contentaccessible

Telling when an iframe is on a new URL

I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!

This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.

First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!

You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)

Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.