Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move DB into offscreen (on Chrome) to avoid lookup delays caused by service worker startup lag #325

Merged
merged 6 commits into from
Nov 18, 2023
Merged

Move DB into offscreen (on Chrome) to avoid lookup delays caused by service worker startup lag #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9162d95
Move dictionary db to offscreen
web-flow Nov 11, 2023
47b4d79
Merge branch 'master' into offscreen-db
djahandarie Nov 12, 2023
4be1e6f
separate offscreen proxies from backend.js
praschke Nov 12, 2023
9b62b8d
whitespace
praschke Nov 12, 2023
6290a4f
Fix text replacements offscreen
jbukl Nov 17, 2023
6a7dfc0
Merge branch 'master' into offscreen-merge
jbukl Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,8 @@
"ext/js/yomitan.js",
"ext/js/accessibility/accessibility-controller.js",
"ext/js/background/backend.js",
"ext/js/background/offscreen.js",
"ext/js/background/offscreen-proxy.js",
"ext/js/background/profile-conditions-util.js",
"ext/js/background/request-builder.js",
"ext/js/background/script-manager.js",
Expand Down
163 changes: 54 additions & 109 deletions ext/js/background/backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {Translator} from '../language/translator.js';
import {AudioDownloader} from '../media/audio-downloader.js';
import {MediaUtil} from '../media/media-util.js';
import {yomitan} from '../yomitan.js';
import {OffscreenProxy, DictionaryDatabaseProxy, TranslatorProxy, ClipboardReaderProxy} from './offscreen-proxy.js';
import {ProfileConditionsUtil} from './profile-conditions-util.js';
import {RequestBuilder} from './request-builder.js';
import {ScriptManager} from './script-manager.js';
Expand All @@ -50,26 +51,26 @@ export class Backend {
constructor() {
this._japaneseUtil = new JapaneseUtil(wanakana);
this._environment = new Environment();
this._dictionaryDatabase = new DictionaryDatabase();
this._translator = new Translator({
japaneseUtil: this._japaneseUtil,
database: this._dictionaryDatabase
});
this._anki = new AnkiConnect();
this._mecab = new Mecab();

if (!chrome.offscreen) {
this._dictionaryDatabase = new DictionaryDatabase();
this._translator = new Translator({
japaneseUtil: this._japaneseUtil,
database: this._dictionaryDatabase
});
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._offscreen = new OffscreenProxy();
this._dictionaryDatabase = new DictionaryDatabaseProxy(this._offscreen);
this._translator = new TranslatorProxy(this._offscreen);
this._clipboardReader = new ClipboardReaderProxy(this._offscreen);
}

this._clipboardMonitor = new ClipboardMonitor({
Expand Down Expand Up @@ -106,8 +107,6 @@ export 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)}],
Expand Down Expand Up @@ -230,7 +229,7 @@ export class Backend {
await this._requestBuilder.prepare();
await this._environment.prepare();
if (chrome.offscreen) {
await this._setupOffscreenDocument();
await this._offscreen.prepare();
}
this._clipboardReader.browser = this._environment.getInfo().browser;

Expand Down Expand Up @@ -754,6 +753,49 @@ export class Backend {
}
}

_onApiOpenCrossFramePort({targetTabId, targetFrameId}, sender) {
const sourceTabId = (sender && sender.tab ? sender.tab.id : null);
if (typeof sourceTabId !== 'number') {
throw new Error('Port does not have an associated tab ID');
}
const sourceFrameId = sender.frameId;
if (typeof sourceFrameId !== 'number') {
throw new Error('Port does not have an associated frame ID');
}

const sourceDetails = {
name: 'cross-frame-communication-port',
otherTabId: targetTabId,
otherFrameId: targetFrameId
};
const targetDetails = {
name: 'cross-frame-communication-port',
otherTabId: sourceTabId,
otherFrameId: sourceFrameId
};
let sourcePort = chrome.tabs.connect(sourceTabId, {frameId: sourceFrameId, name: JSON.stringify(sourceDetails)});
let targetPort = chrome.tabs.connect(targetTabId, {frameId: targetFrameId, name: JSON.stringify(targetDetails)});

const cleanup = () => {
this._checkLastError(chrome.runtime.lastError);
if (targetPort !== null) {
targetPort.disconnect();
targetPort = null;
}
if (sourcePort !== null) {
sourcePort.disconnect();
sourcePort = null;
}
};

sourcePort.onMessage.addListener((message) => { targetPort.postMessage(message); });
targetPort.onMessage.addListener((message) => { sourcePort.postMessage(message); });
sourcePort.onDisconnect.addListener(cleanup);
targetPort.onDisconnect.addListener(cleanup);

return {targetTabId, targetFrameId};
}

// Command handlers

async _onCommandOpenSearchPage(params) {
Expand Down Expand Up @@ -1624,20 +1666,6 @@ export 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);
Expand Down Expand Up @@ -2239,87 +2267,4 @@ export 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') {
throw new Error('Port does not have an associated tab ID');
}
const sourceFrameId = sender.frameId;
if (typeof sourceFrameId !== 'number') {
throw new Error('Port does not have an associated frame ID');
}

const sourceDetails = {
name: 'cross-frame-communication-port',
otherTabId: targetTabId,
otherFrameId: targetFrameId
};
const targetDetails = {
name: 'cross-frame-communication-port',
otherTabId: sourceTabId,
otherFrameId: sourceFrameId
};
let sourcePort = chrome.tabs.connect(sourceTabId, {frameId: sourceFrameId, name: JSON.stringify(sourceDetails)});
let targetPort = chrome.tabs.connect(targetTabId, {frameId: targetFrameId, name: JSON.stringify(targetDetails)});

const cleanup = () => {
this._checkLastError(chrome.runtime.lastError);
if (targetPort !== null) {
targetPort.disconnect();
targetPort = null;
}
if (sourcePort !== null) {
sourcePort.disconnect();
sourcePort = null;
}
};

sourcePort.onMessage.addListener((message) => { targetPort.postMessage(message); });
targetPort.onMessage.addListener((message) => { sourcePort.postMessage(message); });
sourcePort.onDisconnect.addListener(cleanup);
targetPort.onDisconnect.addListener(cleanup);

return {targetTabId, targetFrameId};
}

// https://developer.chrome.com/docs/extensions/reference/offscreen/
async _setupOffscreenDocument() {
if (await this._hasOffscreenDocument()) {
return;
}
if (this._creatingOffscreen) {
await this._creatingOffscreen;
return;
}

this._creatingOffscreen = chrome.offscreen.createDocument({
url: 'offscreen.html',
reasons: ['CLIPBOARD'],
justification: 'Access to the clipboard'
});
await this._creatingOffscreen;
this._creatingOffscreen = null;
}
async _hasOffscreenDocument() {
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);
}

const contexts = await chrome.runtime.getContexts({
contextTypes: ['OFFSCREEN_DOCUMENT'],
documentUrls: [offscreenUrl]
});
return !!contexts.length;
}
}
Loading
Loading