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

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 @@ ...@@ -22,6 +22,7 @@
const createCSS = (url) => { const createCSS = (url) => {
const l = document.createElement("link"); const l = document.createElement("link");
l.rel = "stylesheet";
l.type = "text/css"; l.type = "text/css";
l.href = url; l.href = url;
document.head.appendChild(l); document.head.appendChild(l);
...@@ -33,9 +34,18 @@ ...@@ -33,9 +34,18 @@
document.head.appendChild(s); document.head.appendChild(s);
}; };
const injectFile = (file) => {
if (file.type === "js") {
createScript(file.url);
}
if (file.type === "css") {
createCSS(file.url);
}
};
const injectEverything = (injectionActive) => { const injectEverything = (injectionActive) => {
if (alreadyInjected) return; if (alreadyInjected) return true;
if (injectionActive === false) return; if (injectionActive === false) return true;
alreadyInjected = true; alreadyInjected = true;
getDataStoreKey("files", [], (files) => { getDataStoreKey("files", [], (files) => {
const lenFiles = files.length; const lenFiles = files.length;
...@@ -45,30 +55,17 @@ ...@@ -45,30 +55,17 @@
if (file.disabled === true) { if (file.disabled === true) {
continue; continue;
} }
const hostnames = file.hostnames || []; if (file.urlmatch.trim().length === 0) continue;
const lenHostnames = hostnames.length; const urlRegex = new RegExp(file.urlmatch);
let indexHostnames = lenHostnames - 1; if (window.location.href.match(urlRegex)) {
for (; indexHostnames >= 0; indexHostnames--) { injectFile(file);
if (
window.location.hostname ===
hostnames[indexHostnames]
) {
if (file.type === "js") {
createScript(file.url);
}
if (file.type === "css") {
createCSS(file.url);
}
break;
}
} }
} }
}); });
return true;
}; };
chrome.runtime.onMessage.addListener((msg) => { chrome.runtime.onMessage.addListener(msg => injectEverything(msg.injectionActive));
injectEverything(msg.injectionActive);
});
getDataStoreKey("injectionActive", false, (injectionActive) => { getDataStoreKey("injectionActive", false, (injectionActive) => {
injectEverything(injectionActive); injectEverything(injectionActive);
......
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Gorilla Script- and Style-Loader", "name": "Gorilla Script- and Style-Loader",
"version": "3.0.1", "version": "4.1.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": {
......
...@@ -14,27 +14,11 @@ ...@@ -14,27 +14,11 @@
<ol class="files"></ul> <ol class="files"></ul>
</div> </div>
<button class="btn-save">Save</button> <button class="btn-save">Save</button>
<h2>.. when the hostname matches</h2> <h2>.. when the url matches</h2>
<p> <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. otherwise the files are not injected into the page.
</p> </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> </div>
<footer> <footer>
Made with <span class="gorilla-heart"></span> by Made with <span class="gorilla-heart"></span> by
......
...@@ -93,7 +93,6 @@ ...@@ -93,7 +93,6 @@
msg = typeof msg === "string" ? msg : "Configuration saved."; msg = typeof msg === "string" ? msg : "Configuration saved.";
const files = []; const files = [];
$$("li.file").forEach((item) => { $$("li.file").forEach((item) => {
const hostnames = [];
const fileURL = item const fileURL = item
.querySelector(".input-file-url") .querySelector(".input-file-url")
.value.trim(); .value.trim();
...@@ -101,16 +100,12 @@ ...@@ -101,16 +100,12 @@
const fileDisabled = const fileDisabled =
item.querySelector(".checkbox-file-enabled") item.querySelector(".checkbox-file-enabled")
.checked === false; .checked === false;
item.querySelector(".input-file-hostnames") const urlmatch = item.querySelector(".input-file-urlmatch").value;
.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, urlmatch: urlmatch,
disabled: fileDisabled disabled: fileDisabled
}); });
} }
...@@ -179,7 +174,7 @@ ...@@ -179,7 +174,7 @@
const addEventsToListItem = (node) => { const addEventsToListItem = (node) => {
const input = node.querySelector(".input-file-url"); const input = node.querySelector(".input-file-url");
const select = node.querySelector("select"); 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 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");
...@@ -236,7 +231,7 @@ ...@@ -236,7 +231,7 @@
{ passive: true } { passive: true }
); );
hostnames.addEventListener( urlmatch.addEventListener(
"keyup", "keyup",
function() { function() {
this.setAttribute("value", this.value); this.setAttribute("value", this.value);
...@@ -276,7 +271,7 @@ ...@@ -276,7 +271,7 @@
// disable bubbling for these elements // disable bubbling for these elements
stopDrag(input); stopDrag(input);
stopDrag(hostnames); stopDrag(urlmatch);
// enable drag and drop for the list element // enable drag and drop for the list element
node.addEventListener("dragstart", onDragStartCallback, { node.addEventListener("dragstart", onDragStartCallback, {
...@@ -298,7 +293,7 @@ ...@@ -298,7 +293,7 @@
typeof file.disabled === "undefined" typeof file.disabled === "undefined"
? false ? false
: file.disabled; : file.disabled;
file.hostnames = file.hostnames || []; file.urlmatch = file.urlmatch || "";
const listItem = create("li"); const listItem = create("li");
listItem.draggable = true; listItem.draggable = true;
listItem.className = "file"; listItem.className = "file";
...@@ -311,14 +306,14 @@ ...@@ -311,14 +306,14 @@
"placeholder", "placeholder",
"http://127.0.0.1:5000/app.js" "http://127.0.0.1:5000/app.js"
); );
const inputHostnames = create("input"); const inputUrlmatch = create("input");
inputHostnames.className = "input-file-hostnames"; inputUrlmatch.className = "input-file-urlmatch";
inputHostnames.type = "text"; inputUrlmatch.type = "text";
inputHostnames.value = file.hostnames; inputUrlmatch.value = file.urlmatch;
inputHostnames.setAttribute("value", file.hostnames); inputUrlmatch.setAttribute("value", file.urlmatch);
inputHostnames.setAttribute( inputUrlmatch.setAttribute(
"placeholder", "placeholder",
"gorilla.moe,apps.gorilla.moe" "^https?://.*\\.gorlla.moe/$"
); );
const select = create("select"); const select = create("select");
select.className = "select-file-type"; select.className = "select-file-type";
...@@ -361,7 +356,7 @@ ...@@ -361,7 +356,7 @@
dragIcon.setAttribute("class", "drag-icon"); dragIcon.setAttribute("class", "drag-icon");
listItem.appendChild(input); listItem.appendChild(input);
listItem.appendChild(select); listItem.appendChild(select);
listItem.appendChild(inputHostnames); listItem.appendChild(inputUrlmatch);
listItem.appendChild(btnAdd); listItem.appendChild(btnAdd);
listItem.appendChild(btnRemove); listItem.appendChild(btnRemove);
listItem.appendChild(checkboxEnabled); listItem.appendChild(checkboxEnabled);
......
...@@ -94,7 +94,7 @@ button:focus { ...@@ -94,7 +94,7 @@ button:focus {
outline: none; outline: none;
} }
.input-file-hostnames, .input-file-urlmatch,
.input-file-url { .input-file-url {
background-color: #222; background-color: #222;
border-radius: 10px; border-radius: 10px;
...@@ -105,7 +105,7 @@ button:focus { ...@@ -105,7 +105,7 @@ button:focus {
width: 350px; width: 350px;
} }
.input-file-hostnames, .input-file-urlmatch,
.input-file-url:focus { .input-file-url:focus {
outline: none; 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