From 9a39d0a7e2896edd4a6deebad00b8550cfffc15b Mon Sep 17 00:00:00 2001 From: jbukl Date: Fri, 20 Oct 2023 02:37:47 -0400 Subject: [PATCH 1/5] fix: chromium clipboard access on chromium, backend calls to clipboardGet are forwarded to an offscreen script --- dev/data/manifest-variants.json | 9 +++ ext/css/offscreen.css | 30 +++++++++ ext/js/background/backend.js | 73 +++++++++++++++++++-- ext/js/display/search-display-controller.js | 2 +- ext/js/offscreen/offscreen-main.js | 25 +++++++ ext/js/offscreen/offscreen.js | 70 ++++++++++++++++++++ ext/offscreen.html | 40 +++++++++++ 7 files changed, 242 insertions(+), 7 deletions(-) create mode 100644 ext/css/offscreen.css create mode 100644 ext/js/offscreen/offscreen-main.js create mode 100644 ext/js/offscreen/offscreen.js create mode 100644 ext/offscreen.html diff --git a/dev/data/manifest-variants.json b/dev/data/manifest-variants.json index 26d91d263e..7f91e58239 100644 --- a/dev/data/manifest-variants.json +++ b/dev/data/manifest-variants.json @@ -167,6 +167,15 @@ "pattern": "^(.*)(?:\\.\\s*)?$", "patternFlags": "", "replacement": "$1. This is a development build." + }, + { + "action": "add", + "path": [ + "permissions" + ], + "items": [ + "offscreen" + ] } ] }, diff --git a/ext/css/offscreen.css b/ext/css/offscreen.css new file mode 100644 index 0000000000..ab28302565 --- /dev/null +++ b/ext/css/offscreen.css @@ -0,0 +1,30 @@ +/* + * Copyright (C) 2023 Yomitan Authors + * Copyright (C) 2022 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* stylelint-disable declaration-no-important */ +#clipboard-rich-content-paste-target * { + background-image: none !important; + list-style-image: none !important; + content: none !important; + cursor: auto !important; + border-image-source: none !important; + offset-path: none !important; + -webkit-mask-image: none !important; + mask-image: none !important; +} +/* stylelint-enable declaration-no-important */ diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js index 565f4abf3c..57565eec18 100644 --- a/ext/js/background/backend.js +++ b/ext/js/background/backend.js @@ -57,12 +57,19 @@ class Backend { }); this._anki = new AnkiConnect(); this._mecab = new Mecab(); - this._clipboardReader = new ClipboardReader({ - // eslint-disable-next-line no-undef - document: (typeof document === 'object' && document !== null ? document : null), - pasteTargetSelector: '#clipboard-paste-target', - richContentPasteTargetSelector: '#clipboard-rich-content-paste-target' - }); + + this._clipboardReader = { + getText: this._getTextOffscreen.bind(this) + }; + if (!chrome || !chrome.offscreen) { + this._clipboardReader = new ClipboardReader({ + // eslint-disable-next-line no-undef + document: (typeof document === 'object' && document !== null ? document : null), + pasteTargetSelector: '#clipboard-paste-target', + richContentPasteTargetSelector: '#clipboard-rich-content-paste-target' + }); + } + this._clipboardMonitor = new ClipboardMonitor({ japaneseUtil: this._japaneseUtil, clipboardReader: this._clipboardReader @@ -97,6 +104,8 @@ class Backend { this._permissions = null; this._permissionsUtil = new PermissionsUtil(); + this._creatingOffscreen = null; + this._messageHandlers = new Map([ ['requestBackendReadySignal', {async: false, contentScript: true, handler: this._onApiRequestBackendReadySignal.bind(this)}], ['optionsGet', {async: false, contentScript: true, handler: this._onApiOptionsGet.bind(this)}], @@ -557,6 +566,21 @@ class Backend { return this._clipboardReader.getText(false); } + async _getTextOffscreen(useRichText) { + await this._setupOffscreenDocument(); + return new Promise((resolve, reject) => { + const callback = (response) => { + try { + resolve(this._getMessageResponseResult(response)); + } catch (error) { + reject(error); + } + }; + + chrome.runtime.sendMessage({action: 'clipboardGetOffscreen', params: {useRichText}}, callback); + }); + } + async _onApiGetDisplayTemplatesHtml() { return await this._fetchAsset('/display-templates.html'); } @@ -2262,4 +2286,41 @@ class Backend { return {targetTabId, targetFrameId}; } + + // https://developer.chrome.com/docs/extensions/reference/offscreen/ + async _setupOffscreenDocument() { + // Check all windows controlled by the service worker to see if one + // of them is the offscreen document with the given path + if (await this._hasOffscreenDocument()) { + return; + } + + // create offscreen document + if (this._creatingOffscreen) { + await this._creatingOffscreen; + } else { + this._creatingOffscreen = chrome.offscreen.createDocument({ + url: 'offscreen.html', + reasons: ['CLIPBOARD'], + justification: 'reason for needing the document' + }); + await this._creatingOffscreen; + this._creatingOffscreen = null; + } + } + async _hasOffscreenDocument() { + const offscreenUrl = chrome.runtime.getURL('offscreen.html'); + if (chrome.runtime.getContexts) { + const contexts = await chrome.runtime.getContexts({ + contextTypes: ['OFFSCREEN_DOCUMENT'], + documentUrls: [offscreenUrl] + }); + return Boolean(contexts.length); + } else { + const matchedClients = await clients.matchAll(); + return await matchedClients.some((client) => { + client.url.includes(chrome.runtime.id); + }); + } + } } diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js index 25d9d6c206..5a271e058b 100644 --- a/ext/js/display/search-display-controller.js +++ b/ext/js/display/search-display-controller.js @@ -44,7 +44,7 @@ class SearchDisplayController { this._clipboardMonitor = new ClipboardMonitor({ japaneseUtil, clipboardReader: { - getText: async () => (await yomichan.api.clipboardGet()) + getText: yomichan.api.clipboardGet.bind(yomichan.api) } }); this._messageHandlers = new Map(); diff --git a/ext/js/offscreen/offscreen-main.js b/ext/js/offscreen/offscreen-main.js new file mode 100644 index 0000000000..808e776650 --- /dev/null +++ b/ext/js/offscreen/offscreen-main.js @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2023 Yomitan Authors + * Copyright (C) 2020-2022 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * Offscreen + */ + +(() => { + new Offscreen(); +})(); diff --git a/ext/js/offscreen/offscreen.js b/ext/js/offscreen/offscreen.js new file mode 100644 index 0000000000..1ff9aae3ee --- /dev/null +++ b/ext/js/offscreen/offscreen.js @@ -0,0 +1,70 @@ +/* + * Copyright (C) 2023 Yomitan Authors + * Copyright (C) 2016-2022 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * ClipboardReader + * Environment + */ + +/** + * This class controls the core logic of the extension, including API calls + * and various forms of communication between browser tabs and external applications. + */ +class Offscreen { + /** + * Creates a new instance. + */ + constructor() { + this._clipboardReader = new ClipboardReader({ + // eslint-disable-next-line no-undef + document: (typeof document === 'object' && document !== null ? document : null), + pasteTargetSelector: '#clipboard-paste-target', + richContentPasteTargetSelector: '#clipboard-rich-content-paste-target' + }); + + this._messageHandlers = new Map([ + ['clipboardGetOffscreen', {async: true, contentScript: true, handler: this._getTextHandler.bind(this)}] + ]); + + const onMessage = this._onMessage.bind(this); + chrome.runtime.onMessage.addListener(onMessage); + } + + _getTextHandler({useRichText}) { + return this._clipboardReader.getText(useRichText); + } + + _onMessage({action, params}, sender, callback) { + const messageHandler = this._messageHandlers.get(action); + if (typeof messageHandler === 'undefined') { return false; } + this._validatePrivilegedMessageSender(sender); + + return invokeMessageHandler(messageHandler, params, callback, sender); + } + + _validatePrivilegedMessageSender(sender) { + let {url} = sender; + if (typeof url === 'string' && yomichan.isExtensionUrl(url)) { return; } + const {tab} = url; + if (typeof tab === 'object' && tab !== null) { + ({url} = tab); + if (typeof url === 'string' && yomichan.isExtensionUrl(url)) { return; } + } + throw new Error('Invalid message sender'); + } +} diff --git a/ext/offscreen.html b/ext/offscreen.html new file mode 100644 index 0000000000..85576998b0 --- /dev/null +++ b/ext/offscreen.html @@ -0,0 +1,40 @@ + + + + + + Offscreen + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + From 4c3f6f1a1714b575b18482080dbf4a235d5a1ad3 Mon Sep 17 00:00:00 2001 From: jbukl Date: Fri, 20 Oct 2023 16:08:56 -0400 Subject: [PATCH 2/5] chore: cleanup offscreen documentation code --- ext/js/background/backend.js | 39 ++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js index 57565eec18..abdf827103 100644 --- a/ext/js/background/backend.js +++ b/ext/js/background/backend.js @@ -2289,38 +2289,33 @@ class Backend { // https://developer.chrome.com/docs/extensions/reference/offscreen/ async _setupOffscreenDocument() { - // Check all windows controlled by the service worker to see if one - // of them is the offscreen document with the given path if (await this._hasOffscreenDocument()) { return; } - - // create offscreen document if (this._creatingOffscreen) { await this._creatingOffscreen; - } else { - this._creatingOffscreen = chrome.offscreen.createDocument({ - url: 'offscreen.html', - reasons: ['CLIPBOARD'], - justification: 'reason for needing the document' - }); - await this._creatingOffscreen; - this._creatingOffscreen = null; + return; } + + this._creatingOffscreen = chrome.offscreen.createDocument({ + url: 'offscreen.html', + reasons: ['CLIPBOARD'], + justification: 'reason for needing the document' + }); + await this._creatingOffscreen; + this._creatingOffscreen = null; } async _hasOffscreenDocument() { const offscreenUrl = chrome.runtime.getURL('offscreen.html'); - if (chrome.runtime.getContexts) { - const contexts = await chrome.runtime.getContexts({ - contextTypes: ['OFFSCREEN_DOCUMENT'], - documentUrls: [offscreenUrl] - }); - return Boolean(contexts.length); - } else { + if (!chrome.runtime.getContexts) { // chrome version <116 const matchedClients = await clients.matchAll(); - return await matchedClients.some((client) => { - client.url.includes(chrome.runtime.id); - }); + return !!(await matchedClients.some((client) => client.url === offscreenUrl)); } + + const contexts = await chrome.runtime.getContexts({ + contextTypes: ['OFFSCREEN_DOCUMENT'], + documentUrls: [offscreenUrl] + }); + return !!contexts.length; } } From c50c52560c14837655361f2958e2d0acf0455a21 Mon Sep 17 00:00:00 2001 From: jbukl Date: Fri, 20 Oct 2023 17:37:40 -0400 Subject: [PATCH 3/5] chore: some returns bool --- ext/js/background/backend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js index abdf827103..f5cbb349e0 100644 --- a/ext/js/background/backend.js +++ b/ext/js/background/backend.js @@ -2309,7 +2309,7 @@ class Backend { const offscreenUrl = chrome.runtime.getURL('offscreen.html'); if (!chrome.runtime.getContexts) { // chrome version <116 const matchedClients = await clients.matchAll(); - return !!(await matchedClients.some((client) => client.url === offscreenUrl)); + return await matchedClients.some((client) => client.url === offscreenUrl); } const contexts = await chrome.runtime.getContexts({ From e39d18aaf1b8541adf927ded6c12ac4f24972759 Mon Sep 17 00:00:00 2001 From: jbukl Date: Fri, 20 Oct 2023 23:26:31 -0400 Subject: [PATCH 4/5] chore: unused import --- ext/js/offscreen/offscreen.js | 1 - ext/offscreen.html | 1 - 2 files changed, 2 deletions(-) diff --git a/ext/js/offscreen/offscreen.js b/ext/js/offscreen/offscreen.js index 1ff9aae3ee..31e2c5d606 100644 --- a/ext/js/offscreen/offscreen.js +++ b/ext/js/offscreen/offscreen.js @@ -18,7 +18,6 @@ /* global * ClipboardReader - * Environment */ /** diff --git a/ext/offscreen.html b/ext/offscreen.html index 85576998b0..1169463662 100644 --- a/ext/offscreen.html +++ b/ext/offscreen.html @@ -23,7 +23,6 @@ - From 379fdcf2280939c72e1be4e4f38567149a108873 Mon Sep 17 00:00:00 2001 From: jbukl Date: Sat, 21 Oct 2023 12:33:51 -0400 Subject: [PATCH 5/5] fix: clipboard getImage, review comments implement getImage for offscreen requests move offscreen files, offscreen prep is done in sw prep update permissions document for offscreen rearrange permissions --- dev/data/manifest-variants.json | 26 ++++++---- docs/permissions.md | 5 ++ ext/css/offscreen.css | 30 ----------- ext/js/background/backend.js | 52 ++++++++++++------- .../offscreen-main.js | 0 ext/js/{offscreen => background}/offscreen.js | 7 ++- ext/offscreen.html | 4 +- 7 files changed, 61 insertions(+), 63 deletions(-) delete mode 100644 ext/css/offscreen.css rename ext/js/{offscreen => background}/offscreen-main.js (100%) rename ext/js/{offscreen => background}/offscreen.js (86%) diff --git a/dev/data/manifest-variants.json b/dev/data/manifest-variants.json index 7f91e58239..82f789617f 100644 --- a/dev/data/manifest-variants.json +++ b/dev/data/manifest-variants.json @@ -82,7 +82,8 @@ "unlimitedStorage", "webRequest", "declarativeNetRequest", - "scripting" + "scripting", + "offscreen" ], "optional_permissions": [ "clipboardRead", @@ -167,15 +168,6 @@ "pattern": "^(.*)(?:\\.\\s*)?$", "patternFlags": "", "replacement": "$1. This is a development build." - }, - { - "action": "add", - "path": [ - "permissions" - ], - "items": [ - "offscreen" - ] } ] }, @@ -263,6 +255,13 @@ "permissions" ], "item": "declarativeNetRequest" + }, + { + "action": "remove", + "path": [ + "permissions" + ], + "item": "offscreen" } ], "excludeFiles": [ @@ -337,6 +336,13 @@ ], "item": "webRequestBlocking" }, + { + "action": "remove", + "path": [ + "permissions" + ], + "item": "offscreen" + }, { "action": "delete", "path": [ diff --git a/docs/permissions.md b/docs/permissions.md index b337bb318a..4fa7ab8395 100644 --- a/docs/permissions.md +++ b/docs/permissions.md @@ -23,6 +23,11 @@ Yomichan will sometimes need to inject stylesheets into webpages in order to properly display the search popup. +* `offscreen` __(Manifest v3 only)_
+ Yomitan uses this permission to create a secondary backend document that has DOM access, given that Manifest v3 + service workers do not. Service workers can then reach out to out to this document in order to complete + actions that require access to DOM APIs, such as any that require clipboard access. + * `clipboardWrite`
Yomichan supports simulating the `Ctrl+C` (copy to clipboard) keyboard shortcut when a definitions popup is open and focused. diff --git a/ext/css/offscreen.css b/ext/css/offscreen.css deleted file mode 100644 index ab28302565..0000000000 --- a/ext/css/offscreen.css +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright (C) 2023 Yomitan Authors - * Copyright (C) 2022 Yomichan Authors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -/* stylelint-disable declaration-no-important */ -#clipboard-rich-content-paste-target * { - background-image: none !important; - list-style-image: none !important; - content: none !important; - cursor: auto !important; - border-image-source: none !important; - offset-path: none !important; - -webkit-mask-image: none !important; - mask-image: none !important; -} -/* stylelint-enable declaration-no-important */ diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js index f5cbb349e0..308ae4d5a7 100644 --- a/ext/js/background/backend.js +++ b/ext/js/background/backend.js @@ -58,16 +58,18 @@ class Backend { this._anki = new AnkiConnect(); this._mecab = new Mecab(); - this._clipboardReader = { - getText: this._getTextOffscreen.bind(this) - }; - if (!chrome || !chrome.offscreen) { + if (!chrome.offscreen) { this._clipboardReader = new ClipboardReader({ // eslint-disable-next-line no-undef document: (typeof document === 'object' && document !== null ? document : null), pasteTargetSelector: '#clipboard-paste-target', richContentPasteTargetSelector: '#clipboard-rich-content-paste-target' }); + } else { + this._clipboardReader = { + getText: this._getTextOffscreen.bind(this), + getImage: this._getImageOffscreen.bind(this) + }; } this._clipboardMonitor = new ClipboardMonitor({ @@ -227,6 +229,9 @@ class Backend { await this._requestBuilder.prepare(); await this._environment.prepare(); + if (chrome.offscreen) { + await this._setupOffscreenDocument(); + } this._clipboardReader.browser = this._environment.getInfo().browser; try { @@ -566,21 +571,6 @@ class Backend { return this._clipboardReader.getText(false); } - async _getTextOffscreen(useRichText) { - await this._setupOffscreenDocument(); - return new Promise((resolve, reject) => { - const callback = (response) => { - try { - resolve(this._getMessageResponseResult(response)); - } catch (error) { - reject(error); - } - }; - - chrome.runtime.sendMessage({action: 'clipboardGetOffscreen', params: {useRichText}}, callback); - }); - } - async _onApiGetDisplayTemplatesHtml() { return await this._fetchAsset('/display-templates.html'); } @@ -1634,6 +1624,20 @@ class Backend { return await (json ? response.json() : response.text()); } + _sendMessagePromise(...args) { + return new Promise((resolve, reject) => { + const callback = (response) => { + try { + resolve(this._getMessageResponseResult(response)); + } catch (error) { + reject(error); + } + }; + + chrome.runtime.sendMessage(...args, callback); + }); + } + _sendMessageIgnoreResponse(...args) { const callback = () => this._checkLastError(chrome.runtime.lastError); chrome.runtime.sendMessage(...args, callback); @@ -2244,6 +2248,14 @@ class Backend { return results; } + async _getTextOffscreen(useRichText) { + return this._sendMessagePromise({action: 'clipboardGetTextOffscreen', params: {useRichText}}); + } + + async _getImageOffscreen() { + return this._sendMessagePromise({action: 'clipboardGetImageOffscreen'}); + } + _onApiOpenCrossFramePort({targetTabId, targetFrameId}, sender) { const sourceTabId = (sender && sender.tab ? sender.tab.id : null); if (typeof sourceTabId !== 'number') { @@ -2300,7 +2312,7 @@ class Backend { this._creatingOffscreen = chrome.offscreen.createDocument({ url: 'offscreen.html', reasons: ['CLIPBOARD'], - justification: 'reason for needing the document' + justification: 'Access to the clipboard' }); await this._creatingOffscreen; this._creatingOffscreen = null; diff --git a/ext/js/offscreen/offscreen-main.js b/ext/js/background/offscreen-main.js similarity index 100% rename from ext/js/offscreen/offscreen-main.js rename to ext/js/background/offscreen-main.js diff --git a/ext/js/offscreen/offscreen.js b/ext/js/background/offscreen.js similarity index 86% rename from ext/js/offscreen/offscreen.js rename to ext/js/background/offscreen.js index 31e2c5d606..bc41d189e2 100644 --- a/ext/js/offscreen/offscreen.js +++ b/ext/js/background/offscreen.js @@ -37,7 +37,8 @@ class Offscreen { }); this._messageHandlers = new Map([ - ['clipboardGetOffscreen', {async: true, contentScript: true, handler: this._getTextHandler.bind(this)}] + ['clipboardGetTextOffscreen', {async: true, contentScript: true, handler: this._getTextHandler.bind(this)}], + ['clipboardGetImageOffscreen', {async: true, contentScript: true, handler: this._getImageHandler.bind(this)}] ]); const onMessage = this._onMessage.bind(this); @@ -48,6 +49,10 @@ class Offscreen { return this._clipboardReader.getText(useRichText); } + _getImageHandler() { + return this._clipboardReader.getImage(); + } + _onMessage({action, params}, sender, callback) { const messageHandler = this._messageHandlers.get(action); if (typeof messageHandler === 'undefined') { return false; } diff --git a/ext/offscreen.html b/ext/offscreen.html index 1169463662..f773e5b1cb 100644 --- a/ext/offscreen.html +++ b/ext/offscreen.html @@ -24,8 +24,8 @@ - - + +