Fix CSS Injection + change to regex URL match

- Fix CSS Injection (thanks to Patrick Ewald) - rel=stylesheet was missing
- Change to regex URL match instead of fixed hostnames

src/boot.js

@@ -22,6 +22,7 @@
 
         const createCSS = (url) => {
                 const l = document.createElement("link");
+                l.rel = "stylesheet";
                 l.type = "text/css";
                 l.href = url;
                 document.head.appendChild(l);
@@ -33,9 +34,18 @@
                 document.head.appendChild(s);
         };
 
+        const injectFile = (file) => {
+                if (file.type === "js") {
+                        createScript(file.url);
+                }
+                if (file.type === "css") {
+                        createCSS(file.url);
+                }
+        };
+
         const injectEverything = (injectionActive) => {
-                if (alreadyInjected) return;
-                if (injectionActive === false) return;
+                if (alreadyInjected) return true;
+                if (injectionActive === false) return true;
                 alreadyInjected = true;
                 getDataStoreKey("files", [], (files) => {
                         const lenFiles = files.length;
@@ -45,30 +55,17 @@
                                 if (file.disabled === true) {
                                         continue;
                                 }
-                                const hostnames = file.hostnames || [];
-                                const lenHostnames = hostnames.length;
-                                let indexHostnames = lenHostnames - 1;
-                                for (; indexHostnames >= 0; indexHostnames--) {
-                                        if (
-                                                window.location.hostname ===
-                                                hostnames[indexHostnames]
-                                        ) {
-                                                if (file.type === "js") {
-                                                        createScript(file.url);
-                                                }
-                                                if (file.type === "css") {
-                                                        createCSS(file.url);
-                                                }
-                                                break;
-                                        }
+                                if (file.urlmatch.trim().length === 0) continue;
+                                const urlRegex = new RegExp(file.urlmatch);
+                                if (window.location.href.match(urlRegex)) {
+                                        injectFile(file);
                                 }
                         }
                 });
+                return true;
         };
 
