Skip to content
This repository was archived by the owner on May 26, 2018. It is now read-only.

Commit a9897e0

Browse files
ExE-BossExE-Boss
committed
Inject the CSS using browser.tabs.injectCSS();
# Changes: - Fix sites which prohibit 'unsafe-inline' in their style CSP, - Ensure that websites can’t restyle the Min Vid buttons - Don’t leak the `moz-extension://` UUID.
1 parent 4970670 commit a9897e0

File tree

4 files changed

+97
-101
lines changed

4 files changed

+97
-101
lines changed

‎webextension/background.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function onStorageChanged(changes) {
5555

5656
browser.runtime.onMessage.addListener(onLaunch);
5757

58-
function onLaunch(opts) {
58+
function onLaunch(opts, sender) {
5959
const title = opts.title;
6060
delete opts.title;
6161

@@ -76,4 +76,13 @@ function onLaunch(opts) {
7676

7777
launchVideo(opts);
7878
} else if (title === 'metric') sendMetricsData(opts);
79+
else if (title === 'inject-style') {
80+
if ('tab' in sender) {
81+
browser.tabs.insertCSS(sender.tab.id, {
82+
file: '/content-scripts/icon-overlay.css',
83+
frameId: opts.frameId,
84+
runAt: 'document_start'
85+
});
86+
}
87+
}
7988
}

‎webextension/content-scripts/icon-overlay.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.minvid__overlay__bottom_container {
2+
align-items: center;
3+
background-color: rgba(0,0,0,0.8);
4+
opacity: 0;
5+
border-radius: 0 0 4px 4px;
6+
height: 100%;
7+
justify-content: center;
8+
left: 4%;
9+
max-height: 80px;
10+
max-width: 36px;
11+
padding: 2px 2px 4px;
12+
position: absolute;
13+
bottom: 0;
14+
width: 100%;
15+
z-index: 1000;
16+
}
17+
18+
.minvid__overlay__container {
19+
align-items: center;
20+
background-color: rgba(0,0,0,0.8);
21+
opacity: 0;
22+
border-radius: 0 0 4px 4px;
23+
height: 100%;
24+
justify-content: center;
25+
left: 4%;
26+
max-height: 80px;
27+
max-width: 36px;
28+
padding: 2px 2px 4px;
29+
position: absolute;
30+
top: 0;
31+
width: 100%;
32+
z-index: 1000;
33+
}
34+
35+
.minvid__overlay__container:hover,
36+
.minvid__overlay__bottom_container:hover {
37+
background: rgba(0,0,0,0.9);
38+
}
39+
40+
.minvid__overlay__icon {
41+
display: block;
42+
cursor: pointer;
43+
height: 40%;
44+
opacity: 0.7;
45+
width: 100%;
46+
}
47+
48+
#minvid__overlay__icon__play {
49+
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iY29udGV4dC1maWxsICNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTAgOC4wMDdDMCAzLjU4NSAzLjU4OCAwIDggMGg4MGM0LjQxOSAwIDggMy41ODIgOCA4LjAwN3Y1Ny45ODZDOTYgNzAuNDE1IDkyLjQxMiA3NCA4OCA3NEg4Yy00LjQxOSAwLTgtMy41ODItOC04LjAwN1Y4LjAwN3pNNyAyNmE1IDUgMCAwIDEgNS4wMDYtNWg3MS45ODhBNSA1IDAgMCAxIDg5IDI2djM2YTUgNSAwIDAgMS01LjAwNiA1SDEyLjAwNkE1IDUgMCAwIDEgNyA2MlYyNnoiLz48cGF0aCBkPSJNMTIgMzcuOTk3QTMuOTkzIDMuOTkzIDAgMCAxIDE1Ljk5OCAzNGgyNy4wMDRBNCA0IDAgMCAxIDQ3IDM3Ljk5N3YyMC4wMDZBMy45OTMgMy45OTMgMCAwIDEgNDMuMDAyIDYySDE1Ljk5OEE0IDQgMCAwIDEgMTIgNTguMDAzVjM3Ljk5N3ptMTEuNSA0LjM3YzAtLjMwOS4yMjItLjQ1LjQ5OS0uMzE2bDEyLjc5NCA2LjIwN2MuMjc1LjEzNC4yNzcuMzUgMCAuNDg0TDIzLjk5OSA1NC45NWMtLjI3Ni4xMzMtLjQ5OS0uMDA4LS40OTktLjMxNlY0Mi4zNjd6Ii8+PC9nPjwvc3ZnPg==") no-repeat;
50+
background-position: center bottom;
51+
background-size: 32px auto;
52+
}
53+
54+
#minvid__overlay__icon__add {
55+
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguNCA1LjZWMEg1LjZ2NS42SDB2Mi44aDUuNlYxNGgyLjhWOC40SDE0VjUuNnoiIGZpbGw9ImNvbnRleHQtZmlsbCAjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=") no-repeat;
56+
background-position: center bottom;
57+
background-size: 25px auto;
58+
margin-top: 5px;
59+
}
60+
61+
.minvid__overlay__wrapper:hover .minvid__overlay__container,
62+
.minvid__overlay__wrapper:hover .minvid__overlay__bottom_container {
63+
opacity: 1;
64+
/*background-color: rgba(0, 0, 0, .8);*/
65+
/*animation-name: fade;
66+
animation-duration: 4s;
67+
animation-iteration-count: initial;
68+
animation-fill-mode: forwards;*/
69+
}
70+
71+
#minvid__overlay__icon__play:hover,
72+
#minvid__overlay__icon__add:hover {
73+
opacity: 1;
74+
}
75+
76+
.minvid__overlay__container.fullscreen {
77+
display: none;
78+
}
79+
80+
@keyframes fade {
81+
0% {opacity: 0}
82+
5%, 80% {opacity: 1}
83+
100% {opacity: 0}
84+
}

