Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Google Chrome
Gorilla Script- and Style-Loader
Commits
7c20e860
Verified
Commit
7c20e860
authored
Jan 24, 2019
by
Marco Kellershoff
🤸
Browse files
Major version bump
- Add ability to disable single files - Add hostnames per file, instead of globally
parent
293397fb
Changes
7
Hide whitespace changes
Inline
Side-by-side
.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>
<h
3
>
Files to be loaded
</h
3
>
<h
2
>
Files to be loaded
</h
2
>
<div
class=
"files-container"
>
<ol
class=
"files"
></ul>
</div>
<h
3
>
.. when the hostname matches
</h
3
>
<h
2
>
.. when the hostname matches
</h
2
>
<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
:
fals
e
passive
:
tru
e
});
node
.
addEventListener
(
"
dragover
"
,
onDragOverCallback
,
{
passive
:
false
});
node
.
addEventListener
(
"
drop
"
,
onDropCallback
,
{
passive
:
fals
e
passive
:
tru
e
});
};
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
:
776
px
;
width
:
1200
px
;
}
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
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment