Merge pull request #2 from nelsonr/v1.3.1

V1.3.1

Author: nelsonr

.eslintrc.json

@@ -21,21 +21,73 @@
         "@typescript-eslint"
     ],
     "rules": {
+        "array-bracket-newline": [
+            "error",
+            "consistent"
+        ],
+        "array-bracket-spacing": [
+            "error",
+            "always"
+        ],
+        "array-element-newline": [
+            "error",
+            "consistent"
+        ],
         "indent": [
+            "warn",
+            4,
+            {
+                "ignoredNodes": [
+                    "VariableDeclaration[declarations.length=0]"
+                ]
+            }
+        ],
+        "keyword-spacing": [
             "error",
-            4
+            {
+                "before": true
+            }
         ],
         "linebreak-style": [
             "error",
             "unix"
         ],
+        "newline-before-return": "error",
+        "object-curly-newline": [
+            "error",
+            {
+                "multiline": true
+            }
+        ],
+        "object-curly-spacing": [
+            "error",
+            "always"
+        ],
+        "object-property-newline": "error",
+        "padding-line-between-statements": [
+            "error",
+            {
+                "blankLine": "always",
+                "next": "block-like",
+                "prev": "*"
+            },
+            {
+                "blankLine": "always",
+                "next": "*",
+                "prev": "block-like"
+            }
+        ],
         "quotes": [
             "error",
             "double"
         ],
         "semi": [
             "error",
             "always"
+        ],
+        "space-before-function-paren": [
+            "error",
+            "always"
         ]
     },
     "settings": {

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-    "files.eol": "\n"
+    "files.eol": "\n",
+    "eslint.enable": true,
+    "eslint.run": "onSave",
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+        "source.organizeImports": true
+    }
 }

README.md

@@ -1,4 +1,4 @@
-## <img src="https://github.com/nelsonr/super_css_inject/raw/master/src/icons/48x48.png" width="24" /> Super CSS Inject
+## <img src="https://github.com/nelsonr/super_css_inject/raw/master/dist/icons/48x48.png" width="24" /> Super CSS Inject
 
 Keep multiple stylesheets ready to inject and change on the fly. Works with **LiveReload**.
 Compatible with Chrome and Firefox.

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Super CSS Inject",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Keep multiple stylesheets ready to inject and change on the fly!",
     "manifest_version": 3,
     "permissions": ["activeTab", "storage"],

src/Messages.ts

@@ -1,46 +1,92 @@
 import { env } from "./utils";
 
-function injectStylesheets(urlList: string[]) {
-    urlList.forEach((url) => {
-        if (!document.querySelector(`link[href="${url}"]`)) {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.type = "text/css";
-            link.href = url;
-            link.classList.add("SuperCSSInject");
-
-            document.head.appendChild(link);
+function main () {
+    env.runtime.onMessage.addListener((message) => {
+        if (message.action == "inject") {
+            updateInjectedStylesheets(message.urlList);
         }
     });
+    
+    env.runtime.sendMessage({ action: "load" });
+    maintainStylesheetsOrder();
 }
 
-function clearStylesheets(url: string) {
+function updateInjectedStylesheets (urlList: string[]) {
     const links: NodeListOf<HTMLLinkElement> = document.querySelectorAll("link.SuperCSSInject");
-
-    if (links.length > 0) {
-        links.forEach((link: HTMLLinkElement) => {
-            if (link.href === url) {
-                link.remove();
+    const currentList = Array.from(links).map((link) => link.href);
+    
+    if (currentList.length > urlList.length) {
+        for (const url of currentList) {
+            if (!urlList.includes(url)) {
+                clearStylesheet(url);
             }
-        });
+        } 
+    } else {
+        for (const url of urlList) {
+            if (!currentList.includes(url)) {
+                injectStylesheet(url);
+            }
+        } 
     }
 }
 
-function main() {
-    env.runtime.onMessage.addListener((message) => {
-        if (message.action == "inject") {
-            injectStylesheets(message.urlList);
-        }
+function clearStylesheet (url: string) {
+    const link = document.querySelector(`link[href="${url}"].SuperCSSInject`);
+    link && link.remove();
+}
+
+function injectStylesheet (url: string) {
+    const link = createLinkElement(url);
+    document.head.append(link);
+}
 
-        if (message.action == "clear") {
-            clearStylesheets(message.url);
+function createLinkElement (url: string) {
+    const link = document.createElement("link");
+    
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = url;
+    link.classList.add("SuperCSSInject");
+    
+    return link;
+}
+
+/**
+ * Make sure the injected stylesheets are always placed last on the DOM
+ *  
+ * This handles SPAs where is common for additional assets to be loaded after 
+ * the initial page load and ensures the injected styles retain priority.
+ */
+function maintainStylesheetsOrder () {
+    const observer = new MutationObserver(() => {
+        const injectedLinks: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link.SuperCSSInject");
+        
+        if (injectedLinks.length > 0) {
+            const links: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link[rel='stylesheet']");
+            const lastLink: HTMLLinkElement = links[links.length - 1];
+            const isInjectedStylesheetLast = lastLink.className === "SuperCSSInject";
+
+            if (!isInjectedStylesheetLast) {
+                observer.disconnect();
+                moveInjectedStylesheets();
+            }
         }
     });
 
-    env.runtime.sendMessage({ action: "pageLoad" });
+    observer.observe(document.head, { childList: true });
+}
+
+function moveInjectedStylesheets () {
+    const links: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link.SuperCSSInject");
+
+    for (const link of links) {
+        document.head.appendChild(link);
+    }
+
+    maintainStylesheetsOrder();
 }
 
 window.addEventListener("load", main);
 
 // This is just to make the TS compiler happy
-export {};
+export { };