Commit f85f6f07 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸

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
parent 9a265054
......@@ -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);
......
{
"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": {
......
......@@ -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
......
......@@ -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);
......
......@@ -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;
}
......
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