aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/css/settings.css3
-rw-r--r--ext/bg/js/api.js29
-rw-r--r--ext/bg/js/backend.js1
-rw-r--r--ext/bg/js/options.js3
-rw-r--r--ext/bg/js/settings-popup-preview.js25
-rw-r--r--ext/bg/js/settings.js8
-rw-r--r--ext/bg/search.html2
-rw-r--r--ext/bg/settings-popup-preview.html4
-rw-r--r--ext/bg/settings.html12
-rw-r--r--ext/fg/css/client.css11
-rw-r--r--ext/fg/float.html2
-rw-r--r--ext/fg/js/api.js4
-rw-r--r--ext/fg/js/popup.js71
-rw-r--r--ext/mixed/css/display.css8
14 files changed, 153 insertions, 30 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 09d60b26..21cbe256 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -128,7 +128,8 @@
content: counter(audio-source-id);
}
-#custom-popup-css {
+#custom-popup-css,
+#custom-popup-outer-css {
width: 100%;
min-height: 34px;
height: 96px;
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/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-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 53a5f1d0..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;
@@ -127,6 +144,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 +174,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 900b89bb..77815955 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);
@@ -283,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';
@@ -300,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();
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 6930830a..9d28b358 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en" class="yomichan-search">
+<html lang="en" data-yomichan-page="search">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index 3d426f7a..07caa271 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Yomichan Popup Preview</title>
- <link rel="stylesheet" type="text/css" href="/fg/css/client.css">
+ <link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
<style>
html {
transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
@@ -24,7 +24,7 @@
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
}
- iframe#yomichan-float {
+ iframe.yomichan-float {
resize: none;
}
.vertical-align-outer {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 08e56a09..ea3e8c18 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -252,8 +252,16 @@
</div>
<div class="form-group options-advanced">
- <label for="custom-popup-css">Custom popup CSS</label>
- <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+ <div class="row">
+ <div class="col-xs-6">
+ <label for="custom-popup-css">Custom popup CSS</label>
+ <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+ </div>
+ <div class="col-xs-6">
+ <label for="custom-popup-outer-css">Custom popup outer CSS</label>
+ <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
+ </div>
+ </div>
</div>
<div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 84098653..633c88ef 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -17,7 +17,7 @@
*/
-iframe#yomichan-float {
+iframe.yomichan-float {
all: initial;
background-color: #fff;
border: 1px solid #999;
@@ -29,13 +29,14 @@ iframe#yomichan-float {
box-sizing: border-box;
}
-iframe#yomichan-float[data-yomichan-theme=dark] {
+iframe.yomichan-float[data-yomichan-theme=dark],
+iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
background-color: #1e1e1e;
border: 1px solid #666;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
-iframe#yomichan-float.yomichan-float-full-width {
+iframe.yomichan-float.yomichan-float-full-width {
border-left: none;
border-right: none;
left: 0 !important;
@@ -45,13 +46,13 @@ iframe#yomichan-float.yomichan-float-full-width {
resize: none;
}
-iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
+iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
border-bottom: none;
top: auto !important;
bottom: 0 !important;
}
-iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above {
+iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
border-top: none;
top: 0 !important;
bottom: auto !important;
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 2504f448..580a7963 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en" class="yomichan-float">
+<html lang="en" data-yomichan-page="float">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
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 ef4cdb67..2a9670fc 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -27,7 +27,7 @@ class Popup {
this.child = null;
this.childrenSupported = true;
this.container = document.createElement('iframe');
- this.container.id = 'yomichan-float';
+ this.container.className = 'yomichan-float';
this.container.addEventListener('mousedown', e => e.stopPropagation());
this.container.addEventListener('scroll', e => e.stopPropagation());
this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
@@ -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;
});
}
@@ -271,19 +273,16 @@ class Popup {
}
updateTheme() {
- this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme);
+ this.container.dataset.yomichanTheme = this.options.general.popupOuterTheme;
+ this.container.dataset.yomichanSiteColor = this.getSiteColor();
}
- getTheme(themeName) {
- if (themeName === 'auto') {
- const color = [255, 255, 255];
- Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
- Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
- const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
- themeName = dark ? 'dark' : 'default';
- }
-
- return themeName;
+ getSiteColor() {
+ const color = [255, 255, 255];
+ Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
+ Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
+ const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
+ return dark ? 'dark' : 'light';
}
static addColor(target, color) {
@@ -337,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');
@@ -378,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;
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7ebad090..7793ddeb 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,8 +30,8 @@
* General
*/
-html.yomichan-float:not([data-yomichan-theme]),
-html.yomichan-float:not([data-yomichan-theme]) body {
+html:root[data-yomichan-page=float]:not([data-yomichan-theme]),
+html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
background-color: transparent;
}
@@ -82,8 +82,8 @@ ol, ul {
padding-bottom: 10px;
}
-html:root.yomichan-float .entry,
-html:root.yomichan-float .note {
+html:root[data-yomichan-page=float] .entry,
+html:root[data-yomichan-page=float] .note {
padding-left: 10px;
padding-right: 10px;
}