How can I make a userscript run inside an iframe?
-
2This is a known bug: Greasemonkey issue 2574 states "Greasemonkey 4 as of today only detects navigation events at the top level, so it effectively applies @noframes to every script."– Adam KatzNov 28, 2018 at 23:42
5 Answers
In Greasemonkey (And Tampermonkey and most userscript engines) a script will fire on an iframe automatically if it meets the @include, @exclude, and/or @match directives.
And, a popular question is how to stop Greasemonkey from firing on iframes.
So, if your script had a match like:
@match https://fiddle.jshell.net/*
It would fire on jsFiddle "output" pages whether or not they appeared in an iframe.
If you wanted to fire on a JUST iframed content:
Then you would check the window.self
property.
For example, suppose you had a target page like:
<body>
<h1>I'm some webpage, either same-domain or not.</h1>
<iframe src="//domain_B.com/somePath/somePage.htm">
...
Then you could use a script like:
// ==UserScript==
// @name _Fires specially on domain_B.com iframes
// @match *://domain_B.com/somePath/*
// ==/UserScript==
if (window.top === window.self) {
//--- Script is on domain_B.com when/if it is the MAIN PAGE.
}
else {
//--- Script is on domain_B.com when/if it is IN AN IFRAME.
// DO YOUR STUFF HERE.
}
Important:
With the release of Greasemonkey 4, iframes handling is severely crippled (and many other things are broken, besides).
It still works properly with Tampermonkey, Violentmonkey and just about every other userscript engine.
It is strongly recommended (including by Greasemonkey itself) that you do not use Greasemonkey 4 or later.
-
2
-
1Thanks, @Mathnerd314. Updated the answer. Note that there is a separate tag now for GM4, to distinguish it from GM versions that worked well. Dec 29, 2018 at 23:33
-
1Greasemonkey doesn't seem to recommend that you don't use 4 or later. They are merely informing it breaks backward compatibility. Oct 18, 2020 at 11:23
This is a solution for cases where the iframe
has no location to trigger @include
or @match
.
This works with Greasemonkey 4.
We must wait for each frame to be loaded before we can operate on it. I do this by using waitForKeyElements.js
, which waits for elements matching a given CSS selector, just like looping through the matches in document.querySelectorAll("selector")
, and then applies a given function to the response:
// ==UserScript==
// @include https://blah.example.com/*
// @require https://git.io/waitForKeyElements.js
// ==/UserScript==
function main(where) {
// do stuff here with where instead of document
// e.g. use where.querySelector() in place of document.querySelector()
// and add stylesheets with where.head.appendChild(stylesheet)
}
main(document); // run it on the top level document (as normal)
waitForKeyElements("iframe, frame", function(elem) {
elem.removeAttribute("wfke_found"); // cheat wfke's been_there, use our own
for (let f=0; f < frames.length; f++) {
if (!frames[f].document.body.getAttribute("been_there")) {
main(frames[f].document);
frames[f].document.body.setAttribute("been_there", 1);
}
}
});
Note that the selected element is just a placeholder indicating that an iframe
has loaded. We remove the "been there" tracker from waitForKeyElements
because the frame may be loaded again later (we can't just use that iframe
because its contents are loaded elsewhere).
When we know a frame has loaded, we loop through each frame and look for our marker, an HTML attribute in the frame's body
called been_there
(like <body been_there="1">
). If it is missing, we can run our main()
function on the frame's document. When we're done, we add the been_there
attribute so we don't get triggered again.
Note that if you're making a chrome extension for your userscript, you also need to add "all_frames": true
to your manifest or your extension won't work on iframes.
Example from manifest file:
"content_scripts": [
{
"matches": ["*://*/*"],
"all_frames": true,
"js":["dont.js"],
"run_at":"document_start"
}
]
Example use case: https://github.com/NavinF/dont
The solution from https://stackoverflow.com/a/55837286/12469007 wasn't working for me so I have changed it a bit. It works with Greasemonkey 4.10.
// ==UserScript==
// @include https://blah.example.com/*
// @require https://git.io/waitForKeyElements.js
// ==/UserScript==
function main(where) {
// do stuff here with where instead of document
// e.g. use where.querySelector() in place of document.querySelector()
// and add stylesheets with where.head.appendChild(stylesheet)
}
main(document); // run it on the top level document (as normal)
waitForKeyElements("iframe, frame", function(elem) {
elem.addEventListener("load", function () {
elem.removeAttribute("wfke_found");
});
main(elem.contentDocument);
});
The big change is that it now works even when navigating an iframe.
-
1I can confirm this works with Tampermonkey for Goggle Chrome too and looks much more elegant comparing to the original answer. A big thanks, this was really helpful! Jan 17, 2021 at 9:08
iframe.contentWindow.document
allows obtaining iframe content in FireMonkey, e.g.:
const iframeDocument = document.getElementById('iframe_id').contentWindow.document;
const iframeAnchors = iframeDocument.evaluate(
'//a',
iframeDocument,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null);