Export a style to Javascript?

edited August 11 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 https://mail.google.com/tasks/canvas
// @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 stackoverflow.com but no answer from on their yet, Is someone had tried for this work or any clue for solve this matter?

Comments

  • edited August 11 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 https://userstyles.org/styles/userjs/152471/better-google-tasks.user.js
  • edited August 11 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 stackoverflow.com, 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 https://mail.google.com/tasks/canvas
    // ==/UserScript==

    var targetFrame = document.querySelector("iframe[src='about:blank']");
    document.querySelector("iframe[src='about:blank']").onload = function() {
    if (targetFrame) {
    addStyleToFrame(
    `* {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;
    targ.appendChild(newNode);
    }
    }}




    image

    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    https://mail.google.com/tasks/canvas
    // @run-at   document-start
    // ==/UserScript==
    
    const css = `
      * {color: red !important}
    `;
    
    addStyle(css);
    
    new MutationObserver((_, observer) => {
      const iframe = document.getElementsByTagName('iframe')[0];
      if (iframe) {
        observer.disconnect();
        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;
      doc.documentElement.appendChild(el);
    }
    
  • @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 !
Sign In or Register to comment.