Merge pull request #2152 from stefansundin/fix-monochrome-icon-in-chrome

Fix monochrome icon in Chrome when `colorTheme == 'system'` (MV3 fix)
This commit is contained in:
Sami Vänttinen 2024-05-27 19:06:34 +03:00 committed by GitHub
commit cd3b2dc236
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 53 additions and 1 deletions

View file

@ -159,6 +159,7 @@
"Pixels": true,
"PREDEFINED_SITELIST": true,
"RED_BUTTON": true,
"retrieveColorScheme": true,
"sendMessage": true,
"showNotification": true,
"siteMatch": true,

View file

@ -143,6 +143,7 @@
"cookies",
"nativeMessaging",
"notifications",
"offscreen",
"storage",
"tabs",
"webNavigation",

View file

@ -38,6 +38,7 @@
"background/client.js",
"background/keepass.js",
"background/httpauth.js",
"background/offscreen.js",
"background/browserAction.js",
"background/page.js",
"background/event.js",

View file

@ -10,6 +10,7 @@ try {
'client.js',
'keepass.js',
'httpauth.js',
'offscreen.js',
'browserAction.js',
'page.js',
'event.js',

View file

@ -89,7 +89,7 @@ browserAction.generateIconName = async function(iconType) {
let style = 'colored';
if (page.settings.useMonochromeToolbarIcon) {
if (page.settings.colorTheme === 'system') {
style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
style = await retrieveColorScheme();
} else {
style = page.settings.colorTheme;
}

View file

@ -0,0 +1,31 @@
'use strict';
async function retrieveColorScheme() {
if (typeof window !== 'undefined') {
// Firefox does not support the offscreen API but its background script still has a window (so far)
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const offscreenUrl = browser.runtime.getURL('offscreen/offscreen.html');
const existingContexts = await browser.runtime.getContexts({
contextTypes: [ 'OFFSCREEN_DOCUMENT' ],
documentUrls: [ offscreenUrl ],
});
if (existingContexts.length === 0) {
await browser.offscreen.createDocument({
url: offscreenUrl,
reasons: [ 'MATCH_MEDIA' ],
justification: 'Retrieve color scheme',
});
}
const style = await browser.runtime.sendMessage({
target: 'offscreen',
action: 'retrieve_color_scheme',
});
if (!style) {
// if messaging fails then use "light" icon
return 'light';
}
return style;
}

View file

@ -40,6 +40,7 @@
"background/client.js",
"background/keepass.js",
"background/httpauth.js",
"background/offscreen.js",
"background/browserAction.js",
"background/page.js",
"background/event.js",

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="offscreen.js"></script>
</head>
<body></body>
</html>

View file

@ -0,0 +1,9 @@
chrome.runtime.onMessage.addListener(({ target, action }, sender, sendResponse) => {
if (target !== 'offscreen') {
return;
}
if (action === 'retrieve_color_scheme') {
const style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
sendResponse(style);
}
});