‎webextension/content-scripts/icon-overlay.js‎

Lines changed: 3 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -428,103 +428,7 @@ function closeFullscreen() {
428428
}
429429

430430
function injectStyle() {
431-
const css = `
432-
.minvid__overlay__bottom_container {
433-
align-items: center;
434-
background-color: rgba(0,0,0,0.8);
435-
opacity: 0;
436-
border-radius: 0 0 4px 4px;
437-
height: 100%;
438-
justify-content: center;
439-
left: 4%;
440-
max-height: 80px;
441-
max-width: 36px;
442-
padding: 2px 2px 4px;
443-
position: absolute;
444-
bottom: 0;
445-
width: 100%;
446-
z-index: 1000;
447-
}
448-
449-
.minvid__overlay__container {
450-
align-items: center;
451-
background-color: rgba(0,0,0,0.8);
452-
opacity: 0;
453-
border-radius: 0 0 4px 4px;
454-
height: 100%;
455-
justify-content: center;
456-
left: 4%;
457-
max-height: 80px;
458-
max-width: 36px;
459-
padding: 2px 2px 4px;
460-
position: absolute;
461-
top: 0;
462-
width: 100%;
463-
z-index: 1000;
464-
}
465-
466-
.minvid__overlay__container:hover,
467-
.minvid__overlay__bottom_container:hover {
468-
background: rgba(0,0,0,0.9);
469-
}
470-
471-
.minvid__overlay__icon {
472-
display: block;
473-
cursor: pointer;
474-
height: 40%;
475-
opacity: 0.7;
476-
width: 100%;
477-
}
478-
479-
#minvid__overlay__icon__play {
480-
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNzQiIHZpZXdCb3g9IjAgMCA5NiA3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+TWluIFZpZCBEYXJrIENvcHk8L3RpdGxlPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTAgOC4wMDdDMCAzLjU4NSAzLjU4OCAwIDggMGg4MGM0LjQxOSAwIDggMy41ODIgOCA4LjAwN3Y1Ny45ODZDOTYgNzAuNDE1IDkyLjQxMiA3NCA4OCA3NEg4Yy00LjQxOSAwLTgtMy41ODItOC04LjAwN1Y4LjAwN3pNNyAyNmE1IDUgMCAwIDEgNS4wMDYtNWg3MS45ODhBNSA1IDAgMCAxIDg5IDI2djM2YTUgNSAwIDAgMS01LjAwNiA1SDEyLjAwNkE1IDUgMCAwIDEgNyA2MlYyNnoiLz48cGF0aCBkPSJNMTIgMzcuOTk3QTMuOTkzIDMuOTkzIDAgMCAxIDE1Ljk5OCAzNGgyNy4wMDRBNCA0IDAgMCAxIDQ3IDM3Ljk5N3YyMC4wMDZBMy45OTMgMy45OTMgMCAwIDEgNDMuMDAyIDYySDE1Ljk5OEE0IDQgMCAwIDEgMTIgNTguMDAzVjM3Ljk5N3ptMTEuNSA0LjM3YzAtLjMwOS4yMjItLjQ1LjQ5OS0uMzE2bDEyLjc5NCA2LjIwN2MuMjc1LjEzNC4yNzcuMzUgMCAuNDg0TDIzLjk5OSA1NC45NWMtLjI3Ni4xMzMtLjQ5OS0uMDA4LS40OTktLjMxNlY0Mi4zNjd6Ii8+PC9nPjwvc3ZnPg==") no-repeat;
481-
background-position: center bottom;
482-
background-size: 32px auto;
483-
}
484-
485-
#minvid__overlay__icon__add {
486-
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8cG9seWdvbiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI4LjQgNS42IDguNCAwIDUuNiAwIDUuNiA1LjYgMCA1LjYgMCA4LjQgNS42IDguNCA1LjYgMTQgOC40IDE0IDguNCA4LjQgMTQgOC40IDE0IDUuNiI+PC9wb2x5Z29uPg0KICAgIDwvZz4NCjwvc3ZnPg==") no-repeat;
487-
background-position: center bottom;
488-
background-size: 25px auto;
489-
margin-top: 5px;
490-
}
491-
492-
.minvid__overlay__wrapper:hover .minvid__overlay__container,
493-
.minvid__overlay__wrapper:hover .minvid__overlay__bottom_container {
494-
opacity: 1;
495-
/*background-color: rgba(0, 0, 0, .8);*/
496-
/*animation-name: fade;
497-
animation-duration: 4s;
498-
animation-iteration-count: initial;
499-
animation-fill-mode: forwards;*/
500-
}
501-
502-
#minvid__overlay__icon__play:hover,
503-
#minvid__overlay__icon__add:hover {
504-
opacity: 1;
505-
}
506-
507-
.minvid__overlay__container.fullscreen {
508-
display: none;
509-
}
510-
511-
@keyframes fade {
512-
0% {opacity: 0}
513-
5%, 80% {opacity: 1}
514-
100% {opacity: 0}
515-
}
516-
517-
`;
518-
519-
const head = document.head;
520-
const style = document.createElement('style');
521-
522-
style.type = 'text/css';
523-
if (style.styleSheet) {
524-
style.styleSheet.cssText = css;
525-
} else {
526-
style.appendChild(document.createTextNode(css));
527-
}
528-
529-
head.appendChild(style);
431+
browser.runtime.sendMessage({
432+
title: 'inject-style'
433+
});
530434
}

‎webextension/manifest.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
{
1212
"matches": ["https://*.youtube.com/*", "https://vimeo.com/*", "https://soundcloud.com/*"],
1313
"js": ["content-scripts/icon-overlay.js"],
14-
"css": ["content-scripts/icon-overlay.css"],
1514
"all_frames": true
1615
}
1716
],

0 commit comments

Comments
 (0)