diff --git a/webextension/background.js b/webextension/background.js index 915614c..1e19c79 100644 --- a/webextension/background.js +++ b/webextension/background.js @@ -55,7 +55,7 @@ function onStorageChanged(changes) { browser.runtime.onMessage.addListener(onLaunch); -function onLaunch(opts) { +function onLaunch(opts, sender) { const title = opts.title; delete opts.title; @@ -76,4 +76,13 @@ function onLaunch(opts) { launchVideo(opts); } else if (title === 'metric') sendMetricsData(opts); + else if (title === 'inject-style') { + if ('tab' in sender) { + browser.tabs.insertCSS(sender.tab.id, { + file: '/content-scripts/icon-overlay.css', + frameId: opts.frameId, + runAt: 'document_start' + }); + } + } } diff --git a/webextension/content-scripts/icon-overlay.css b/webextension/content-scripts/icon-overlay.css new file mode 100644 index 0000000..f333a20 --- /dev/null +++ b/webextension/content-scripts/icon-overlay.css @@ -0,0 +1,84 @@ +.minvid__overlay__bottom_container { + align-items: center; + background-color: rgba(0,0,0,0.8); + opacity: 0; + border-radius: 0 0 4px 4px; + height: 100%; + justify-content: center; + left: 4%; + max-height: 80px; + max-width: 36px; + padding: 2px 2px 4px; + position: absolute; + bottom: 0; + width: 100%; + z-index: 1000; +} + +.minvid__overlay__container { + align-items: center; + background-color: rgba(0,0,0,0.8); + opacity: 0; + border-radius: 0 0 4px 4px; + height: 100%; + justify-content: center; + left: 4%; + max-height: 80px; + max-width: 36px; + padding: 2px 2px 4px; + position: absolute; + top: 0; + width: 100%; + z-index: 1000; +} + +.minvid__overlay__container:hover, +.minvid__overlay__bottom_container:hover { + background: rgba(0,0,0,0.9); +} + +.minvid__overlay__icon { + display: block; + cursor: pointer; + height: 40%; + opacity: 0.7; + width: 100%; +} + +#minvid__overlay__icon__play { + background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iY29udGV4dC1maWxsICNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTAgOC4wMDdDMCAzLjU4NSAzLjU4OCAwIDggMGg4MGM0LjQxOSAwIDggMy41ODIgOCA4LjAwN3Y1Ny45ODZDOTYgNzAuNDE1IDkyLjQxMiA3NCA4OCA3NEg4Yy00LjQxOSAwLTgtMy41ODItOC04LjAwN1Y4LjAwN3pNNyAyNmE1IDUgMCAwIDEgNS4wMDYtNWg3MS45ODhBNSA1IDAgMCAxIDg5IDI2djM2YTUgNSAwIDAgMS01LjAwNiA1SDEyLjAwNkE1IDUgMCAwIDEgNyA2MlYyNnoiLz48cGF0aCBkPSJNMTIgMzcuOTk3QTMuOTkzIDMuOTkzIDAgMCAxIDE1Ljk5OCAzNGgyNy4wMDRBNCA0IDAgMCAxIDQ3IDM3Ljk5N3YyMC4wMDZBMy45OTMgMy45OTMgMCAwIDEgNDMuMDAyIDYySDE1Ljk5OEE0IDQgMCAwIDEgMTIgNTguMDAzVjM3Ljk5N3ptMTEuNSA0LjM3YzAtLjMwOS4yMjItLjQ1LjQ5OS0uMzE2bDEyLjc5NCA2LjIwN2MuMjc1LjEzNC4yNzcuMzUgMCAuNDg0TDIzLjk5OSA1NC45NWMtLjI3Ni4xMzMtLjQ5OS0uMDA4LS40OTktLjMxNlY0Mi4zNjd6Ii8+PC9nPjwvc3ZnPg==") no-repeat; + background-position: center bottom; + background-size: 32px auto; +} + +#minvid__overlay__icon__add { + background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguNCA1LjZWMEg1LjZ2NS42SDB2Mi44aDUuNlYxNGgyLjhWOC40SDE0VjUuNnoiIGZpbGw9ImNvbnRleHQtZmlsbCAjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=") no-repeat; + background-position: center bottom; + background-size: 25px auto; + margin-top: 5px; +} + +.minvid__overlay__wrapper:hover .minvid__overlay__container, +.minvid__overlay__wrapper:hover .minvid__overlay__bottom_container { + opacity: 1; + /*background-color: rgba(0, 0, 0, .8);*/ + /*animation-name: fade; + animation-duration: 4s; + animation-iteration-count: initial; + animation-fill-mode: forwards;*/ +} + +#minvid__overlay__icon__play:hover, +#minvid__overlay__icon__add:hover { + opacity: 1; +} + +.minvid__overlay__container.fullscreen { + display: none; +} + +@keyframes fade { + 0% {opacity: 0} + 5%, 80% {opacity: 1} + 100% {opacity: 0} +} diff --git a/webextension/content-scripts/icon-overlay.js b/webextension/content-scripts/icon-overlay.js index 8bdc9f9..b52b040 100644 --- a/webextension/content-scripts/icon-overlay.js +++ b/webextension/content-scripts/icon-overlay.js @@ -428,103 +428,7 @@ function closeFullscreen() { } function injectStyle() { - const css = ` -.minvid__overlay__bottom_container { - align-items: center; - background-color: rgba(0,0,0,0.8); - opacity: 0; - border-radius: 0 0 4px 4px; - height: 100%; - justify-content: center; - left: 4%; - max-height: 80px; - max-width: 36px; - padding: 2px 2px 4px; - position: absolute; - bottom: 0; - width: 100%; - z-index: 1000; -} - -.minvid__overlay__container { - align-items: center; - background-color: rgba(0,0,0,0.8); - opacity: 0; - border-radius: 0 0 4px 4px; - height: 100%; - justify-content: center; - left: 4%; - max-height: 80px; - max-width: 36px; - padding: 2px 2px 4px; - position: absolute; - top: 0; - width: 100%; - z-index: 1000; -} - -.minvid__overlay__container:hover, -.minvid__overlay__bottom_container:hover { - background: rgba(0,0,0,0.9); -} - -.minvid__overlay__icon { - display: block; - cursor: pointer; - height: 40%; - opacity: 0.7; - width: 100%; -} - -#minvid__overlay__icon__play { - background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNzQiIHZpZXdCb3g9IjAgMCA5NiA3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+TWluIFZpZCBEYXJrIENvcHk8L3RpdGxlPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTAgOC4wMDdDMCAzLjU4NSAzLjU4OCAwIDggMGg4MGM0LjQxOSAwIDggMy41ODIgOCA4LjAwN3Y1Ny45ODZDOTYgNzAuNDE1IDkyLjQxMiA3NCA4OCA3NEg4Yy00LjQxOSAwLTgtMy41ODItOC04LjAwN1Y4LjAwN3pNNyAyNmE1IDUgMCAwIDEgNS4wMDYtNWg3MS45ODhBNSA1IDAgMCAxIDg5IDI2djM2YTUgNSAwIDAgMS01LjAwNiA1SDEyLjAwNkE1IDUgMCAwIDEgNyA2MlYyNnoiLz48cGF0aCBkPSJNMTIgMzcuOTk3QTMuOTkzIDMuOTkzIDAgMCAxIDE1Ljk5OCAzNGgyNy4wMDRBNCA0IDAgMCAxIDQ3IDM3Ljk5N3YyMC4wMDZBMy45OTMgMy45OTMgMCAwIDEgNDMuMDAyIDYySDE1Ljk5OEE0IDQgMCAwIDEgMTIgNTguMDAzVjM3Ljk5N3ptMTEuNSA0LjM3YzAtLjMwOS4yMjItLjQ1LjQ5OS0uMzE2bDEyLjc5NCA2LjIwN2MuMjc1LjEzNC4yNzcuMzUgMCAuNDg0TDIzLjk5OSA1NC45NWMtLjI3Ni4xMzMtLjQ5OS0uMDA4LS40OTktLjMxNlY0Mi4zNjd6Ii8+PC9nPjwvc3ZnPg==") no-repeat; - background-position: center bottom; - background-size: 32px auto; -} - -#minvid__overlay__icon__add { - background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8cG9seWdvbiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI4LjQgNS42IDguNCAwIDUuNiAwIDUuNiA1LjYgMCA1LjYgMCA4LjQgNS42IDguNCA1LjYgMTQgOC40IDE0IDguNCA4LjQgMTQgOC40IDE0IDUuNiI+PC9wb2x5Z29uPg0KICAgIDwvZz4NCjwvc3ZnPg==") no-repeat; - background-position: center bottom; - background-size: 25px auto; - margin-top: 5px; -} - -.minvid__overlay__wrapper:hover .minvid__overlay__container, -.minvid__overlay__wrapper:hover .minvid__overlay__bottom_container { - opacity: 1; - /*background-color: rgba(0, 0, 0, .8);*/ - /*animation-name: fade; - animation-duration: 4s; - animation-iteration-count: initial; - animation-fill-mode: forwards;*/ -} - -#minvid__overlay__icon__play:hover, -#minvid__overlay__icon__add:hover { - opacity: 1; -} - -.minvid__overlay__container.fullscreen { - display: none; -} - -@keyframes fade { - 0% {opacity: 0} - 5%, 80% {opacity: 1} - 100% {opacity: 0} -} - -`; - - const head = document.head; - const style = document.createElement('style'); - - style.type = 'text/css'; - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } - - head.appendChild(style); + browser.runtime.sendMessage({ + title: 'inject-style' + }); } diff --git a/webextension/manifest.json b/webextension/manifest.json index 10b5d78..cc97b0b 100644 --- a/webextension/manifest.json +++ b/webextension/manifest.json @@ -11,7 +11,6 @@ { "matches": ["https://*.youtube.com/*", "https://vimeo.com/*", "https://soundcloud.com/*"], "js": ["content-scripts/icon-overlay.js"], - "css": ["content-scripts/icon-overlay.css"], "all_frames": true } ],