From 32729482844d7af9e9f307a69c96ea34f1e66011 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 13 Oct 2019 11:05:21 -0400 Subject: Adds setting for controlling the outer style of the popup --- ext/bg/js/options.js | 3 ++- ext/bg/js/settings.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index cadc4443..fac17d68 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -278,7 +278,8 @@ function profileOptionsCreateDefaults() { mainDictionary: '', popupTheme: 'default', popupOuterTheme: 'default', - customPopupCss: '' + customPopupCss: '', + customPopupOuterCss: '' }, audio: { diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 900b89bb..7eee7bce 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -42,6 +42,7 @@ async function formRead(options) { options.general.popupTheme = $('#popup-theme').val(); options.general.popupOuterTheme = $('#popup-outer-theme').val(); options.general.customPopupCss = $('#custom-popup-css').val(); + options.general.customPopupOuterCss = $('#custom-popup-outer-css').val(); options.audio.enabled = $('#audio-playback-enabled').prop('checked'); options.audio.autoPlay = $('#auto-play-audio').prop('checked'); @@ -112,6 +113,7 @@ async function formWrite(options) { $('#popup-theme').val(options.general.popupTheme); $('#popup-outer-theme').val(options.general.popupOuterTheme); $('#custom-popup-css').val(options.general.customPopupCss); + $('#custom-popup-outer-css').val(options.general.customPopupOuterCss); $('#audio-playback-enabled').prop('checked', options.audio.enabled); $('#auto-play-audio').prop('checked', options.audio.autoPlay); -- cgit v1.2.3 From c9158a37b509ba58cd1e364e3d7a31cd43de5789 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 13 Oct 2019 11:46:27 -0400 Subject: Allow outer popup stylesheets to be injected --- ext/bg/js/api.js | 29 +++++++++++++++++++++++++++++ ext/bg/js/backend.js | 1 + ext/fg/js/api.js | 4 ++++ ext/fg/js/popup.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+) (limited to 'ext/bg/js') diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js index f768e6f9..94a70c34 100644 --- a/ext/bg/js/api.js +++ b/ext/bg/js/api.js @@ -241,3 +241,32 @@ function apiFrameInformationGet(sender) { const frameId = sender.frameId; return Promise.resolve({frameId}); } + +function apiInjectStylesheet(css, sender) { + if (!sender.tab) { + return Promise.reject(new Error('Invalid tab')); + } + + const tabId = sender.tab.id; + const frameId = sender.frameId; + const details = { + code: css, + runAt: 'document_start', + cssOrigin: 'user', + allFrames: false + }; + if (typeof frameId === 'number') { + details.frameId = frameId; + } + + return new Promise((resolve, reject) => { + chrome.tabs.insertCSS(tabId, details, () => { + const e = chrome.runtime.lastError; + if (e) { + reject(new Error(e.message)); + } else { + resolve(); + } + }); + }); +} diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js index 453f4282..c1216d95 100644 --- a/ext/bg/js/backend.js +++ b/ext/bg/js/backend.js @@ -185,6 +185,7 @@ Backend.messageHandlers = { screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender), forward: ({action, params}, sender) => apiForward(action, params, sender), frameInformationGet: (params, sender) => apiFrameInformationGet(sender), + injectStylesheet: ({css}, sender) => apiInjectStylesheet(css, sender) }; window.yomichan_backend = new Backend(); diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js index a553e514..dcfb2a09 100644 --- a/ext/fg/js/api.js +++ b/ext/fg/js/api.js @@ -64,3 +64,7 @@ function apiForward(action, params) { function apiFrameInformationGet() { return utilInvoke('frameInformationGet'); } + +function apiInjectStylesheet(css) { + return utilInvoke('injectStylesheet', {css}); +} diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 880e3efe..73ed37e0 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -38,6 +38,7 @@ class Popup { this.visible = false; this.visibleOverride = null; this.options = null; + this.stylesheetInjectedViaApi = false; this.updateVisibility(); } @@ -75,6 +76,7 @@ class Popup { }); this.observeFullscreen(); this.onFullscreenChanged(); + this.setCustomOuterCss(this.options.general.customPopupOuterCss, false); this.isInjected = true; }); } @@ -334,6 +336,23 @@ class Popup { this.invokeApi('setCustomCss', {css}); } + async setCustomOuterCss(css, injectDirectly) { + // Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them. + if (this.stylesheetInjectedViaApi) { return; } + + if (injectDirectly || Popup.isOnExtensionPage()) { + Popup.injectOuterStylesheet(css); + } else { + if (!css) { return; } + try { + await apiInjectStylesheet(css); + this.stylesheetInjectedViaApi = true; + } catch (e) { + // NOP + } + } + } + clearAutoPlayTimer() { if (this.isInjected) { this.invokeApi('clearAutoPlayTimer'); @@ -375,4 +394,35 @@ class Popup { get url() { return window.location.href; } + + static isOnExtensionPage() { + try { + const url = chrome.runtime.getURL('/'); + return window.location.href.substr(0, url.length) === url; + } catch (e) { + // NOP + } + } + + static injectOuterStylesheet(css) { + if (Popup.outerStylesheet === null) { + if (!css) { return; } + Popup.outerStylesheet = document.createElement('style'); + Popup.outerStylesheet.id = "yomichan-popup-outer-stylesheet"; + } + + const outerStylesheet = Popup.outerStylesheet; + if (css) { + outerStylesheet.textContent = css; + + const par = document.head; + if (par && outerStylesheet.parentNode !== par) { + par.appendChild(outerStylesheet); + } + } else { + outerStylesheet.textContent = ''; + } + } } + +Popup.outerStylesheet = null; -- cgit v1.2.3 From 42d67249c9d912cbb39700f55bb33051f69055c7 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 13 Oct 2019 11:51:59 -0400 Subject: Update the popup preview to show live updates to outer CSS changes --- ext/bg/js/settings-popup-preview.js | 8 +++++++- ext/bg/js/settings.js | 6 ++++++ 2 files changed, 13 insertions(+), 1 deletion(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js index 53a5f1d0..68655fc9 100644 --- a/ext/bg/js/settings-popup-preview.js +++ b/ext/bg/js/settings-popup-preview.js @@ -127,6 +127,11 @@ class SettingsPopupPreview { this.frontend.popup.setCustomCss(css); } + setCustomOuterCss(css) { + if (this.frontend === null) { return; } + this.frontend.popup.setCustomOuterCss(css, true); + } + async updateSearch() { const exampleText = document.querySelector('#example-text'); if (exampleText === null) { return; } @@ -152,7 +157,8 @@ class SettingsPopupPreview { SettingsPopupPreview.messageHandlers = { setText: (self, {text}) => self.setText(text), - setCustomCss: (self, {css}) => self.setCustomCss(css) + setCustomCss: (self, {css}) => self.setCustomCss(css), + setCustomOuterCss: (self, {css}) => self.setCustomOuterCss(css) }; SettingsPopupPreview.instance = SettingsPopupPreview.create(); diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 7eee7bce..77815955 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -285,6 +285,7 @@ function showAppearancePreview() { const settings = $('#settings-popup-preview-settings'); const text = $('#settings-popup-preview-text'); const customCss = $('#custom-popup-css'); + const customOuterCss = $('#custom-popup-outer-css'); const frame = document.createElement('iframe'); frame.src = '/bg/settings-popup-preview.html'; @@ -302,6 +303,11 @@ function showAppearancePreview() { const params = {css: customCss.val()}; frame.contentWindow.postMessage({action, params}, '*'); }); + customOuterCss.on('input', () => { + const action = 'setCustomOuterCss'; + const params = {css: customOuterCss.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); container.append(frame); buttonContainer.remove(); -- cgit v1.2.3 From 1b96e69ea2bfe26ded82e2f058d30500290e9d2d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 13 Oct 2019 12:10:00 -0400 Subject: Placeholder and improve consistency of stylesheet rule priorities --- ext/bg/js/settings-popup-preview.js | 17 +++++++++++++++++ ext/bg/settings-popup-preview.html | 2 +- ext/bg/settings.html | 2 +- 3 files changed, 19 insertions(+), 2 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js index 68655fc9..7ccdc7f3 100644 --- a/ext/bg/js/settings-popup-preview.js +++ b/ext/bg/js/settings-popup-preview.js @@ -21,6 +21,7 @@ class SettingsPopupPreview { constructor() { this.frontend = null; this.apiOptionsGetOld = apiOptionsGet; + this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet; this.popupShown = false; this.themeChangeTimeout = null; } @@ -56,6 +57,9 @@ class SettingsPopupPreview { await this.frontend.isPrepared(); + // Overwrite popup + Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args); + // Update search this.updateSearch(); } @@ -76,6 +80,19 @@ class SettingsPopupPreview { return options; } + popupInjectOuterStylesheet(...args) { + // This simulates the stylesheet priorities when injecting using the web extension API. + const result = this.popupInjectOuterStylesheetOld(...args); + + const outerStylesheet = Popup.outerStylesheet; + const node = document.querySelector('#client-css'); + if (node !== null && outerStylesheet !== null) { + node.parentNode.insertBefore(outerStylesheet, node); + } + + return result; + } + onWindowResize() { if (this.frontend === null) { return; } const textSource = this.frontend.textSourceLast; diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html index bfe4550c..07caa271 100644 --- a/ext/bg/settings-popup-preview.html +++ b/ext/bg/settings-popup-preview.html @@ -4,7 +4,7 @@ Yomichan Popup Preview - +