-
diff --git a/popup/popup.js b/popup/popup.js
index e6c0e53..e53f944 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -7,6 +7,20 @@ document.addEventListener("DOMContentLoaded", async () => {
const buttonsContainer = document.getElementById("buttons-container");
+ // Apply theme preference (system | light | dark)
+ try {
+ const themeResult = await browserAPI.storage.sync.get("theme");
+ const theme = themeResult && themeResult.theme ? themeResult.theme : "system";
+ const root = document.documentElement;
+ if (theme === "light" || theme === "dark") {
+ root.setAttribute("data-theme", theme);
+ } else {
+ root.removeAttribute("data-theme");
+ }
+ } catch (_) {
+ // ignore theme errors, fallback to system
+ }
+
// Load webhooks and groups from storage
const { webhooks = [], groups = [] } = await browserAPI.storage.sync.get(["webhooks", "groups"]);
const tabs = await browserAPI.tabs.query({ active: true, currentWindow: true });
@@ -51,9 +65,10 @@ document.addEventListener("DOMContentLoaded", async () => {
// Create a button for each webhook in this group
groupWebhooks.forEach((webhook) => {
const button = document.createElement("button");
- button.textContent = webhook.label;
+ const displayLabel = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
+ button.textContent = displayLabel;
button.dataset.url = webhook.url;
- button.dataset.label = webhook.label;
+ button.dataset.label = displayLabel;
button.dataset.webhookId = webhook.id;
button.classList.add("webhook-btn");
buttonsContainer.appendChild(button);
@@ -73,9 +88,10 @@ document.addEventListener("DOMContentLoaded", async () => {
// Create a button for each ungrouped webhook
ungroupedWebhooks.forEach((webhook) => {
const button = document.createElement("button");
- button.textContent = webhook.label;
+ const displayLabel = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
+ button.textContent = displayLabel;
button.dataset.url = webhook.url;
- button.dataset.label = webhook.label;
+ button.dataset.label = displayLabel;
button.dataset.webhookId = webhook.id;
button.classList.add("webhook-btn");
buttonsContainer.appendChild(button);
diff --git a/tests/exportImport.test.js b/tests/exportImport.test.js
index ecabcaf..9f551c9 100644
--- a/tests/exportImport.test.js
+++ b/tests/exportImport.test.js
@@ -155,7 +155,7 @@ describe('export and import logic', () => {
await handleImport(event);
- expect(global.browser.storage.sync.set).toHaveBeenCalledWith({ webhooks: hooks });
+ expect(global.browser.storage.sync.set).toHaveBeenCalledWith({ webhooks: hooks.map(h => ({...h, emoji: ''})) });
expect(event.target.value).toBe('');
});
});
diff --git a/tests/options.test.js b/tests/options.test.js
index c348b90..2a0c08f 100644
--- a/tests/options.test.js
+++ b/tests/options.test.js
@@ -208,7 +208,8 @@ describe('options page', () => {
identifier: 'test-identifier',
customPayload,
urlFilter: 'example.com',
- groupId: null
+ groupId: null,
+ emoji: ''
}]
});
});
diff --git a/utils/utils.js b/utils/utils.js
index 79e9635..98dd95d 100644
--- a/utils/utils.js
+++ b/utils/utils.js
@@ -32,6 +32,15 @@ const getBrowserAPI = () => {
function replaceI18nPlaceholders() {
const browserAPI = getBrowserAPI();
+ // Helper to replace __MSG_key__ tokens within a string
+ const replaceTokens = (value) => {
+ if (!value || typeof value !== 'string' || !value.includes('__MSG_')) return value;
+ return value.replace(/__MSG_([^_]+)__/g, (match, key) => {
+ const msg = browserAPI.i18n?.getMessage ? browserAPI.i18n.getMessage(key) : '';
+ return msg || match;
+ });
+ };
+
// Replace textContent of elements with data-i18n attribute
const elements = document.querySelectorAll('[data-i18n]');
elements.forEach(element => {
@@ -49,37 +58,28 @@ function replaceI18nPlaceholders() {
if (element.childNodes && element.childNodes.length > 0) {
element.childNodes.forEach(node => {
if (node.nodeType === Node.TEXT_NODE && node.nodeValue && node.nodeValue.includes('__MSG_')) {
- const matches = node.nodeValue.match(/__MSG_([^_]+)__/g);
- if (matches) {
- let newValue = node.nodeValue;
- matches.forEach(match => {
- const key = match.replace('__MSG_', '').replace('__', '');
- const message = browserAPI.i18n.getMessage(key);
- if (message) {
- newValue = newValue.replace(match, message);
- }
- });
- node.nodeValue = newValue;
- }
+ node.nodeValue = replaceTokens(node.nodeValue);
}
});
}
});
+ // Replace __MSG_...__ patterns in common attributes (e.g., placeholder, title, aria-label)
+ document.querySelectorAll('*').forEach(el => {
+ if (!el.attributes) return;
+ Array.from(el.attributes).forEach(attr => {
+ if (typeof attr.value === 'string' && attr.value.includes('__MSG_')) {
+ const newVal = replaceTokens(attr.value);
+ if (newVal !== attr.value) {
+ el.setAttribute(attr.name, newVal);
+ }
+ }
+ });
+ });
+
// Replace __MSG_...__ patterns in the document title
if (document.title && document.title.includes('__MSG_')) {
- const matches = document.title.match(/__MSG_([^_]+)__/g);
- if (matches) {
- let newTitle = document.title;
- matches.forEach(match => {
- const key = match.replace('__MSG_', '').replace('__', '');
- const message = browserAPI.i18n.getMessage(key);
- if (message) {
- newTitle = newTitle.replace(match, message);
- }
- });
- document.title = newTitle;
- }
+ document.title = replaceTokens(document.title);
}
}