Not running on about:blank

[anka-213]

In Greasemonkey you can run scripts on about:blank if you include it explicitly. However that does not seem to work in Tampermonkey. The following sample works with Greasemonkey but not with Tampermonkey.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      about:blank
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    console.log("Running userscript...");
})();

[tophf]

Chrome has a whitelist of URL schemes allowed for extensions: http, https, file, ftp and * to denote any of the listed.

[anka-213]

@tophf So you are saying that it is impossible?

[tophf]

I'm just stating the facts. Anyway, it's interesting why would you want to abuse about:blank in Chrome?

[anka-213]

I wanted to use it to build a landingpage from scratch for a userscript. It modifies other sites, but I also want a page that is purely it's own.

But if it can't be done, I'll find another solution. No problem. I just wanted to check. :)

[anka-213]

I'll probably publish a page somewhere and let the script modify that instead.

[mold]

I'd still like to be able to run userscripts in about:blank.

Wouldn't this solve the problem: https://developer.chrome.com/extensions/content_scripts#match_about_blank

[anka-213]

@mold Yes, that looks to me like it should solve the problem. Out of curiosity: What is your use case?

[Hypnos3]

Hallo, I have also the problems to run scripts on about:blank.

The use-case is, that a webpage opens a new Window with window.open('','...','toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, directories=yes, status=yes');

and puts html code into that opening window.

This opens a page with "about.blank" and I wan't to modify this page.

Knows anybody what I needs to do?

[Trung0246]

Hi, I'm not sure if the @include about:blank still or not, but seems like it isn't?

[TomKrcmar]

Also interested in matching about:blank. I want to modify the background color to black so I can leave a low-RAM page open at night while using my other monitor, and not have it beaming white light into my face.

This is in lieu of my just discovering that Custom.css user agent styling was removed from Chrome entirely: https://stackoverflow.com/questions/21207474/custom-css-has-stopped-working-in-32-0-1700-76-m-google-chrome-update

Tampermonkey would have been my next best solution:

// ==UserScript==
// @name         Black Background
// @match        about:blank
// ==/UserScript==
(function() {
    'use strict';
    document.body.style.background = 'black';
})();

I suppose I could simply not use about:blank but bookmark a local html file instead as a workaround. Just my two cents, anyway.

[7nik]

@TomKrcmar those Custom.css and workarounds seem to be used to style the DevTools page but not about:blank. You can choose themes in the setting or on the blank page in the bottom right corner there is a customize button to set up the blank page appears.

[TomKrcmar]

those Custom.css and workarounds seem to be used to style the DevTools page but not about:blank.

I think Custom.css was injected on all pages as an override to your User Agent Stylesheet, but had selectors for dev tools as well.

You can choose themes in the setting

I have a dark theme selected already, but sadly my about:blank is still white.

on the blank page in the bottom right corner there is a customize button to set up the blank page appears.

Sorry, where's this customize button? My about:blank is completely blank, no button.

[7nik]

It seems like the button is there if you set the search engine to Google.

[TomKrcmar]

@7nik Oh I see what you're talking about, but that's on about:newtab and the page I'm talking about is about:blank.

Either way, I support the ability to have Tampermonkey target these about:* pages for utility and customization purposes.

[theowenyoung]

I also need this one feature.

I'm working on a translation script, some web page use an inline iframe, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <article>
      <p>This is a parent iframe</p>
    </article>
    <iframe src="frame.html" title="This is a child iframe"></iframe>
    <iframe
      srcdoc="<html><body><p>This is inline child frame,</p></html>"
    ></iframe>
  </body>
</html>

now, I can only inject to the first iframe, not the second inline iframe. so I can not translatae that.

My script also offer a extension version, on the extension manifest.json, I use :

"content_scripts": [
    {
      "matches": [
        "<all_urls>",
        "file:///*",
        "*://*/*"
      ],
      "js": [
        "content_script.js"
      ],
      "css": ["styles/inject.css"],
      "run_at": "document_end",
      "all_frames": true,
      "match_about_blank": true
    }
  ]
}

This can work perfectly.

[bhazzard]

I too have a need for this in order to have standalone user interfaces provided by userscripts.

[7nik]

It seems people mostly want to open a page to display some info or userscript settings. But I don't see why they cannot do this on the current page (you can wrap everything into Shadow DOM to isolate it from the page).

But I tried to make a workaround:

// ==UserScript==
// @name         Open a custom page
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       7nik
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_openInTab
// ==/UserScript==

const html = `<html>
    <head>
        <title>My Title</title>
        <style>h1{color:pink}</style>
    </head>
    <body>
        <h1>My page</h1>
        <p>This is my page</p>
        <button id="btn">Action</button>
        <script>
            document.getElementById("btn").addEventListener("click", () => {alert("test"); window.opener?.postMessage("test"); });
            window.addEventListener("message", (ev) => console.log(ev.data));
        </script>
    </body>`;

GM_registerMenuCommand("open page", () => {
    // (1)
    const blob = new Blob([html], { type: "text/html" });
    const link = URL.createObjectURL(blob);
    const w = window.open(link, "", "width=500,height=400");
    URL.revokeObjectURL(link);
    // comunication
    window.addEventListener("message", (ev) => {
        console.log(ev.data);
        w.postMessage("Message was received");
    });

    // (2)
    // to open only in a tab, no comunication
    // GM_openInTab("data:text/html,"+html, { active: true });

    // (3)
    // re-using the current page
    // document.documentElement.innerHTML = html;
    // const scripts = document.querySelectorAll("script");
    // for (let script of scripts) {
    //     const sc = document.createElement("script");
    //     for (let attr of script.attributes) {
    //         sc.setAttribute(attr.name, attr.value);
    //     }
    //     sc.textContent = script.textContent;
    //     script.parentElement.replaceChild(sc, script);
    // }
});

The two first approaches are similar to iframe with srcdoc. But userscripts cannot run on such pages (and there is no localStorage access), though the first approach can use window messaging.

The third approach just overrides the current page.

So, if I really wanted to open a custom page, I'd open https://example.com and use the third approach to access GM_API.

[SmartManoj]

My workaround - created an extension. manifest.json

{
  "manifest_version": 3,
  "name": "About Blank Alert",
  "version": "1.0",
  "description": "Alerts when an about:blank page is opened",
  "permissions": ["tabs", "scripting"],
  "action": {

  },
  "background": {
    "service_worker": "background.js"
  },
   "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
       "match_about_blank": true
    }
  ]
}

content.js

if (window.location.href === "about:blank") {
    alert('From content.js')
}