.eslintrc.json

@@ -133,7 +133,7 @@
         "no-caller": "error",
         "no-catch-shadow": "error",
         "no-confusing-arrow": "error",
-        "no-continue": "error",
+        "no-continue": "off",
         "no-div-regex": "error",
         "no-duplicate-imports": "error",
         "no-else-return": "off",

.gitignore

-src/manifest.json
 config.json
 tags
+node_modules
+/dist-*.zip

.yarnrc

+yarn-offline-mirror "./.vendor/npm"
+yarn-offline-mirror-pruning true

README.md

+Gorilla Script- and Style-Loader
+================================
+
+A GoogleTM Chrome Browser Extension for loading/injection JavaScript- and
+CSS-files into any website.
+
+I use this for development purposes only, but you're free to use it for
+whatever you want.

Taskfile

+#!/bin/bash
+
+NBIN="./node_modules/.bin"
+
+function __show_tasks {
+        compgen -A function | grep -v "^_"
+}
+
+function start {
+        docker-compose -p gorillawriter up -d
+}
+
+function stop {
+        docker-compose -p gorillawriter down
+}
+
+function help {
+        echo "$0 <task> <args>"
+        echo "Tasks:"
+        tasks | cat -n
+}
+
+function tasks {
+        compgen -A function
+}
+
+function minify {
+        $NBIN/babel-minify \
+                ./src/background.js \
+                --out-file ./dist/background.js
+        $NBIN/babel-minify \
+                ./src/boot.js \
+                --out-file ./dist/boot.js
+        $NBIN/babel-minify \
+                ./src/options.js \
+                --out-file ./dist/options.js
+}
+
+function clean {
+        rm -rf ./dist/*
+}
+
+function devbuild {
+        clean
+        cp -r src/_locales \
+                src/icons \
+                src/background.js \
+                src/boot.js \
+                src/manifest.json \
+                src/options.{js,html} \
+                dist/
+        sass ./src/options.scss:./dist/options.css --style compressed
+        minify
+}
+
+function _packup {
+        local version
+        version=$(jq -r .version < ./dist/manifest.json)
+        pushd dist || exit && zip -r ../dist-$version.zip ./* && popd || exit
+}
+
+function build {
+        devbuild && minify && _packup
+}
+
+function watch {
+        local watchdir="./src/"
+        _logger "Watcher started"
+        inotifywait -m -r -e close_write --format '%w%f' "${watchdir}" | \
+        while read -r _; do
+                _logger "Build triggered"
+                build
+                _logger "Build finished"
+        done
+}
+
+function default {
+        tasks
+}
+
+"${@:-default}"
+

dist/.gitignore

+*
+!.gitignore

package.json

+{
+  "dependencies": {
+    "babel-minify": "^0.5.0"
+  }
+}

boot.js → src/boot.js

@@ -38,14 +38,31 @@
                 if (injectionActive === false) return;
                 alreadyInjected = true;
                 getDataStoreKey("files", [], (files) => {
-                        files.forEach((file) => {
-                                if (file.type === "js") {
-                                        createScript(file.url);
+                        const lenFiles = files.length;
+                        let indexFiles = 0;
+                        for (; indexFiles < lenFiles; indexFiles++) {
+                                const file = files[indexFiles];
+                                if (file.disabled === true) {
+                                        continue;
                                 }
-                                if (file.type === "css") {
-                                        createCSS(file.url);
+                                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;
+                                        }
                                 }
-                        });
+                        }
                 });
         };
 

manifest.json → src/manifest.json

 {
         "manifest_version": 2,
         "name": "Gorilla Script- and Style-Loader",
-        "version": "1.1.0",
+        "version": "3.0.0",
         "description": "Enables you to load Javascript and CSS into websites.",
         "default_locale": "en",
         "icons": {
@@ -30,7 +30,8 @@
                         ],
                         "js": [
                                 "boot.js"
-                        ]
+                        ],
+                        "run_at": "document_start"
                 }
         ]
 }

options.css → src/options.css

@@ -54,20 +54,43 @@ h1 span {
         background-color: #de6a73;
 }
 
+button:focus {
+        outline: none;
+}
+
+.hostnames,
 .input-file-url {
         background-color: #222;
-        border: 5px solid #444;
         border-radius: 10px;
+        border: 5px solid #444;
         color: #f2cf66;
         font-size: 16px;
         padding: 10px;
         width: 350px;
 }
 
+.hostnames {
+        width: 100%;
+}
+
+.hostnames,
+.input-file-url:focus {
+        outline: none;
+}
+
+.clickable-url {
+        cursor: pointer;
+        text-decoration: underline;
+}
+
 .select-file-type {
         background-color: #112233;
 }
 
+.select-file-type:focus {
+        outline: none;
+}
+
 .select-file-type option:checked {
         background-color: #051525;
 }
@@ -138,3 +161,93 @@ footer a:visited {
 footer a:hover {
         border-bottom: 1px solid red;
 }
+
+.modal {
+        display: none;
+        position: fixed;
+        z-index: 7;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+
+        .modal-container {
+                background-color: #272b30;
+                margin: auto;
+                padding: 20px;
+                border: 1px solid #000;
+                border-radius: 5px;
+        }
+
+        .modal-content {
+                align-items: center;
+                color: black;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                h1,
+                p {
+                        text-align: center;
+                        color: #4dde6e;
+                        text-shadow: -1px -1px 0 #222, 1px -1px 0 #222,
+                                -1px 1px 0 #222, 1px 1px 0 #222;
+                }
+                input {
+                        background-color: #222;
+                        border-radius: 10px;
+                        border: 5px solid #444;
+                        color: #f2cf66;
+                        font-size: 16px;
+                        padding: 10px;
+                        width: 90%;
+                        display: block;
+                        margin: {
+                                bottom: 20px;
+                        }
+                        &:focus {
+                                outline: none;
+                        }
+                }
+                button {
+                        border-radius: 10px;
+                        border: 1px solid #333;
+                        color: #fff;
+                        font-family: "monospace";
+                        font-size: 18px;
+                        margin: 0 10px 10px 10px;
+                        padding: 10px 20px;
+                        position: relative;
+                        text-decoration: none;
+                        &.new-document {
+                                background-color: #0079d3;
+                        }
+                        &.cancel {
+                                background-color: #f44336;
+                        }
+                        &.clipboard {
+                                background-color: #19cf85;
+                        }
+                        &:active {
+                                transform: translate(0px, 5px);
+                                border-bottom: 1px solid;
+                        }
+                }
+        }
+
+        .close {
+                color: #aaaaaa;
+                float: right;
+                font-size: 28px;
+                font-weight: bold;
+        }
+
+        .close:hover,
+        .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+        }
+}

options.html → src/options.html

@@ -9,15 +9,31 @@
                 <div class="contentwrapper">
                         <h1>Options for <span>Gorilla Script- and Style-Loader</span></h1>
                         <p>Press <kbd>CTRL</kbd> / <kbd>⌘</kbd> + <kbd>S</kbd> to save the configuration.</p>
-                        <nav class="hidden">
-                                <button id="exportBtn">Export Configuration</button>
-                                <button id="importBtn">Import Configuration</button>
-                                <input id="file" name="file" type="file" accept=".json" />
-                        </nav>
-                        <h3>Files to be loaded</h3>
+                        <h2>Files to be loaded</h2>
                         <div class="files-container">
                                 <ol class="files"></ul>
                         </div>
+                        <h2>.. when the hostname matches</h2>
+                        <p>
+                        A comma separated list of hostnames that have to match,
+                        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.scss

+@font-face {
+        font-family: "monospace";
+        font-style: normal;
+        font-weight: 400;
+}
+
+html,
+body {
+        background-color: #272b30;
+        color: #fff;
+}
+
+body {
+        font-size: 110%;
+        line-height: 1.8em;
+}
+
+a:link,
+a:active,
+a:visited {
+        color: #666;
+}
+
+.contentwrapper {
+        margin: 0 auto;
+        max-width: 100%;
+        padding-bottom: 42px;
+        width: 1200px;
+}
+
+h1 {
+        border-bottom: 2px solid #f2cf66;
+        color: #de6a73;
+}
+h1 span {
+        color: #19cf85;
+}
+
+.hidden {
+        display: none;
+}
+
+.gorilla-heart {
+        color: #f00;
+        font-size: 170%;
+        padding: 5px;
+}
+
+li.file {
+        position: relative;
+        margin-bottom: 10px;
+        &.disabled {
+                opacity: 0.3;
+        }
+}
+
+input[type="checkbox"] {
+        margin: {
+                left: 10px;
+                right: 10px;
+        }
+        vertical-align: middle;
+        position: relative;
+        width: 32px;
+        height: 32px;
+}
+
+.btn-file-add {
+        background-color: #19cf85;
+}
+
+.btn-file-remove {
+        background-color: #de6a73;
+}
+
+button:focus {
+        outline: none;
+}
+
+.hostnames,
+.input-file-hostnames,
+.input-file-url {
+        background-color: #222;
+        border-radius: 10px;
+        border: 5px solid #444;
+        color: #f2cf66;
+        font-size: 16px;
+        padding: 10px;
+        width: 350px;
+}
+
+.hostnames {
+        width: 100%;
+}
+
+.hostnames,
+.input-file-url:focus {
+        outline: none;
+}
+
+.clickable-url {
+        cursor: pointer;
+        text-decoration: underline;
+}
+
+.select-file-type {
+        background-color: #112233;
+}
+
+.select-file-type:focus {
+        outline: none;
+}
+
+.select-file-type option:checked {
+        background-color: #051525;
+}
+
+kbd {
+        background-color: #f7f7f7;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+        color: #333;
+        display: inline-block;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 11px;
+        line-height: 1.4;
+        margin: 0 0.1em;
+        padding: 0.1em 0.6em;
+        text-shadow: 0 1px 0 #fff;
+}
+
+select {
+        border-radius: 10px;
+        border: 1px solid #333;
+        color: #fff;
+        font-family: "monospace";
+        font-size: 18px;
+        margin: 0 10px 0 10px;
+        padding: 10px 20px;
+        position: relative;
+        text-decoration: none;
+}
+
+button {
+        border-radius: 10px;
+        border: 1px solid #333;
+        color: #fff;
+        font-family: "monospace";
+        font-size: 18px;
+        margin: 0 10px 0 10px;
+        padding: 10px 20px;
+        position: relative;
+        text-decoration: none;
+}
+
+button:active {
+        transform: translate(0px, 5px);
+        border-bottom: 1px solid;
+}
+
+nav {
+        margin-top: 20px;
+}
+
+footer {
+        bottom: 1%;
+        color: #666;
+        display: block;
+        position: fixed;
+        right: 1%;
+        text-align: right;
+}
+
+footer a:link,
+footer a:visited {
+        border-bottom: 1px solid;
+        text-decoration: none;
+}
+
+footer a:hover {
+        border-bottom: 1px solid red;
+}
+
+.modal {
+        display: none;
+        position: fixed;
+        z-index: 7;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+
+        .modal-container {
+                background-color: #272b30;
+                margin: auto;
+                padding: 20px;
+                border: 1px solid #000;
+                border-radius: 5px;
+        }
+
+        .modal-content {
+                align-items: center;
+                color: black;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                h1,
+                p {
+                        text-align: center;
+                        color: #4dde6e;
+                        text-shadow: -1px -1px 0 #222, 1px -1px 0 #222,
+                                -1px 1px 0 #222, 1px 1px 0 #222;
+                }
+                input {
+                        background-color: #222;
+                        border-radius: 10px;
+                        border: 5px solid #444;
+                        color: #f2cf66;
+                        font-size: 16px;
+                        padding: 10px;
+                        width: 90%;
+                        display: block;
+                        margin: {
+                                bottom: 20px;
+                        }
+                        &:focus {
+                                outline: none;
+                        }
+                }
+                button {
+                        border-radius: 10px;
+                        border: 1px solid #333;
+                        color: #fff;
+                        font-family: "monospace";
+                        font-size: 18px;
+                        margin: 0 10px 10px 10px;
+                        padding: 10px 20px;
+                        position: relative;
+                        text-decoration: none;
+                        &.new-document {
+                                background-color: #0079d3;
+                        }
+                        &.cancel {
+                                background-color: #f44336;
+                        }
+                        &.clipboard {
+                                background-color: #19cf85;
+                        }
+                        &:active {
+                                transform: translate(0px, 5px);
+                                border-bottom: 1px solid;
+                        }
+                }
+        }
+
+        .close {
+                color: #aaaaaa;
+                float: right;
+                font-size: 28px;
+                font-weight: bold;
+        }
+
+        .close:hover,
+        .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+        }
+}