+
+
+
+ ${DOMUtils.escapeHtml(highlight.word)}
+
+ ${highlight.count > 1 ? `${currentIndex + 1}/${highlight.count}` : ''}
+
+ ${highlight.count > 1 ? `
+
+
+
+
+ ` : ''}
+
${chrome.i18n.getMessage('no_highlights_on_page') || 'No highlights on this page'}
`;
return;
}
- container.innerHTML = this.pageHighlights.map(highlight => {
- const currentIndex = this.highlightIndices.get(highlight.word) || 0;
- return `
-
-
-
- ${DOMUtils.escapeHtml(highlight.word)}
-
- ${highlight.count > 1 ? `${currentIndex + 1}/${highlight.count}` : ''}
-
- ${highlight.count > 1 ? `
-
-
-
+ if (this.pageHighlightsGroupByList && this.pageHighlightsActiveLists.length > 0) {
+ const listIds = new Set(this.pageHighlightsActiveLists.map(l => l.id).filter(id => this.pageHighlightsListFilter.has(id) || this.pageHighlightsListFilter.size === 0));
+ const groupOrder = this.pageHighlightsActiveLists.filter(l => listIds.has(l.id));
+ let html = '';
+ for (const list of groupOrder) {
+ const items = filtered.filter(h => h.listId === list.id || (h.listNames && h.listNames.includes(list.name)));
+ if (items.length === 0) continue;
+ const groupKey = `list-${list.id}`;
+ const collapsed = this.pageHighlightsCollapsedGroups.has(groupKey);
+ const chevron = collapsed ? 'fa-chevron-right' : 'fa-chevron-down';
+ html += `
+
+
- ` : ''}
-
- `;
- }).join('');
+ ${collapsed ? '' : items.map(h => this.renderPageHighlightsItem(h)).join('')}
+
+ `;
+ }
+ const ungrouped = filtered.filter(h => !groupOrder.some(l => h.listId === l.id || (h.listNames && h.listNames.includes(l.name))));
+ if (ungrouped.length > 0) {
+ const groupKey = 'list-other';
+ const collapsed = this.pageHighlightsCollapsedGroups.has(groupKey);
+ const chevron = collapsed ? 'fa-chevron-right' : 'fa-chevron-down';
+ html += `
+
+
+ ${collapsed ? '' : ungrouped.map(h => this.renderPageHighlightsItem(h)).join('')}
+
+ `;
+ }
+ container.innerHTML = html;
+ } else {
+ container.innerHTML = filtered.map(h => this.renderPageHighlightsItem(h)).join('');
+ }
+
if (this.activeTab === 'page-highlights') {
requestAnimationFrame(() => this.restoreScrollPositions());
}
}
+ private renderPageHighlightsFilters(): void {
+ const container = document.getElementById('pageHighlightsListFilters');
+ if (!container) return;
+ if (this.pageHighlightsActiveLists.length <= 1) {
+ container.innerHTML = '';
+ return;
+ }
+ const allSelected = this.pageHighlightsListFilter.size === 0 || this.pageHighlightsListFilter.size === this.pageHighlightsActiveLists.length;
+ container.innerHTML = this.pageHighlightsActiveLists.map(list => {
+ const active = this.pageHighlightsListFilter.size === 0 || this.pageHighlightsListFilter.has(list.id);
+ const bg = DOMUtils.escapeHtml(list.background);
+ return `
+
+ `;
+ }).join('');
+
+ container.querySelectorAll('.page-highlights-filter-chip').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const id = Number((btn as HTMLElement).dataset.listId);
+ if (this.pageHighlightsListFilter.has(id)) {
+ this.pageHighlightsListFilter.delete(id);
+ } else {
+ this.pageHighlightsListFilter.add(id);
+ }
+ this.savePopupState();
+ this.renderPageHighlights();
+ this.renderPageHighlightsFilters();
+ });
+ });
+ }
+
private setupExceptions(): void {
- document.getElementById('toggleExceptionBtn')?.addEventListener('click', async () => {
- if (!this.currentTabHost) return;
-
- const isException = this.exceptionsList.includes(this.currentTabHost);
-
- if (isException) {
- this.exceptionsList = this.exceptionsList.filter(domain => domain !== this.currentTabHost);
- } else {
- this.exceptionsList.push(this.currentTabHost);
- }
-
- this.updateExceptionButton();
- this.renderExceptions();
- await StorageService.update('exceptionsList', this.exceptionsList);
+ document.getElementById('exceptionsModeSelect')?.addEventListener('change', async (e) => {
+ const value = (e.target as HTMLSelectElement).value;
+ this.exceptionsMode = value === 'whitelist' ? 'whitelist' : 'blacklist';
+ await StorageService.update('exceptionsMode', this.exceptionsMode);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
+ this.updateExceptionsModeLabel();
+ });
+
+ document.getElementById('addExceptionBtn')?.addEventListener('click', () => this.addExceptionFromInput());
+ (document.getElementById('exceptionDomainInput') as HTMLInputElement)?.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') this.addExceptionFromInput();
});
document.getElementById('clearExceptionsBtn')?.addEventListener('click', async () => {
if (confirm(chrome.i18n.getMessage('confirm_clear_exceptions') || 'Clear all exceptions?')) {
this.exceptionsList = [];
- this.updateExceptionButton();
this.renderExceptions();
await StorageService.update('exceptionsList', this.exceptionsList);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
@@ -1051,7 +1184,6 @@ export class PopupController {
if (button) {
const domain = (button as HTMLElement).dataset.domain!;
this.exceptionsList = this.exceptionsList.filter(d => d !== domain);
- this.updateExceptionButton();
this.renderExceptions();
await StorageService.update('exceptionsList', this.exceptionsList);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
@@ -1191,7 +1323,8 @@ export class PopupController {
globalHighlightEnabled: this.globalHighlightEnabled,
matchCaseEnabled: this.matchCaseEnabled,
matchWholeEnabled: this.matchWholeEnabled,
- exceptionsList: this.exceptionsList
+ exceptionsList: this.exceptionsList,
+ exceptionsMode: this.exceptionsMode
});
this.renderLists();
@@ -1201,7 +1334,7 @@ export class PopupController {
private setupStorageSync(): void {
chrome.storage.onChanged.addListener((changes, areaName) => {
if (areaName !== 'local') return;
- if (changes.lists || changes.globalHighlightEnabled || changes.matchCaseEnabled || changes.matchWholeEnabled || changes.exceptionsList) {
+ if (changes.lists || changes.globalHighlightEnabled || changes.matchCaseEnabled || changes.matchWholeEnabled || changes.exceptionsList || changes.exceptionsMode) {
this.reloadFromStorage();
}
});
@@ -1214,6 +1347,7 @@ export class PopupController {
this.matchCaseEnabled = data.matchCaseEnabled ?? false;
this.matchWholeEnabled = data.matchWholeEnabled ?? false;
this.exceptionsList = data.exceptionsList || [];
+ this.exceptionsMode = data.exceptionsMode === 'whitelist' ? 'whitelist' : 'blacklist';
if (this.lists.length === 0) {
this.lists.push({
@@ -1238,7 +1372,8 @@ export class PopupController {
this.renderLists();
this.renderWords();
this.renderExceptions();
- this.updateExceptionButton();
+ this.updateExceptionsModeSelect();
+ this.updateExceptionsModeLabel();
this.updateFormValues();
}
@@ -1465,38 +1600,64 @@ export class PopupController {
`;
}
- private updateExceptionButton(): void {
- const toggleBtn = document.getElementById('toggleExceptionBtn');
- const btnText = document.getElementById('exceptionBtnText');
-
- if (!toggleBtn || !btnText || !this.currentTabHost) return;
-
- const isException = this.exceptionsList.includes(this.currentTabHost);
-
- if (isException) {
- btnText.textContent = chrome.i18n.getMessage('remove_exception') || 'Remove from Exceptions';
- toggleBtn.classList.add('danger');
- const icon = toggleBtn.querySelector('i');
- if (icon) icon.className = 'fa-solid fa-trash';
- } else {
- btnText.textContent = chrome.i18n.getMessage('add_exception') || 'Add to Exceptions';
- toggleBtn.classList.remove('danger');
- const icon = toggleBtn.querySelector('i');
- if (icon) icon.className = 'fa-solid fa-plus';
+ private normalizeDomain(input: string): string | null {
+ const raw = input.trim().toLowerCase();
+ if (!raw) return null;
+ try {
+ if (raw.includes('.')) {
+ const url = raw.startsWith('http') ? new URL(raw) : new URL(`https://${raw}`);
+ return url.hostname;
+ }
+ return raw;
+ } catch {
+ return raw;
}
}
+ private addExceptionFromInput(): void {
+ const input = document.getElementById('exceptionDomainInput') as HTMLInputElement;
+ if (!input) return;
+
+ const domain = this.normalizeDomain(input.value);
+ if (!domain) return;
+
+ if (this.exceptionsList.includes(domain)) {
+ input.value = '';
+ return;
+ }
+
+ this.exceptionsList.push(domain);
+ input.value = '';
+ this.renderExceptions();
+ StorageService.update('exceptionsList', this.exceptionsList).then(() => {
+ MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
+ });
+ }
+
+ private updateExceptionsModeSelect(): void {
+ const select = document.getElementById('exceptionsModeSelect') as HTMLSelectElement | null;
+ if (select) select.value = this.exceptionsMode;
+ }
+
+ private updateExceptionsModeLabel(): void {
+ const label = document.getElementById('exceptionsListLabel');
+ if (!label) return;
+ const key = this.exceptionsMode === 'whitelist' ? 'exceptions_list_whitelist' : 'exceptions_list_blacklist';
+ label.textContent = chrome.i18n.getMessage(key) || (this.exceptionsMode === 'whitelist' ? 'Sites to highlight (whitelist):' : 'Sites to exclude (blacklist):');
+ }
+
private renderExceptions(): void {
const container = document.getElementById('exceptionsList');
if (!container) return;
if (this.exceptionsList.length === 0) {
- container.innerHTML = `
${chrome.i18n.getMessage('no_exceptions') || 'No exceptions'}
`;
+ container.innerHTML = `
${chrome.i18n.getMessage('no_exceptions') || 'No exceptions'}
`;
return;
}
container.innerHTML = this.exceptionsList.map(domain =>
`
+
${DOMUtils.escapeHtml(domain)}