Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at
Changing your Avatar.
The only way to currently change a forum avatar is through The email address used for your account must be one of the email addresses that is registered to your Gravatar account.

Export a style to Javascript?

edited August 2018 in Style Development Chrome
I attempt to move a style Better Google tasks to Tempermonkey on Chrome, the theme is for a site Google tasks, which formed as nothing inside on html, but all contents are inside on iframe[src="about:blank"], which seem like the not changeable code as like the other Chrome's built in pages.

However, with chrome extension "stylus" can change the Contents of the Google tasks as like the other general sites. So I assume it's the pure matter of javascript for make it to perform.

// ==UserScript==
// @name test
// @match
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle ( `* {color:red!important}` );

I could find a way to modify CSS with javascript by searching on Google as like above code, which not working on iframe[src="about:blank"], to enhance this code I'm looking trough scripts of "stylus" from my local file however no clue.
I've asked on but no answer from on their yet, Is someone had tried for this work or any clue for solve this matter?


  • edited August 2018 Firefox
    On every style page there is a link somewhere at the bottom "Install style as userscript" which links to the script written as javascript.

    In you case, it's
  • edited August 2018 Chrome
    Thanks @stonecrusher ! however, the code is not working with Tempermonkey extension though. probably it's because the contents are covered under iframe[src="about:blank"]

    As I don't know how to deal with Javascript, by keep asking on, I could get code like below, but still not functioning 100% (it sometimes do not load the css value)

    // ==UserScript==
    // @name _Style iframe with src="about:blank"
    // @match
    // ==/UserScript==

    var targetFrame = document.querySelector("iframe[src='about:blank']");
    document.querySelector("iframe[src='about:blank']").onload = function() {
    if (targetFrame) {
    `* {color: red !important}`, targetFrame

    function addStyleToFrame(cssStr, frmNode) {
    var D = frmNode.contentDocument;
    var newNode = D.createElement('style');
    newNode.textContent = cssStr;

    var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;


    it's the clip of the test with that code. every time refreshing the site by pressing F5 and shift+F5, the result changes. :0
  • iframe element isn't present in the server response according to devtools network inspector, which means it's added by the page script, which means you need to detect this moment instead of hoping that Tampermonkey runs your script at a good time. The actual moment depends on what the page script does e.g. it may fetch additional data from server. You can use MutationObserver to detect this moment:

    // ==UserScript==
    // @name     tasks
    // @match
    // @run-at   document-start
    // ==/UserScript==
    const css = `
      * {color: red !important}
    new MutationObserver((_, observer) => {
      const iframe = document.getElementsByTagName('iframe')[0];
      if (iframe) {
        iframe.addEventListener('load', () => addStyle(css, iframe), {once: true});
    }).observe(document, {subtree: true, childList: true});
    function addStyle(css, frame = window) {
      const doc = frame.contentDocument || frame.document;
      const el = document.createElement('style');
      el.textContent = css;
  • @wOxxOm ohh, it's nice and perfect! thanks for the help! it seem completely no-delay as only observe the iframe is exist! I really appreciate thanks !
  • Good info:
    It's time to find a way to simply post our userstyles directly to greasyfork without use (too buggy).

Sign In or Register to comment.