1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/*
* Copyright (C) 2021-2022 Kristóf Marussy <kristof@marussy.com>
*
* This file is part of Sophie.
*
* Sophie is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, version 3.
*
* 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 Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ServiceToMainIpcMessage, WebSource } from '@sophie/service-shared';
import colorString from 'color-string';
import { ipcRenderer, webFrame } from 'electron';
const DEFAULT_BG_COLOR = '#fff';
/**
* Styles a HTML element such that its background is opaque.
*
* If there is an existing background color, it will be made maximally opaque.
*
* If there is a background image, transparent areas will be colored `DEFAULT_BG_COLOR`.
*
* If the element was completely transparent, the function returns `false` instead.
* This allows leaving a `html` element transparent to let the background of the `body`
* element render in its palce.
*
* @param element The HTML element to style.
* @returns `true` if the background was made opaque.
* @see https://www.w3.org/TR/css-backgrounds-3/#body-background
*/
function tryMakeOpaque(element: HTMLElement): boolean {
const style = getComputedStyle(element);
const bgColor = colorString.get.rgb(style.backgroundColor);
if (bgColor[3] > 0) {
if (bgColor[3] < 1) {
bgColor[3] = 1;
// eslint-disable-next-line no-param-reassign -- Deliberately add element style.
element.style.backgroundColor = colorString.to.rgb(bgColor);
}
return true;
}
if (style.backgroundImage !== 'none') {
// eslint-disable-next-line no-param-reassign -- Deliberately add element style.
element.style.backgroundColor = DEFAULT_BG_COLOR;
return true;
}
return false;
}
if (webFrame.parent === null) {
// Inject CSS to simulate `browserView.setBackgroundColor`.
// This is injected before the page loads, so the styles from the website will overwrite it.
document.addEventListener('DOMContentLoaded', () => {
if (
document.documentElement.style.contain === '' &&
document.body.style.contain === ''
) {
if (
!tryMakeOpaque(document.documentElement) &&
!tryMakeOpaque(document.body)
) {
document.body.style.backgroundColor = DEFAULT_BG_COLOR;
}
} else if (!tryMakeOpaque(document.documentElement)) {
document.documentElement.style.backgroundColor = DEFAULT_BG_COLOR;
}
});
}
/**
* Fetches and executes the service inject script in the isolated world.
*
* The service inject script relies on exposed APIs, so this function can only
* be called after APIs have been exposed via `contextBridge` to the main world.
*
* We have to call `executeJavaScriptInIsolatedWorld` from the service preload script,
* beause there is no way currently (electron 16) to execute a script on a
* `WebFrameMain` in the main process by specifying a `WebSource`.
* Calling `executeJavaScriptInInsolatedWorld` on a `WebContents` in the main process
* will always inject the script into the _top-level_ frame, but here we
* are injecting into the _current_ frame instead.
* As a tradeoff, the promise returned by `executeJavaScriptInIsolatedWorld`
* will resolve to `unknown` (instead of rejecting) even if the injected script fails,
* because chromium doesn't dispatch main world errors to isolated worlds.
*
* @return A promise that only rejects if we fail to fetch the inject script.
* @see https://www.electronjs.org/docs/latest/api/web-frame#webframeexecutejavascriptinisolatedworldworldid-scripts-usergesture-callback
* @see https://www.electronjs.org/docs/latest/api/web-frame-main#frameexecutejavascriptcode-usergesture
* @see https://www.electronjs.org/docs/latest/api/web-contents#contentsexecutejavascriptinisolatedworldworldid-scripts-usergesture
*/
async function fetchAndExecuteInjectScript(): Promise<void> {
const apiExposedResponse: unknown = await ipcRenderer.invoke(
ServiceToMainIpcMessage.ApiExposedInMainWorld,
);
const injectSource = WebSource.parse(apiExposedResponse);
// Isolated world 0 is the main world.
await webFrame.executeJavaScriptInIsolatedWorld(0, [injectSource]);
}
fetchAndExecuteInjectScript().catch((error) => {
console.error('Failed to fetch inject source:', error);
});
|
