summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 11:46:27 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 12:12:51 -0400
commitc9158a37b509ba58cd1e364e3d7a31cd43de5789 (patch)
tree248de2c0fd48df1003b831488ff857730d41ae73
parent32729482844d7af9e9f307a69c96ea34f1e66011 (diff)
Allow outer popup stylesheets to be injected
-rw-r--r--ext/bg/js/api.js29
-rw-r--r--ext/bg/js/backend.js1
-rw-r--r--ext/fg/js/api.js4
-rw-r--r--ext/fg/js/popup.js50
4 files changed, 84 insertions, 0 deletions
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;