Export a style to Javascript?

Comments

• stonecrusher

  August 2018 edited August 2018

  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
• N؜am

  August 2018 edited August 2018

  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);
  }
  }}
  
  

  ---

  
  
  
  
  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
• wOxxOm

  August 2018

  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);
  }
  
• N؜am

  August 2018

  @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 !
• decembre

  February 2019 [?]

  Good info:
  Thanks!
  Ps:
  It's time to find a way to simply post our userstyles directly to greasyfork without use userstyles.org (too buggy).