Refactor: rewrite style injector (#664)

* Refactor: style injector/docRootObserver/docRewriteObserver

* Fix: minor

* Fix: disabled state

* Fix: use evade

* Fix: apply.js is broken in our pages

* Fix: transition patch is broken

* Fix: also check elements after the last userstyle

* Fix: remove outdated FIXME. styleInjector.toggle now toggle all styles

* Fix: call Object.keys twice

* Add a fixme

* Fix: typo

* Add a fixme

* Fix: don't argue for mutations generated by other extensions

content/apply.js

@@ -1,5 +1,5 @@
 /* eslint no-var: 0 */
-/* global msg API prefs */
+/* global msg API prefs createStyleInjector */
 /* exported APPLY */
 'use strict';
 
@@ -8,20 +8,31 @@
 const APPLY = (() => {
   const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN;
   const STYLE_VIA_API = !chrome.app && document instanceof XMLDocument;
-  var ID_PREFIX = 'stylus-';
+  const IS_OWN_PAGE = location.protocol.endsWith('-extension:');
-  var ROOT;
-  var isOwnPage = location.protocol.endsWith('-extension:');
-  var disableAll = false;
-  var styleElements = new Map();
-  var disabledElements = new Map();
-  var docRewriteObserver;
-  var docRootObserver;
   const setStyleContent = createSetStyleContent();
+  const styleInjector = createStyleInjector({
+    compare: (a, b) => a.id - b.id,
+    setStyleContent,
+    onUpdate: onInjectorUpdate
+  });
+  const docRootObserver = createDocRootObserver({
+    onChange: () => {
+      if (styleInjector.outOfOrder()) {
+        styleInjector.sort();
+        return true;
+      }
+    }
+  });
+  const docRewriteObserver = createDocRewriteObserver({
+    onChange: () => {
+      docRootObserver.evade(styleInjector.sort);
+    }
+  });
   const initializing = init();
 
   msg.onTab(applyOnMessage);
 
-  if (!isOwnPage) {
+  if (!IS_OWN_PAGE) {
     window.dispatchEvent(new CustomEvent(chrome.runtime.id, {
       detail: pageObject({method: 'orphan'})
     }));
@@ -35,21 +46,33 @@ const APPLY = (() => {
     prefs.subscribe(['exposeIframes'], updateExposeIframes);
   }
 
+  function onInjectorUpdate() {
+    if (!IS_OWN_PAGE && styleInjector.list.length) {
+      docRewriteObserver.start();
+      docRootObserver.start();
+    } else {
+      docRewriteObserver.stop();
+      docRootObserver.stop();
+    }
+    updateCount();
+    updateExposeIframes();
+  }
+
   function init() {
     if (STYLE_VIA_API) {
       return API.styleViaAPI({method: 'styleApply'});
     }
     return API.getSectionsByUrl(getMatchUrl())
-      .then(result => {
+      .then(result =>
-        ROOT = document.documentElement;
+        applyStyles(result)
-        applyStyles(result, () => {
+          .then(() => {
             // CSS transition bug workaround: since we insert styles asynchronously,
             // the browsers, especially Firefox, may apply all transitions on page load
-          if ([...styleElements.values()].some(n => n.textContent.includes('transition'))) {
+            if (styleInjector.list.some(s => s.code.includes('transition'))) {
               applyTransitionPatch();
             }
-        });
+          })
-      });
+      );
   }
 
   function pageObject(target) {
@@ -84,7 +107,7 @@ const APPLY = (() => {
 
     function checkPageScript() {
       if (!ready) {
-        ready = CHROME || isOwnPage || Event.prototype.getPreventDefault ?
+        ready = CHROME || IS_OWN_PAGE || Event.prototype.getPreventDefault ?
           Promise.resolve(false) : injectPageScript();
       }
       return ready;
@@ -190,23 +213,21 @@ const APPLY = (() => {
 
     switch (request.method) {
       case 'styleDeleted':
-        removeStyle(request.style);
+        styleInjector.remove(request.style.id);
         break;
 
       case 'styleUpdated':
-        if (request.codeIsUpdated === false) {
+        if (request.style.enabled) {
-          applyStyleState(request.style);
-        } else if (request.style.enabled) {
           API.getSectionsByUrl(getMatchUrl(), request.style.id)
             .then(sections => {
               if (!sections[request.style.id]) {
-                removeStyle(request.style);
+                styleInjector.remove(request.style.id);
               } else {
                 applyStyles(sections);
               }
             });
         } else {
-          removeStyle(request.style);
+          styleInjector.remove(request.style.id);
         }
         break;
 
@@ -238,20 +259,11 @@ const APPLY = (() => {
     }
   }
 
-  function doDisableAll(disable = disableAll) {
+  function doDisableAll(disableAll) {
-    if (!disable === !disableAll) {
-      return;
-    }
-    disableAll = disable;
     if (STYLE_VIA_API) {
       API.styleViaAPI({method: 'prefChanged', prefs: {disableAll}});
     } else {
-      Array.prototype.forEach.call(document.styleSheets, stylesheet => {
+      styleInjector.toggle(!disableAll);
-        if (stylesheet.ownerNode.matches(`style.stylus[id^="${ID_PREFIX}"]`)
-        && stylesheet.disabled !== disable) {
-          stylesheet.disabled = disable;
-        }
-      });
     }
   }
 
@@ -266,7 +278,7 @@ const APPLY = (() => {
   }
 
   function updateExposeIframes() {
-    if (!prefs.get('exposeIframes') || window === parent || !styleElements.size) {
+    if (!prefs.get('exposeIframes') || window === parent || !styleInjector.list.length) {
       document.documentElement.removeAttribute('stylus-iframe');
     } else {
       fetchParentDomain().then(() => {
@@ -288,167 +300,47 @@ const APPLY = (() => {
       API.styleViaAPI({method: 'updateCount'}).catch(msg.ignoreError);
       return;
     }
-    let count = 0;
-    for (const id of styleElements.keys()) {
-      if (!disabledElements.has(id)) {
-        count++;
-      }
-    }
     // we have to send the tabId so we can't use `sendBg` that is used by `API`
     msg.send({
       method: 'invokeAPI',
       name: 'updateIconBadge',
-      args: [count]
+      args: [styleInjector.list.length]
     }).catch(console.error);
   }
 
-  function applyStyleState({id, enabled}) {
+  function rootReady() {
-    const inCache = disabledElements.get(id) || styleElements.get(id);
+    if (document.documentElement) {
-    const inDoc = document.getElementById(ID_PREFIX + id);
+      return Promise.resolve();
-    if (enabled) {
-      if (inDoc) {
-        return;
-      } else if (inCache) {
-        addStyleElement(inCache);
-        disabledElements.delete(id);
-      } else {
-        return API.getSectionsByUrl(getMatchUrl(), id)
-          .then(applyStyles);
     }
-    } else {
+    return new Promise(resolve => {
-      if (inDoc) {
-        disabledElements.set(id, inDoc);
-        docRootObserver.evade(() => inDoc.remove());
-      }
-    }
-    updateCount();
-  }
-
-  function removeStyle({id}) {
-    const el = document.getElementById(ID_PREFIX + id);
-    if (el) {
-      docRootObserver.evade(() => el.remove());
-    }
-    disabledElements.delete(id);
-    if (styleElements.delete(id)) {
-      updateCount();
-    }
-  }
-
-  function applyStyles(sections, done) {
-    if (!Object.keys(sections).length) {
-      if (done) {
-        done();
-      }
-      return;
-    }
-
-    if (!document.documentElement) {
       new MutationObserver((mutations, observer) => {
         if (document.documentElement) {
           observer.disconnect();
-          applyStyles(sections, done);
+          resolve();
         }
       }).observe(document, {childList: true});
-      return;
+    });
   }
 
-    if (docRootObserver) {
+  function applyStyles(sections) {
-      docRootObserver.stop();
+    const styles = Object.values(sections);
-    } else {
+    if (!styles.length) {
-      initDocRootObserver();
+      return Promise.resolve();
-    }
-    const pending = [];
-    for (const section of Object.values(sections)) {
-      pending.push(applySections(section.id, section.code.join('')));
-    }
-    docRootObserver.firstStart();
-
-    if (!isOwnPage && !docRewriteObserver && styleElements.size) {
-      initDocRewriteObserver();
-    }
-
-    updateExposeIframes();
-    updateCount();
-    if (done) {
-      Promise.all(pending).then(done);
-    }
-  }
-
-  function applySections(id, code) {
-    let el = styleElements.get(id) || document.getElementById(ID_PREFIX + id);
-    if (el && CHROME < 3321) {
-      // workaround for Chrome devtools bug fixed in v65
-      el.remove();
-      el = null;
-    }
-    if (!el) {
-      if (document.documentElement instanceof SVGSVGElement) {
-        // SVG document style
-        el = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-      } else if (document instanceof XMLDocument) {
-        // XML document style
-        el = document.createElementNS('http://www.w3.org/1999/xhtml', 'style');
-      } else {
-        // HTML document style; also works on HTML-embedded SVG
-        el = document.createElement('style');
-      }
-      el.id = ID_PREFIX + id;
-      el.type = 'text/css';
-      // SVG className is not a string, but an instance of SVGAnimatedString
-      el.classList.add('stylus');
-      addStyleElement(el);
-    }
-    let settingStyle;
-    if (el.textContent !== code) {
-      settingStyle = setStyleContent(el, code);
-    }
-    styleElements.set(id, el);
-    disabledElements.delete(id);
-    return Promise.resolve(settingStyle);
-  }
-
-  function addStyleElement(newElement) {
-    if (!ROOT) {
-      return;
-    }
-    let next;
-    const newStyleId = getStyleId(newElement);
-    for (const el of styleElements.values()) {
-      if (el.parentNode && !el.id.endsWith('-ghost') && getStyleId(el) > newStyleId) {
-        next = el.parentNode === ROOT ? el : null;
-        break;
-      }
-    }
-    if (next === newElement.nextElementSibling) {
-      return;
-    }
-    const insert = () => {
-      ROOT.insertBefore(newElement, next || null);
-      if (disableAll) {
-        newElement.disabled = true;
-      }
-    };
-    if (docRootObserver) {
-      docRootObserver.evade(insert);
-    } else {
-      insert();
     }
+    return rootReady().then(() =>
+      docRootObserver.evade(() =>
+        styleInjector.addMany(
+          styles.map(s => ({id: s.id, code: s.code.join('')}))
+        )
+      )
+    );
   }
 
   function replaceAll(newStyles) {
-    const oldStyles = Array.prototype.slice.call(
+    styleInjector.replaceAll(
-      document.querySelectorAll(`style.stylus[id^="${ID_PREFIX}"]`));
+      Object.values(newStyles)
-    oldStyles.forEach(el => (el.id += '-ghost'));
+        .map(s => ({id: s.id, code: s.code.join('')}))
-    styleElements.clear();
+    );
-    disabledElements.clear();
-    applyStyles(newStyles);
-    const removeOld = () => oldStyles.forEach(el => el.remove());
-    if (docRewriteObserver) {
-      docRootObserver.evade(removeOld);
-    } else {
-      removeOld();
-    }
   }
 
   function applyTransitionPatch() {
@@ -457,23 +349,23 @@ const APPLY = (() => {
     const className = chrome.runtime.id + '-transition-bug-fix';
     const docId = document.documentElement.id ? '#' + document.documentElement.id : '';
     document.documentElement.classList.add(className);
-    applySections(0, `
+    const el = styleInjector.createStyle('transition-patch');
+    // FIXME: this will trigger docRootObserver and cause a resort. We should
+    // move this function into style-injector.
+    document.documentElement.appendChild(el);
+    setStyleContent(el, `
       ${docId}.${CSS.escape(className)}:root * {
         transition: none !important;
       }
     `)
       .then(() => {
         setTimeout(() => {
-          removeStyle({id: 0});
+          el.remove();
           document.documentElement.classList.remove(className);
         });
       });
   }
 
-  function getStyleId(el) {
-    return parseInt(el.id.substr(ID_PREFIX.length));
-  }
-
   function orphanCheck(e) {
     if (e && e.detail.method !== 'orphan') {
       return;
@@ -483,181 +375,86 @@ const APPLY = (() => {
     }
     // In Chrome content script is orphaned on an extension update/reload
     // so we need to detach event listeners
-    [docRewriteObserver, docRootObserver].forEach(ob => ob && ob.disconnect());
+    styleInjector.clear();
     window.removeEventListener(chrome.runtime.id, orphanCheck, true);
     try {
       msg.off(applyOnMessage);
     } catch (e) {}
   }
 
-  function initDocRewriteObserver() {
+  function createDocRewriteObserver({onChange}) {
     // detect documentElement being rewritten from inside the script
-    docRewriteObserver = new MutationObserver(mutations => {
+    let root;
-      for (let m = mutations.length; --m >= 0;) {
-        const added = mutations[m].addedNodes;
-        for (let n = added.length; --n >= 0;) {
-          if (added[n].localName === 'html') {
-            reinjectStyles();
-            return;
-          }
-        }
-      }
-    });
-    docRewriteObserver.observe(document, {childList: true});
-    // detect dynamic iframes rewritten after creation by the embedder i.e. externally
-    setTimeout(() => {
-      if (document.documentElement !== ROOT) {
-        reinjectStyles();
-      }
-    });
-    // re-add styles if we detect documentElement being recreated
-    function reinjectStyles() {
-      if (!styleElements) {
-        orphanCheck();
-        return;
-      }
-      ROOT = document.documentElement;
-      docRootObserver.stop();
-      const imported = [];
-      for (const [id, el] of styleElements.entries()) {
-        const copy = document.importNode(el, true);
-        el.textContent += ' '; // invalidate CSSOM cache
-        imported.push([id, copy]);
-        addStyleElement(copy);
-      }
-      docRootObserver.start();
-      styleElements = new Map(imported);
-    }
-  }
-
-  function initDocRootObserver() {
-    let lastRestorationTime = 0;
-    let restorationCounter = 0;
     let observing = false;
-    let sorting = false;
+    let timer;
-    let observer;
+    const observer = new MutationObserver(check);
-    // allow any types of elements between ours, except for the following:
+    return {start, stop};
-    const ORDERED_TAGS = ['head', 'body', 'frameset', 'style', 'link'];
 
-    init();
-    return;
-
-    function init() {
-      observer = new MutationObserver(sortStyleElements);
-      docRootObserver = {firstStart, start, stop, evade, disconnect: stop};
-      setTimeout(sortStyleElements);
-    }
-    function firstStart() {
-      if (sortStyleMap()) {
-        sortStyleElements();
-      }
-      start();
-    }
     function start() {
-      if (!observing && ROOT && observer) {
+      if (observing) return;
-        observer.observe(ROOT, {childList: true});
+      // detect dynamic iframes rewritten after creation by the embedder i.e. externally
+      root = document.documentElement;
+      timer = setTimeout(check);
+      observer.observe(document, {childList: true});
       observing = true;
     }
-    }
+
     function stop() {
-      if (observing) {
+      if (!observing) return;
+      clearTimeout(timer);
+      observer.disconnect();
+      observing = false;
+    }
+
+    function check() {
+      if (root !== document.documentElement) {
+        root = document.documentElement;
+        onChange();
+      }
+    }
+  }
+
+  function createDocRootObserver({onChange}) {
+    let digest = 0;
+    let lastCalledTime = NaN;
+    let observing = false;
+    const observer = new MutationObserver(() => {
+      if (digest) {
+        if (performance.now() - lastCalledTime > 1000) {
+          digest = 0;
+        } else if (digest > 5) {
+          throw new Error('The page keeps generating mutations. Skip the event.');
+        }
+      }
+      if (onChange()) {
+        digest++;
+        lastCalledTime = performance.now();
+      }
+    });
+    return {start, stop, evade};
+
+    function start() {
+      if (observing) return;
+      observer.observe(document.documentElement, {childList: true});
+      observing = true;
+    }
+
+    function stop() {
+      if (!observing) return;
+      // FIXME: do we need this?
       observer.takeRecords();
       observer.disconnect();
       observing = false;
     }
-    }
+
     function evade(fn) {
-      const wasObserving = observing;
+      if (!observing) {
-      if (observing) {
+        return fn();
+      }
       stop();
-      }
+      const r = fn();
-      fn();
-      if (wasObserving) {
       start();
-      }
+      return r;
-    }
-    function sortStyleMap() {
-      const list = [];
-      let prevStyleId = 0;
-      let needsSorting = false;
-      for (const entry of styleElements.entries()) {
-        list.push(entry);
-        const el = entry[1];
-        const styleId = getStyleId(el);
-        el.styleId = styleId;
-        needsSorting |= styleId < prevStyleId;
-        prevStyleId = styleId;
-      }
-      if (needsSorting) {
-        styleElements = new Map(list.sort((a, b) => a[1].styleId - b[1].styleId));
-        return true;
-      }
-    }
-    function sortStyleElements() {
-      if (!observing) return;
-      let prevExpected = document.documentElement.lastElementChild;
-      while (prevExpected && isSkippable(prevExpected, true)) {
-        prevExpected = prevExpected.previousElementSibling;
-      }
-      if (!prevExpected) return;
-      for (const el of styleElements.values()) {
-        if (!isMovable(el)) {
-          continue;
-        }
-        while (true) {
-          const next = prevExpected.nextElementSibling;
-          if (next && isSkippable(next)) {
-            prevExpected = next;
-          } else if (
-              next === el ||
-              next === el.previousElementSibling && next ||
-              moveAfter(el, next || prevExpected)) {
-            prevExpected = el;
-            break;
-          } else {
-            return;
-          }
-        }
-      }
-      if (sorting) {
-        sorting = false;
-        if (observer) observer.takeRecords();
-        if (!restorationLimitExceeded()) {
-          start();
-        } else {
-          setTimeout(start, 1000);
-        }
-      }
-    }
-    function isMovable(el) {
-      return el.parentNode || !disabledElements.has(getStyleId(el));
-    }
-    function isSkippable(el, skipOwnStyles) {
-      return !ORDERED_TAGS.includes(el.localName) ||
-        el.id.startsWith(ID_PREFIX) &&
-        (skipOwnStyles || el.id.endsWith('-ghost')) &&
-        el.localName === 'style' &&
-        el.className === 'stylus';
-    }
-    function moveAfter(el, expected) {
-      if (!sorting) {
-        sorting = true;
-        stop();
-      }
-      expected.insertAdjacentElement('afterend', el);
-      if (el.disabled !== disableAll) {
-        // moving an element resets its 'disabled' state
-        el.disabled = disableAll;
-      }
-      return true;
-    }
-    function restorationLimitExceeded() {
-      const t = performance.now();
-      if (t - lastRestorationTime > 1000) {
-        restorationCounter = 0;
-      }
-      lastRestorationTime = t;
-      return ++restorationCounter > 5;
     }
   }
 })();

content/style-injector.js

@@ -0,0 +1,187 @@
+/* exported createStyleInjector */
+'use strict';
+
+function createStyleInjector({compare, setStyleContent, onUpdate}) {
+  const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN;
+  const PREFIX = 'stylus-';
+  // styles are out of order if any of these elements is injected between them
+  const ORDERED_TAGS = new Set(['head', 'body', 'frameset', 'style', 'link']);
+  const list = [];
+  const table = new Map();
+  let enabled = true;
+  return {
+    // manipulation
+    add,
+    addMany,
+    remove,
+    update,
+    clear,
+    replaceAll,
+
+    // method
+    toggle,
+    sort,
+
+    // state
+    outOfOrder,
+    list,
+
+    // static util
+    createStyle
+  };
+
+  function outOfOrder() {
+    if (!list.length) {
+      return false;
+    }
+    let el = list[0].el;
+    if (el.parentNode !== document.documentElement) {
+      return true;
+    }
+    let i = 0;
+    while (el) {
+      if (i < list.length && el === list[i].el) {
+        i++;
+      } else if (ORDERED_TAGS.has(el.localName)) {
+        return true;
+      }
+      el = el.nextSibling;
+    }
+    // some styles are not injected to the document
+    return i < list.length;
+  }
+
+  function addMany(styles) {
+    const pending = Promise.all(styles.map(_add));
+    emitUpdate();
+    return pending;
+  }
+
+  function add(style) {
+    const pending = _add(style);
+    emitUpdate();
+    return pending;
+  }
+
+  function _add(style) {
+    if (table.has(style.id)) {
+      return update(style);
+    }
+    style.el = createStyle(style.id);
+    const pending = setStyleContent(style.el, style.code);
+    table.set(style.id, style);
+    const nextIndex = list.findIndex(i => compare(i, style) > 0);
+    if (nextIndex < 0) {
+      document.documentElement.appendChild(style.el);
+      list.push(style);
+    } else {
+      document.documentElement.insertBefore(style.el, list[nextIndex].el);
+      list.splice(nextIndex, 0, style);
+    }
+    // disabled flag is read-only when not attached to a document
+    style.el.disabled = !enabled;
+    return pending;
+  }
+
+  function remove(id) {
+    _remove(id);
+    emitUpdate();
+  }
+
+  function _remove(id) {
+    const style = table.get(id);
+    if (!style) return;
+    table.delete(id);
+    list.splice(list.indexOf(style), 1);
+    style.el.remove();
+  }
+
+  function update({id, code}) {
+    const style = table.get(id);
+    if (style.code === code) return;
+    style.code = code;
+    // workaround for Chrome devtools bug fixed in v65
+    // https://github.com/openstyles/stylus/commit/0fa391732ba8e35fa68f326a560fc04c04b8608b
+    let oldEl;
+    if (CHROME < 3321) {
+      oldEl = style.el;
+      oldEl.id = '';
+      style.el = createStyle(id);
+      oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling);
+      style.el.disabled = !enabled;
+    }
+    return setStyleContent(style.el, code)
+      .then(() => oldEl && oldEl.remove());
+  }
+
+  function createStyle(id) {
+    let el;
+    if (document.documentElement instanceof SVGSVGElement) {
+      // SVG document style
+      el = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+    } else if (document instanceof XMLDocument) {
+      // XML document style
+      el = document.createElementNS('http://www.w3.org/1999/xhtml', 'style');
+    } else {
+      // HTML document style; also works on HTML-embedded SVG
+      el = document.createElement('style');
+    }
+    el.id = `${PREFIX}${id}`;
+    el.type = 'text/css';
+    // SVG className is not a string, but an instance of SVGAnimatedString
+    el.classList.add('stylus');
+    return el;
+  }
+
+  function clear() {
+    for (const style of list) {
+      style.el.remove();
+    }
+    list.length = 0;
+    table.clear();
+    emitUpdate();
+  }
+
+  function toggle(_enabled) {
+    if (enabled === _enabled) return;
+    enabled = _enabled;
+    for (const style of list) {
+      style.el.disabled = !enabled;
+    }
+  }
+
+  function sort() {
+    list.sort(compare);
+    for (const style of list) {
+      // moving an element resets its 'disabled' state
+      const disabled = style.el.disabled;
+      // FIXME: do we need this?
+      // const copy = document.importNode(el, true);
+      // el.textContent += ' '; // invalidate CSSOM cache
+      document.documentElement.appendChild(style.el);
+      style.el.disabled = disabled;
+    }
+  }
+
+  function emitUpdate() {
+    if (onUpdate) {
+      onUpdate();
+    }
+  }
+
+  function replaceAll(styles) {
+    const added = new Set(styles.map(s => s.id));
+    const removed = [];
+    for (const style of list) {
+      if (!added.has(style.id)) {
+        removed.push(style.id);
+      }
+    }
+    // FIXME: is it possible that `docRootObserver` breaks the process?
+    return Promise.all(styles.map(_add))
+      .then(() => {
+        removed.forEach(_remove);
+        emitUpdate();
+      });
+  }
+}

edit.html

@@ -74,6 +74,7 @@
     <script src="js/msg.js"></script>
     <script src="js/worker-util.js"></script>
 
+    <script src="content/style-injector.js"></script>
     <script src="content/apply.js"></script>
 
     <link  href="edit/global-search.css" rel="stylesheet">

install-usercss.html

@@ -18,6 +18,7 @@
   <script src="js/localization.js"></script>
   <script src="js/script-loader.js"></script>
   <script src="js/storage-util.js"></script>
+  <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
   <script src="vendor/semver-bundle/semver.js"></script>
 

manage.html

@@ -152,6 +152,7 @@
   <script src="js/messaging.js"></script>
   <script src="js/prefs.js"></script>
   <script src="js/msg.js"></script>
+  <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
   <script src="js/localization.js"></script>
   <script src="manage/filters.js"></script>

manifest.json

@@ -64,7 +64,14 @@
       "run_at": "document_start",
       "all_frames": true,
       "match_about_blank": true,
-      "js": ["js/polyfill.js", "js/promisify.js", "js/msg.js", "js/prefs.js", "content/apply.js"]
+      "js": [
+        "js/polyfill.js",
+        "js/promisify.js",
+        "js/msg.js",
+        "js/prefs.js",
+        "content/style-injector.js",
+        "content/apply.js"
+      ]
     },
     {
       "matches": ["http://userstyles.org/*", "https://userstyles.org/*"],

options.html

@@ -28,6 +28,7 @@
   <script src="js/prefs.js"></script>
   <script src="js/storage-util.js" async></script>
   <script src="msgbox/msgbox.js" async></script>
+  <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
 </head>
 

popup.html

@@ -185,6 +185,7 @@
   <script src="js/localization.js"></script>
   <script src="js/prefs.js"></script>
   <script src="js/msg.js"></script>
+  <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
 
   <link rel="stylesheet" href="popup/popup.css">