-        chrome.runtime.onMessage.addListener((msg) => {
-                injectEverything(msg.injectionActive);
-        });
+        chrome.runtime.onMessage.addListener(msg => injectEverything(msg.injectionActive));
 
         getDataStoreKey("injectionActive", false, (injectionActive) => {
                 injectEverything(injectionActive);

src/manifest.json

 {
         "manifest_version": 2,
         "name": "Gorilla Script- and Style-Loader",
-        "version": "3.0.1",
+        "version": "4.1.0",
         "description": "Enables you to load Javascript and CSS into websites.",
         "default_locale": "en",
         "icons": {

src/options.html

@@ -14,27 +14,11 @@
                                 <ol class="files"></ul>
                         </div>
                         <button class="btn-save">Save</button>
-                        <h2>.. when the hostname matches</h2>
+                        <h2>.. when the url matches</h2>
                         <p>
-                        A comma separated list of hostnames that have to match,
+                        A regex is evaluated and if its truthy it will inject JS and/or CSS into the page;
                         otherwise the files are not injected into the page.
                         </p>
-                        <h3>What is a hostname?</h3>
-                        <h4>What are valid hostnames?</h4>
-                        <p>
-                        gorilla.moe, apps.gorilla.moe and writer.gorilla.moe are valid hostnames.
-                        </p>
-                        <h4>What are invalid hostnames?</h4>
-                        <p>
-                        https://gorilla.moe, https://apps.gorilla.moe and https://writer.gorilla.moe are invalid hostnames.
-                        This is simply because they also contain the protocol (https:)
-                        </p>
-                        <p>
-                        https://gorilla.moe/#about, https://apps.gorilla.moe/abt/ and
-                        https://writer.gorilla.moe/robot.txt are also invalid hostnames.
-                        This is due to the fact that they not only contain the protocol,
-                        but also the pathname (/#about, /abt/ and /robot.txt).
-                        </p>
                 </div>
                 <footer>
                        Made with <span class="gorilla-heart">❤</span> by

src/options.js

@@ -93,7 +93,6 @@
                 msg = typeof msg === "string" ? msg : "Configuration saved.";
                 const files = [];
                 $$("li.file").forEach((item) => {
-                        const hostnames = [];
                         const fileURL = item
                                 .querySelector(".input-file-url")
                                 .value.trim();
@@ -101,16 +100,12 @@
                         const fileDisabled =
                                 item.querySelector(".checkbox-file-enabled")
                                         .checked === false;
-                        item.querySelector(".input-file-hostnames")
-                                .value.split(",")
-                                .forEach((hostname) => {
-                                        hostnames.push(hostname.trim());
-                                });
+                        const urlmatch = item.querySelector(".input-file-urlmatch").value;
                         if (fileURL.length) {
                                 files.push({
                                         type: fileType,
                                         url: fileURL,
-                                        hostnames: hostnames,
+                                        urlmatch: urlmatch,
                                         disabled: fileDisabled
                                 });
                         }
@@ -179,7 +174,7 @@
         const addEventsToListItem = (node) => {
                 const input = node.querySelector(".input-file-url");
                 const select = node.querySelector("select");
-                const hostnames = node.querySelector(".input-file-hostnames");
+                const urlmatch = node.querySelector(".input-file-urlmatch");
                 const checkboxEnabled = node.querySelector(".checkbox-file-enabled");
                 const btnAdd = node.querySelector(".btn-file-add");
                 const btnRemove = node.querySelector(".btn-file-remove");
@@ -236,7 +231,7 @@
                         { passive: true }
                 );
 
-                hostnames.addEventListener(
+                urlmatch.addEventListener(
                         "keyup",
                         function() {
                                 this.setAttribute("value", this.value);
@@ -276,7 +271,7 @@
 
                 // disable bubbling for these elements
                 stopDrag(input);
-                stopDrag(hostnames);
+                stopDrag(urlmatch);
 
                 // enable drag and drop for the list element
                 node.addEventListener("dragstart", onDragStartCallback, {
@@ -298,7 +293,7 @@
                         typeof file.disabled === "undefined"
                                 ? false
                                 : file.disabled;
-                file.hostnames = file.hostnames || [];
+                file.urlmatch = file.urlmatch || "";
                 const listItem = create("li");
                 listItem.draggable = true;
                 listItem.className = "file";
@@ -311,14 +306,14 @@
                         "placeholder",
                         "http://127.0.0.1:5000/app.js"
                 );
-                const inputHostnames = create("input");
-                inputHostnames.className = "input-file-hostnames";
-                inputHostnames.type = "text";
-                inputHostnames.value = file.hostnames;
-                inputHostnames.setAttribute("value", file.hostnames);
-                inputHostnames.setAttribute(
+                const inputUrlmatch = create("input");
+                inputUrlmatch.className = "input-file-urlmatch";
+                inputUrlmatch.type = "text";
+                inputUrlmatch.value = file.urlmatch;
+                inputUrlmatch.setAttribute("value", file.urlmatch);
+                inputUrlmatch.setAttribute(
                         "placeholder",
-                        "gorilla.moe,apps.gorilla.moe"
+                        "^https?://.*\\.gorlla.moe/$"
                 );
                 const select = create("select");
                 select.className = "select-file-type";
@@ -361,7 +356,7 @@
                 dragIcon.setAttribute("class", "drag-icon");
                 listItem.appendChild(input);
                 listItem.appendChild(select);
-                listItem.appendChild(inputHostnames);
+                listItem.appendChild(inputUrlmatch);
                 listItem.appendChild(btnAdd);
                 listItem.appendChild(btnRemove);
                 listItem.appendChild(checkboxEnabled);

src/options.scss

@@ -94,7 +94,7 @@ button:focus {
         outline: none;
 }
 
-.input-file-hostnames,
+.input-file-urlmatch,
 .input-file-url {
         background-color: #222;
         border-radius: 10px;
@@ -105,7 +105,7 @@ button:focus {
         width: 350px;
 }
 
-.input-file-hostnames,
+.input-file-urlmatch,
 .input-file-url:focus {
         outline: none;
 }