57

I'm making a Greasemonkey script and would like to open a new tab which will not display a URL but some HTML that is part of the script. So basically I want to do something like this (which is obviously not working):

window.open('<html><head></head><body></body></html>');
or
GM_openInTab('<html><head></head><body></body></html>');

Any hints are welcome!

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
kasper Taeymans
  • 6,950
  • 5
  • 32
  • 51
  • I think it should be possible to do window.open('nonexistingURL'). A new tab will open with a browsers default "page not found". It should be possible to run GM scripts on the non existing url. I'll try that... – kasper Taeymans May 13 '12 at 16:44

4 Answers4

101

You can do this:

var newWindow = window.open();

and then do

newWindow.document.write("ohai");

aL3891
  • 6,205
  • 3
  • 33
  • 37
  • Does not work for me, new tab is opened but it’s empty with about:blank in address line :-(. – Blackhex Oct 26 '12 at 11:51
  • I think this translates to a call of `window.open` on the underlying (unsafe) browser window, which would therefore leave your newly-opened window accessible to script on the page you're viewing. (That's why there's a `GM_openInTab` function after all, to prevent this). – Doin Sep 07 '14 at 10:53
  • 1
    No, forget what I said above. It's actually a known bug in GreaseMonkey: GM scripts treat any attempt to access an empty window as a same-origin security policy violation (which they shouldn't). – Doin Sep 07 '14 at 22:02
  • 1
    Alternatively, `newWindow.document.body.innerHTML = 'ohai';` would work as well. – Pat Migliaccio Aug 30 '17 at 16:41
  • 1
    Chrome consider it as a pop-up, make sure to allow it (see icon on the right side of the address bar). – Ambroise Rabier Jan 11 '19 at 11:11
  • when I use this, opening a window when it start to download a file, the document is reset – Tormy Van Cool Aug 08 '19 at 14:55
  • This demo(https://ahuigo.github.io/local-jsfiddle/fiddle.html) shows open page in new tab. – ahuigo Jul 19 '23 at 04:06
  • Works in 2023 (Chrome 115.0.5790.98) – Jerther Jul 21 '23 at 18:50
18

April 2021 Edit: This answer is obsolete now. Chrome banned loading data URIs into the top window, and the iframe solution doesn't work for me in Firefox.

Original answer: If the other answer gives you Error: Permission denied to access property "document", see this question about how to handle same-origin policy problems, or this one.

Or, quick and dirty, use a data URI:

var html = '<html><head></head><body>ohai</body></html>';
var uri = "data:text/html," + encodeURIComponent(html);
var newWindow = window.open(uri);
Noumenon
  • 5,099
  • 4
  • 53
  • 73
  • 1
    Seldom needed, and in most situations there are better ways to troubleshoot "Permission denied to access property document" errors: http://stackoverflow.com/questions/7995223/, http://stackoverflow.com/questions/22481340/, etc. – paulsm4 Apr 02 '16 at 22:04
  • 1
    I edited your correct suggestions into my answer, since the top answer creates this situation for some, and it's too much for a comment. – Noumenon Apr 03 '16 at 00:22
  • Is there a limitation for the length of the data URI? – S. Doe Aug 22 '20 at 09:26
  • 1
    I get the following error when I use your answer: "Not allowed to navigate top frame to data URL" – JCollier Apr 05 '21 at 00:57
  • 1
    Thanks @JCollier, I did some research and marked the answer as obsolete. – Noumenon Apr 05 '21 at 02:12
0

I am putting this here just in case anyone will need this. I have made a way to solve this problem, i created a little website (https://tampermonkeykostyl.dacoconutnut.repl.co) that you can give html to in the hash! Example: (you might need to middle click the url for it to actually open in new tab)

// get url
var el = document.getElementById("url");

// make html
var HTML = `
<h1>hi</h1>
if you can see this then cool <br>
<i>this should be italic</i> and <b>this should be bold</b>
`;

// insert html after the link to demonstrate
document.body.insertAdjacentHTML("beforeend", HTML); // https://stackoverflow.com/a/51432177/14227520

// set url href
el.href = "https://tampermonkeykostyl.dacoconutnut.repl.co/#" + encodeURI(HTML);

// make it open in new tab
el.target = "_blank";
<a id="url">Click here to display following HTML in a link (see js):</a>
dacoconutchemist
  • 11
  • 1
  • 4
-2

Let's say you have a .html file locally stored. What you can do is this:

var newWindow = window.open();
newWindow.document.location.href = "/path/to/html/file";
Orestis Zekai
  • 897
  • 1
  • 14
  • 29
  • No, they can't because (a) They don't have an HTML file locally stored and (b) If they did, that would be a URL relative to the site GreaseMonkey was running on. – Quentin Apr 16 '19 at 15:47