Verified Commit 7c20e860 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Major version bump

- Add ability to disable single files
- Add hostnames per file, instead of globally
parent 293397fb
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
"no-caller": "error", "no-caller": "error",
"no-catch-shadow": "error", "no-catch-shadow": "error",
"no-confusing-arrow": "error", "no-confusing-arrow": "error",
"no-continue": "error", "no-continue": "off",
"no-div-regex": "error", "no-div-regex": "error",
"no-duplicate-imports": "error", "no-duplicate-imports": "error",
"no-else-return": "off", "no-else-return": "off",
......
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.
...@@ -38,14 +38,31 @@ ...@@ -38,14 +38,31 @@
if (injectionActive === false) return; if (injectionActive === false) return;
alreadyInjected = true; alreadyInjected = true;
getDataStoreKey("files", [], (files) => { getDataStoreKey("files", [], (files) => {
files.forEach((file) => { const lenFiles = files.length;
if (file.type === "js") { let indexFiles = 0;
createScript(file.url); for (; indexFiles < lenFiles; indexFiles++) {
const file = files[indexFiles];
if (file.disabled === true) {
continue;
} }
if (file.type === "css") { const hostnames = file.hostnames || [];
createCSS(file.url); 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;
}
} }
}); }
}); });
}; };
...@@ -54,15 +71,6 @@ ...@@ -54,15 +71,6 @@
}); });
getDataStoreKey("injectionActive", false, (injectionActive) => { getDataStoreKey("injectionActive", false, (injectionActive) => {
getDataStoreKey("hostnames", [], (hostnames) => { injectEverything(injectionActive);
const len = hostnames.length;
let i = len - 1;
for (; i >= 0; i--) {
if (window.location.hostname === hostnames[i]) {
injectEverything(injectionActive);
break;
}
}
});
}); });
})(); })();
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Gorilla Script- and Style-Loader", "name": "Gorilla Script- and Style-Loader",
"version": "2.0.1", "version": "3.0.0",
"description": "Enables you to load Javascript and CSS into websites.", "description": "Enables you to load Javascript and CSS into websites.",
"default_locale": "en", "default_locale": "en",
"icons": { "icons": {
......
...@@ -9,18 +9,31 @@ ...@@ -9,18 +9,31 @@
<div class="contentwrapper"> <div class="contentwrapper">
<h1>Options for <span>Gorilla Script- and Style-Loader</span></h1> <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> <p>Press <kbd>CTRL</kbd> / <kbd></kbd> + <kbd>S</kbd> to save the configuration.</p>
<h3>Files to be loaded</h3> <h2>Files to be loaded</h2>
<div class="files-container"> <div class="files-container">
<ol class="files"></ul> <ol class="files"></ul>
</div> </div>
<h3>.. when the hostname matches</h3> <h2>.. when the hostname matches</h2>
<p> <p>
A comma separated list of hostnames that have to match, A comma separated list of hostnames that have to match,
otherwise the files are not injected into the page. otherwise the files are not injected into the page.
</p> </p>
<div class="hostname-matches-container"> <h3>What is a hostname?</h3>
<input type="text" class="hostnames" placeholder="gorilla.moe,www.gorilla.moe,apps.gorilla.moe" /> <h4>What are valid hostnames?</h4>
</div> <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> </div>
<footer> <footer>
Made with <span class="gorilla-heart"></span> by Made with <span class="gorilla-heart"></span> by
......
...@@ -92,25 +92,29 @@ ...@@ -92,25 +92,29 @@
const save = function(msg) { const save = function(msg) {
const files = []; const files = [];
$$("li.file").forEach((item) => { $$("li.file").forEach((item) => {
const hostnames = [];
const fileURL = item const fileURL = item
.querySelector("input") .querySelector(".input-file-url")
.value.trim(); .value.trim();
const fileType = getSelectedFiletype(item.querySelector("select")); const fileType = getSelectedFiletype(item.querySelector("select"));
const fileDisabled =
item.querySelector(".checkbox-file-enabled")
.checked === false;
$(".input-file-hostnames")
.value.split(",")
.forEach((hostname) => {
hostnames.push(hostname.trim());
});
if (fileURL.length) { if (fileURL.length) {
files.push({ files.push({
type: fileType, type: fileType,
url: fileURL url: fileURL,
hostnames: hostnames,
disabled: fileDisabled
}); });
} }
}); });
setDataStoreKey("files", files); setDataStoreKey("files", files);
const hostnames = [];
$(".hostnames")
.value.split(",")
.forEach((hostname) => {
hostnames.push(hostname.trim());
});
setDataStoreKey("hostnames", hostnames);
const modal = gorillaModal({ const modal = gorillaModal({
contents: `<p>${msg}</p>` contents: `<p>${msg}</p>`
}).show(); }).show();
...@@ -123,6 +127,12 @@ ...@@ -123,6 +127,12 @@
if (dragSrcEl !== this) { if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML; dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = evt.dataTransfer.getData("text/html"); this.innerHTML = evt.dataTransfer.getData("text/html");
setVisualsBasedOnCheckboxEnabled({
target: dragSrcEl.querySelector(".checkbox-file-enabled")
});
setVisualsBasedOnCheckboxEnabled({
target: this.querySelector(".checkbox-file-enabled")
});
addEventsToListItem(dragSrcEl); addEventsToListItem(dragSrcEl);
addEventsToListItem(this); addEventsToListItem(this);
} }
...@@ -142,9 +152,21 @@ ...@@ -142,9 +152,21 @@
evt.dataTransfer.setData("text/html", this.innerHTML); evt.dataTransfer.setData("text/html", this.innerHTML);
}; };
const setVisualsBasedOnCheckboxEnabled = function(d) {
const checkbox = d.target;
if (checkbox.checked === true) {
checkbox.setAttribute("checked", "checked");
checkbox.parentNode.classList.remove("disabled");
} else {
checkbox.removeAttribute("checked");
checkbox.parentNode.classList.add("disabled");
}
};
const addEventsToListItem = (node) => { const addEventsToListItem = (node) => {
const input = node.querySelector("input"); const input = node.querySelector(".input-file-url");
const select = node.querySelector("select"); const select = node.querySelector("select");
const checkboxEnabled = node.querySelector(".checkbox-file-enabled");
const btnAdd = node.querySelector(".btn-file-add"); const btnAdd = node.querySelector(".btn-file-add");
const btnRemove = node.querySelector(".btn-file-remove"); const btnRemove = node.querySelector(".btn-file-remove");
input.addEventListener( input.addEventListener(
...@@ -199,6 +221,13 @@ ...@@ -199,6 +221,13 @@
}, },
{ passive: true } { passive: true }
); );
checkboxEnabled.addEventListener(
"change",
setVisualsBasedOnCheckboxEnabled,
{ passive: true }
);
btnAdd.addEventListener( btnAdd.addEventListener(
"click", "click",
function() { function() {
...@@ -221,21 +250,25 @@ ...@@ -221,21 +250,25 @@
); );
node.addEventListener("dragstart", onDragStartCallback, { node.addEventListener("dragstart", onDragStartCallback, {
passive: false passive: true
}); });
node.addEventListener("dragover", onDragOverCallback, { node.addEventListener("dragover", onDragOverCallback, {
passive: false passive: false
}); });
node.addEventListener("drop", onDropCallback, { node.addEventListener("drop", onDropCallback, {
passive: false passive: true
}); });
}; };
const createFileItem = (file, refNode) => { const createFileItem = (file, refNode) => {
file = file || { file = file || {};
type: "js", file.type = file.type || "js";
url: "" file.url = file.url || "";
}; file.disabled =
typeof file.disabled === "undefined"
? false
: file.disabled;
file.hostnames = file.hostnames || [];
const listItem = create("li"); const listItem = create("li");
listItem.draggable = true; listItem.draggable = true;
listItem.className = "file"; listItem.className = "file";
...@@ -244,6 +277,19 @@ ...@@ -244,6 +277,19 @@
input.type = "url"; input.type = "url";
input.value = file.url; input.value = file.url;
input.setAttribute("value", file.url); input.setAttribute("value", file.url);
input.setAttribute(
"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(
"placeholder",
"gorilla.moe,apps.gorilla.moe"
);
const select = create("select"); const select = create("select");
select.className = "select-file-type"; select.className = "select-file-type";
const optionJS = create("option"); const optionJS = create("option");
...@@ -272,10 +318,21 @@ ...@@ -272,10 +318,21 @@
const btnRemove = create("button"); const btnRemove = create("button");
btnRemove.className = "btn-file-remove"; btnRemove.className = "btn-file-remove";
btnRemove.innerText = "-"; btnRemove.innerText = "-";
const checkboxEnabled = create("input");
checkboxEnabled.setAttribute("type", "checkbox");
checkboxEnabled.setAttribute("class", "checkbox-file-enabled");
checkboxEnabled.setAttribute("title", "Is enabled?");
if (file.disabled === false) {
checkboxEnabled.setAttribute("checked", "checked");
} else {
listItem.classList.add("disabled");
}
listItem.appendChild(input); listItem.appendChild(input);
listItem.appendChild(select); listItem.appendChild(select);
listItem.appendChild(inputHostnames);
listItem.appendChild(btnAdd); listItem.appendChild(btnAdd);
listItem.appendChild(btnRemove); listItem.appendChild(btnRemove);
listItem.appendChild(checkboxEnabled);
addEventsToListItem(listItem); addEventsToListItem(listItem);
if (refNode) { if (refNode) {
refNode.parentNode.insertBefore( refNode.parentNode.insertBefore(
...@@ -296,11 +353,6 @@ ...@@ -296,11 +353,6 @@
files.forEach(file => createFileItem(file)); files.forEach(file => createFileItem(file));
}); });
// load hostnames from store and populate the input field
getDataStoreKey("hostnames", [], (hostnames) => {
$(".hostnames").value = hostnames.join(",");
});
let onKeyDownCallback = function(evt) { let onKeyDownCallback = function(evt) {
if (evt.ctrlKey === true) { if (evt.ctrlKey === true) {
ctrlKeyPressed = true; ctrlKeyPressed = true;
......
...@@ -25,7 +25,7 @@ a:visited { ...@@ -25,7 +25,7 @@ a:visited {
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
padding-bottom: 42px; padding-bottom: 42px;
width: 776px; width: 1200px;
} }
h1 { h1 {
...@@ -46,6 +46,25 @@ h1 span { ...@@ -46,6 +46,25 @@ h1 span {
padding: 5px; 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 { .btn-file-add {
background-color: #19cf85; background-color: #19cf85;
} }
...@@ -59,6 +78,7 @@ button:focus { ...@@ -59,6 +78,7 @@ button:focus {
} }
.hostnames, .hostnames,
.input-file-hostnames,
.input-file-url { .input-file-url {
background-color: #222; background-color: #222;
border-radius: 10px; border-radius: 10px;
...@@ -116,7 +136,7 @@ select { ...@@ -116,7 +136,7 @@ select {
color: #fff; color: #fff;
font-family: "monospace"; font-family: "monospace";
font-size: 18px; font-size: 18px;
margin: 0 10px 10px 10px; margin: 0 10px 0 10px;
padding: 10px 20px; padding: 10px 20px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
...@@ -128,7 +148,7 @@ button { ...@@ -128,7 +148,7 @@ button {
color: #fff; color: #fff;
font-family: "monospace"; font-family: "monospace";
font-size: 18px; font-size: 18px;
margin: 0 10px 10px 10px; margin: 0 10px 0 10px;
padding: 10px 20px; padding: 10px 20px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment