Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 47 deletions
.eslintrc.json
View file @ 7c20e860
......@@ -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",
......
README.md
View file @ 7c20e860
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.
src/boot.js
View file @ 7c20e860
......@@ -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;
}
}
});
}
});
};
......@@ -54,15 +71,6 @@
});
getDataStoreKey("injectionActive", false, (injectionActive) => {
getDataStoreKey("hostnames", [], (hostnames) => {
const len = hostnames.length;
let i = len - 1;
for (; i >= 0; i--) {
if (window.location.hostname === hostnames[i]) {
injectEverything(injectionActive);
break;
}
}
});
injectEverything(injectionActive);
});
})();
src/manifest.json
View file @ 7c20e860
{
"manifest_version": 2,
"name": "Gorilla Script- and Style-Loader",
"version": "2.0.1",
"version": "3.0.0",
"description": "Enables you to load Javascript and CSS into websites.",
"default_locale": "en",
"icons": {
......
src/options.html
View file @ 7c20e860
......@@ -9,18 +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>
<h3>Files to be loaded</h3>
<h2>Files to be loaded</h2>
<div class="files-container">
<ol class="files"></ul>
</div>
<h3>.. when the hostname matches</h3>
<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>
<div class="hostname-matches-container">
<input type="text" class="hostnames" placeholder="gorilla.moe,www.gorilla.moe,apps.gorilla.moe" />
</div>
<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
View file @ 7c20e860
......@@ -92,25 +92,29 @@
const save = function(msg) {
const files = [];
$$("li.file").forEach((item) => {
const hostnames = [];
const fileURL = item
.querySelector("input")
.querySelector(".input-file-url")
.value.trim();
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) {
files.push({
type: fileType,
url: fileURL
url: fileURL,
hostnames: hostnames,
disabled: fileDisabled
});
}
});
setDataStoreKey("files", files);
const hostnames = [];
$(".hostnames")
.value.split(",")
.forEach((hostname) => {
hostnames.push(hostname.trim());
});
setDataStoreKey("hostnames", hostnames);
const modal = gorillaModal({
contents: `<p>${msg}</p>`
}).show();
......@@ -123,6 +127,12 @@
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = evt.dataTransfer.getData("text/html");
setVisualsBasedOnCheckboxEnabled({
target: dragSrcEl.querySelector(".checkbox-file-enabled")
});
setVisualsBasedOnCheckboxEnabled({
target: this.querySelector(".checkbox-file-enabled")
});
addEventsToListItem(dragSrcEl);
addEventsToListItem(this);
}
......@@ -142,9 +152,21 @@
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 input = node.querySelector("input");
const input = node.querySelector(".input-file-url");
const select = node.querySelector("select");
const checkboxEnabled = node.querySelector(".checkbox-file-enabled");
const btnAdd = node.querySelector(".btn-file-add");
const btnRemove = node.querySelector(".btn-file-remove");
input.addEventListener(
......@@ -199,6 +221,13 @@
},
{ passive: true }
);
checkboxEnabled.addEventListener(
"change",
setVisualsBasedOnCheckboxEnabled,
{ passive: true }
);
btnAdd.addEventListener(
"click",
function() {
......@@ -221,21 +250,25 @@
);
node.addEventListener("dragstart", onDragStartCallback, {
passive: false
passive: true
});
node.addEventListener("dragover", onDragOverCallback, {
passive: false
});
node.addEventListener("drop", onDropCallback, {
passive: false
passive: true
});
};
const createFileItem = (file, refNode) => {
file = file || {
type: "js",
url: ""
};
file = file || {};
file.type = file.type || "js";
file.url = file.url || "";
file.disabled =
typeof file.disabled === "undefined"
? false
: file.disabled;
file.hostnames = file.hostnames || [];
const listItem = create("li");
listItem.draggable = true;
listItem.className = "file";
......@@ -244,6 +277,19 @@
input.type = "url";
input.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");
select.className = "select-file-type";
const optionJS = create("option");
......@@ -272,10 +318,21 @@
const btnRemove = create("button");
btnRemove.className = "btn-file-remove";
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(select);
listItem.appendChild(inputHostnames);
listItem.appendChild(btnAdd);
listItem.appendChild(btnRemove);
listItem.appendChild(checkboxEnabled);
addEventsToListItem(listItem);
if (refNode) {
refNode.parentNode.insertBefore(
......@@ -296,11 +353,6 @@
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) {
if (evt.ctrlKey === true) {
ctrlKeyPressed = true;
......
src/options.scss
View file @ 7c20e860
......@@ -25,7 +25,7 @@ a:visited {
margin: 0 auto;
max-width: 100%;
padding-bottom: 42px;
width: 776px;
width: 1200px;
}
h1 {
......@@ -46,6 +46,25 @@ h1 span {
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;
}
......@@ -59,6 +78,7 @@ button:focus {
}
.hostnames,
.input-file-hostnames,
.input-file-url {
background-color: #222;
border-radius: 10px;
......@@ -116,7 +136,7 @@ select {
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
margin: 0 10px 0 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
......@@ -128,7 +148,7 @@ button {
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
margin: 0 10px 0 10px;
padding: 10px 20px;
position: relative;
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