136 lines
4.3 KiB
JavaScript
136 lines
4.3 KiB
JavaScript
// Outlook Relook — Content Script Entry Point
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const OR = window.OutlookRelook;
|
|
|
|
// Map setting keys to data attributes on <html>
|
|
const SETTING_TO_ATTR = {
|
|
compactTopBar: 'data-or-compact-topbar',
|
|
compactCommandBar: 'data-or-compact-commandbar',
|
|
compactMessageList: 'data-or-compact-messagelist',
|
|
compactReadingPane: 'data-or-compact-readingpane',
|
|
compactFolderPane: 'data-or-compact-folderpane',
|
|
narrowDateColumn: 'data-or-narrow-datecol',
|
|
compressComposeToolbar:'data-or-compact-compose',
|
|
readingPaneMaxWidth: 'data-or-reading-maxwidth',
|
|
hideCopilot: 'data-or-hide-copilot',
|
|
hideSuggestedReplies: 'data-or-hide-suggestedreplies',
|
|
hidePromoBanners: 'data-or-hide-promos',
|
|
hideFocusedOtherTabs: 'data-or-hide-focusedtabs',
|
|
hideSidebarAppIcons: 'data-or-hide-sidebaricons',
|
|
hideGroupsSection: 'data-or-hide-groups',
|
|
hideMyDayButtons: 'data-or-hide-myday',
|
|
hideSenderAvatars: 'data-or-hide-avatars',
|
|
hideFeatureDiscovery: 'data-or-hide-discovery',
|
|
hideVivaInsights: 'data-or-hide-viva',
|
|
hideUnreadOtherBanner: 'data-or-hide-unreadother',
|
|
hideActivityFeed: 'data-or-hide-activity',
|
|
unreadDistinction: 'data-or-unread-distinction',
|
|
previewOwnLine: 'data-or-preview-own-line',
|
|
normalizeFontWeight: 'data-or-normalize-font',
|
|
darkModeEmailFix: 'data-or-darkmode-fix',
|
|
};
|
|
|
|
// Non-boolean attributes
|
|
const SETTING_TO_ATTR_VALUE = {
|
|
messageListFontSize: 'data-or-fontsize',
|
|
};
|
|
|
|
function applyColorScheme(scheme) {
|
|
let resolved = scheme;
|
|
if (scheme === 'system') {
|
|
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
document.documentElement.setAttribute('data-outlook-relook-scheme', resolved);
|
|
}
|
|
|
|
function applySettingsToDOM(settings) {
|
|
// Boolean toggles -> data attributes
|
|
for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) {
|
|
document.documentElement.setAttribute(attr, String(!!settings[key]));
|
|
}
|
|
|
|
// Value-based attributes
|
|
for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) {
|
|
document.documentElement.setAttribute(attr, settings[key] || '');
|
|
}
|
|
|
|
// Color scheme
|
|
applyColorScheme(settings.colorScheme);
|
|
|
|
// Accent color
|
|
if (settings.accentColor) {
|
|
document.documentElement.style.setProperty('--or-accent', settings.accentColor);
|
|
}
|
|
|
|
console.log('[Outlook Relook] Settings applied to DOM');
|
|
}
|
|
|
|
function injectThemeCSS(theme) {
|
|
// Remove existing theme stylesheet
|
|
const existing = document.getElementById('outlook-relook-theme');
|
|
if (existing) existing.remove();
|
|
|
|
// Inject the theme CSS
|
|
const link = document.createElement('link');
|
|
link.id = 'outlook-relook-theme';
|
|
link.rel = 'stylesheet';
|
|
link.href = chrome.runtime.getURL('themes/' + theme + '.css');
|
|
document.head.appendChild(link);
|
|
console.log('[Outlook Relook] Theme loaded: ' + theme);
|
|
}
|
|
|
|
async function init() {
|
|
const settings = await OR.loadSettings();
|
|
console.log('[Outlook Relook] Loaded settings:', settings);
|
|
|
|
applySettingsToDOM(settings);
|
|
injectThemeCSS(settings.theme);
|
|
|
|
// Start the MutationObserver
|
|
OR.Observer.start(settings);
|
|
|
|
// Apply behavior patches
|
|
OR.Behavior.start(settings);
|
|
|
|
// Start DOM injector (quick actions)
|
|
OR.Injector.start(settings);
|
|
|
|
// Listen for setting changes from popup
|
|
chrome.storage.onChanged.addListener((changes, area) => {
|
|
if (area !== 'sync') return;
|
|
|
|
// Build updated settings object
|
|
OR.loadSettings().then((updated) => {
|
|
applySettingsToDOM(updated);
|
|
|
|
// Update observer with new settings
|
|
OR.Observer.updateSettings(updated);
|
|
|
|
// Update behavior patches
|
|
OR.Behavior.updateSettings(updated);
|
|
|
|
// Update injector
|
|
OR.Injector.updateSettings(updated);
|
|
|
|
// Swap theme CSS if theme changed
|
|
if (changes.theme) {
|
|
injectThemeCSS(changes.theme.newValue);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
|
|
const settings = await OR.loadSettings();
|
|
if (settings.colorScheme === 'system') {
|
|
applyColorScheme('system');
|
|
}
|
|
});
|
|
|
|
init();
|
|
})();
|