...
 
Commits (3)
......@@ -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",
......
src/manifest.json
config.json
tags
node_modules
/dist-*.zip
yarn-offline-mirror "./.vendor/npm"
yarn-offline-mirror-pruning true
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.
#!/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}"
*
!.gitignore
{
"dependencies": {
"babel-minify": "^0.5.0"
}
}
......@@ -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_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"
}
]
}
......@@ -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;
}
}
......@@ -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
......
This diff is collapsed.
@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;
}
}
This diff is collapsed.