browser-extension-settings 0.6.0 → 0.6.2

package/lib/common.ts

@@ -1,4 +1,4 @@
-export const besVersion = 55
+export const besVersion = 62
 export const openButton = `<svg viewBox="0 0 60.2601318359375 84.8134765625" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 9.62969px; width: 6.84191px;"><g transform="matrix(1 0 0 1 -6.194965820312518 77.63671875)"><path d="M66.4551-35.2539C66.4551-36.4746 65.9668-37.5977 65.0391-38.4766L26.3672-76.3672C25.4883-77.1973 24.4141-77.6367 23.1445-77.6367C20.6543-77.6367 18.7012-75.7324 18.7012-73.1934C18.7012-71.9727 19.1895-70.8496 19.9707-70.0195L55.5176-35.2539L19.9707-0.488281C19.1895 0.341797 18.7012 1.41602 18.7012 2.68555C18.7012 5.22461 20.6543 7.12891 23.1445 7.12891C24.4141 7.12891 25.4883 6.68945 26.3672 5.81055L65.0391-32.0312C65.9668-32.959 66.4551-34.0332 66.4551-35.2539Z"></path></g></svg>`
 export const openInNewTabButton = `<svg viewBox="0 0 72.127685546875 72.2177734375" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 8.19958px; width: 8.18935px;"><g transform="matrix(1 0 0 1 -12.451127929687573 71.3388671875)"><path d="M84.5703-17.334L84.5215-66.4551C84.5215-69.2383 82.7148-71.1914 79.7852-71.1914L30.6641-71.1914C27.9297-71.1914 26.0742-69.0918 26.0742-66.748C26.0742-64.4043 28.1738-62.4023 30.4688-62.4023L47.4609-62.4023L71.2891-63.1836L62.207-55.2246L13.8184-6.73828C12.9395-5.85938 12.4512-4.73633 12.4512-3.66211C12.4512-1.31836 14.5508 0.878906 16.9922 0.878906C18.1152 0.878906 19.1895 0.488281 20.0684-0.439453L68.5547-48.877L76.6113-58.0078L75.7324-35.2051L75.7324-17.1387C75.7324-14.8438 77.7344-12.6953 80.127-12.6953C82.4707-12.6953 84.5703-14.6973 84.5703-17.334Z"></path></g></svg>`
 export const settingButton = `<svg viewBox="0 0 16 16" version="1.1">

package/lib/messages/de.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "Einstellungen",
   "settings.otherExtensions": "Andere Erweiterungen",
   "settings.locale": "Sprache",
+  "settings.systemLanguage": "Systemsprache",
   "settings.displaySettingsButtonInSideMenu": "Einstellungsschaltfläche im Seitenmenü anzeigen",
   "settings.menu.settings": "⚙️ Einstellungen",
   "settings.extensions.utags.title": "🏷️ UTags - Benutzer-Tags zu Links hinzufügen",

package/lib/messages/en.ts

@@ -2,6 +2,7 @@ const messages = {
   "settings.title": "Settings",
   "settings.otherExtensions": "Other Extensions",
   "settings.locale": "Language",
+  "settings.systemLanguage": "System Language",
   "settings.displaySettingsButtonInSideMenu": "Display Settings Button in Side Menu",
   "settings.menu.settings": "⚙️ Settings",
   "settings.extensions.utags.title": "🏷️ UTags - Add usertags to links",

package/lib/messages/es.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "Configuración",
   "settings.otherExtensions": "Otras extensiones",
   "settings.locale": "Idioma",
+  "settings.systemLanguage": "Idioma del sistema",
   "settings.displaySettingsButtonInSideMenu": "Mostrar botón de configuración en el menú lateral",
   "settings.menu.settings": "⚙️ Configuración",
   "settings.extensions.utags.title": "🏷️ UTags - Agregar etiquetas de usuario a los enlaces",

package/lib/messages/fr.ts

@@ -2,7 +2,8 @@ export const messages = {
   "settings.title": "Paramètres",
   "settings.otherExtensions": "Autres extensions",
   "settings.locale": "Langue",
-  "settings.displaySettingsButtonInSideMenu": "Afficher le bouton des paramètres dans le menu latéral",
+  "settings.systemLanguage": "Langue du système",
+  "settings.displaySettingsButtonInSideMenu": "Afficher le bouton de paramètres dans le menu latéral",
   "settings.menu.settings": "⚙️ Paramètres",
   "settings.extensions.utags.title": "🏷️ UTags - Ajouter des balises utilisateur aux liens",
   "settings.extensions.links-helper.title": "🔗 Assistant de liens",

package/lib/messages/index.ts

@@ -1,4 +1,4 @@
-import { initAvailableLocales, initI18n, extractLocaleFromNavigator } from "browser-extension-i18n"
+import { initAvailableLocales, initI18n, getPrefferedLocale } from "browser-extension-i18n"
 import messagesEn from "./en.js"
 import messagesZh from "./zh-cn.js"
 import messagesZhHk from "./zh-hk.js"
@@ -15,41 +15,70 @@ import messagesVi from "./vi.js"
 
 const localeMap = {
   en: messagesEn,
-  "en-US": messagesEn,
+  "en-us": messagesEn,
   zh: messagesZh,
-  "zh-CN": messagesZh,
-  "zh-HK": messagesZhHk,
-  "zh-TW": messagesZhTw,
+  "zh-cn": messagesZh,
+  "zh-hk": messagesZhHk,
+  "zh-tw": messagesZhTw,
   ru: messagesRu,
-  "ru-RU": messagesRu,
+  "ru-ru": messagesRu,
   ko: messagesKo,
-  "ko-KR": messagesKo,
+  "ko-kr": messagesKo,
   ja: messagesJa,
-  "ja-JP": messagesJa,
+  "ja-jp": messagesJa,
   fr: messagesFr,
-  "fr-FR": messagesFr,
+  "fr-fr": messagesFr,
   de: messagesDe,
-  "de-DE": messagesDe,
+  "de-de": messagesDe,
   it: messagesIt,
-  "it-IT": messagesIt,
+  "it-it": messagesIt,
   es: messagesEs,
-  "es-ES": messagesEs,
+  "es-es": messagesEs,
   pt: messagesPt,
-  "pt-PT": messagesPt,
-  "pt-BR": messagesPt,
+  "pt-pt": messagesPt,
+  "pt-br": messagesPt,
   vi: messagesVi,
-  "vi-VN": messagesVi,
+  "vi-vn": messagesVi,
+}
+
+// Language display names for each locale code
+export const localeNames = {
+  en: "English",
+  "en-us": "English (US)",
+  zh: "中文",
+  "zh-cn": "中文 (简体)",
+  "zh-hk": "中文 (香港)",
+  "zh-tw": "中文 (台灣)",
+  ru: "Русский",
+  "ru-ru": "Русский",
+  ko: "한국어",
+  "ko-kr": "한국어",
+  ja: "日本語",
+  "ja-jp": "日本語",
+  fr: "Français",
+  "fr-fr": "Français",
+  de: "Deutsch",
+  "de-de": "Deutsch",
+  it: "Italiano",
+  "it-it": "Italiano",
+  es: "Español",
+  "es-es": "Español",
+  pt: "Português",
+  "pt-pt": "Português",
+  "pt-br": "Português (Brasil)",
+  vi: "Tiếng Việt",
+  "vi-vn": "Tiếng Việt",
 }
 
 const locales = Object.keys(localeMap)
 
 initAvailableLocales(locales)
 
-export const prefferedLocale = extractLocaleFromNavigator() || "en"
-
+console.log("[settings] prefferedLocale:", getPrefferedLocale())
 // eslint-disable-next-line import/no-mutable-exports
-export let i = initI18n(localeMap, prefferedLocale)
+export let i = initI18n(localeMap, getPrefferedLocale())
 
 export function resetI18n(locale?: string) {
-  i = initI18n(localeMap, locale || prefferedLocale)
+  console.log("[settings] prefferedLocale:", getPrefferedLocale(), "locale:", locale)
+  i = initI18n(localeMap, locale || getPrefferedLocale())
 }

package/lib/messages/it.ts

@@ -2,7 +2,8 @@ export const messages = {
   "settings.title": "Impostazioni",
   "settings.otherExtensions": "Altre estensioni",
   "settings.locale": "Lingua",
-  "settings.displaySettingsButtonInSideMenu": "Mostra il pulsante delle impostazioni nel menu laterale",
+  "settings.systemLanguage": "Lingua del sistema",
+  "settings.displaySettingsButtonInSideMenu": "Mostra pulsante impostazioni nel menu laterale",
   "settings.menu.settings": "⚙️ Impostazioni",
   "settings.extensions.utags.title": "🏷️ UTags - Aggiungi tag utente ai collegamenti",
   "settings.extensions.links-helper.title": "🔗 Assistente collegamenti",

package/lib/messages/ja.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "設定",
   "settings.otherExtensions": "その他の拡張機能",
   "settings.locale": "言語",
+  "settings.systemLanguage": "システム言語",
   "settings.displaySettingsButtonInSideMenu": "サイドメニューに設定ボタンを表示",
   "settings.menu.settings": "⚙️ 設定",
   "settings.extensions.utags.title": "🏷️ UTags - リンクにユーザータグを追加",

package/lib/messages/ko.ts

@@ -1,7 +1,8 @@
 export const messages = {
   "settings.title": "설정",
-  "settings.otherExtensions": "다른 확장 프로그램",
+  "settings.otherExtensions": "기타 확장 프로그램",
   "settings.locale": "언어",
+  "settings.systemLanguage": "시스템 언어",
   "settings.displaySettingsButtonInSideMenu": "사이드 메뉴에 설정 버튼 표시",
   "settings.menu.settings": "⚙️ 설정",
   "settings.extensions.utags.title": "🏷️ UTags - 링크에 사용자 태그 추가",

package/lib/messages/pt.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "Configurações",
   "settings.otherExtensions": "Outras extensões",
   "settings.locale": "Idioma",
+  "settings.systemLanguage": "Idioma do sistema",
   "settings.displaySettingsButtonInSideMenu": "Exibir botão de configurações no menu lateral",
   "settings.menu.settings": "⚙️ Configurações",
   "settings.extensions.utags.title": "🏷️ UTags - Adicionar tags de usuário aos links",

package/lib/messages/ru.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "Настройки",
   "settings.otherExtensions": "Другие расширения",
   "settings.locale": "Язык",
+  "settings.systemLanguage": "Системный язык",
   "settings.displaySettingsButtonInSideMenu": "Показать кнопку настроек в боковом меню",
   "settings.menu.settings": "⚙️ Настройки",
   "settings.extensions.utags.title": "🏷️ UTags - Добавить пользовательские теги к ссылкам",

package/lib/messages/vi.ts

@@ -2,6 +2,7 @@ export const messages = {
   "settings.title": "Cài đặt",
   "settings.otherExtensions": "Tiện ích mở rộng khác",
   "settings.locale": "Ngôn ngữ",
+  "settings.systemLanguage": "Ngôn ngữ hệ thống",
   "settings.displaySettingsButtonInSideMenu": "Hiển thị nút cài đặt trong menu bên",
   "settings.menu.settings": "⚙️ Cài đặt",
   "settings.extensions.utags.title": "🏷️ UTags - Thêm thẻ người dùng vào liên kết",

package/lib/messages/zh-cn.ts

@@ -2,7 +2,8 @@ export const messages = {
   "settings.title": "设置",
   "settings.otherExtensions": "其他扩展",
   "settings.locale": "语言",
-  "settings.displaySettingsButtonInSideMenu": "在侧边栏菜单中显示设置按钮",
+  "settings.systemLanguage": "系统语言",
+  "settings.displaySettingsButtonInSideMenu": "在侧边菜单中显示设置按钮",
   "settings.menu.settings": "⚙️ 设置",
   "settings.extensions.utags.title": "🏷️ 小鱼标签 (UTags) - 为链接添加用户标签",
   "settings.extensions.links-helper.title": "🔗 链接助手",

package/lib/messages/zh-hk.ts

@@ -2,7 +2,8 @@ export const messages = {
   "settings.title": "設定",
   "settings.otherExtensions": "其他擴充功能",
   "settings.locale": "語言",
-  "settings.displaySettingsButtonInSideMenu": "在側邊欄選單中顯示設定按鈕",
+  "settings.systemLanguage": "系統語言",
+  "settings.displaySettingsButtonInSideMenu": "在側邊選單中顯示設定按鈕",
   "settings.menu.settings": "⚙️ 設定",
   "settings.extensions.utags.title": "🏷️ 小魚標籤 (UTags) - 為連結添加用戶標籤",
   "settings.extensions.links-helper.title": "🔗 連結助手",

package/lib/messages/zh-tw.ts

@@ -2,7 +2,8 @@ export const messages = {
   "settings.title": "設定",
   "settings.otherExtensions": "其他擴充功能",
   "settings.locale": "語言",
-  "settings.displaySettingsButtonInSideMenu": "在側邊欄選單中顯示設定按鈕",
+  "settings.systemLanguage": "系統語言",
+  "settings.displaySettingsButtonInSideMenu": "在側邊選單中顯示設定按鈕",
   "settings.menu.settings": "⚙️ 設定",
   "settings.extensions.utags.title": "🏷️ 小魚標籤 (UTags) - 為連結新增使用者標籤",
   "settings.extensions.links-helper.title": "🔗 連結助手",

package/lib/settings.ts

@@ -17,7 +17,12 @@ import {
   runWhenDomReady,
   runWhenHeadExists,
 } from "browser-extension-utils"
+// @ts-expect-error - data-text import for build system
 import styleText from "data-text:./style.scss"
+import {
+  initAvailableLocales,
+  getPrefferedLocale,
+} from "browser-extension-i18n"
 import { createSwitchOption } from "./switch.js"
 import {
   createExtensionList,
@@ -27,7 +32,15 @@ import {
   deactiveExtensionList,
 } from "./extension-list.js"
 import { besVersion, settingButton } from "./common.js"
-import { i, prefferedLocale, resetI18n } from "./messages/index.js"
+import { i, resetI18n, localeNames } from "./messages/index.js"
+
+// Declare GM global variable for userscript environment
+// eslint-disable-next-line @typescript-eslint/naming-convention
+declare const GM:
+  | {
+      registerMenuCommand?: (name: string, function_: () => void) => void
+    }
+  | undefined
 
 const prefix = "browser_extension_settings_"
 
@@ -36,12 +49,13 @@ type SettingsOptions = {
   title: string
   footer?: string
   settingsTable?: SettingsTable
+  availableLocales?: readonly string[]
   onValueChange?: () => void
   onViewUpdate?: (settingsMainView: HTMLElement) => void
   relatedExtensions?: RelatedExtension[]
 }
 
-type SettingsTable = Record<
+export type SettingsTable = Record<
   string,
   | SettingsSwitchItem
   | SettingsInputItem
@@ -181,6 +195,23 @@ export function hideSettings() {
   closeModal()
 }
 
+function destroySettings() {
+  closeModal()
+  const settingsContainer = getSettingsContainer()
+  if (settingsContainer) {
+    settingsContainer.remove()
+  }
+}
+
+function isSettingsShown() {
+  const settingsContainer = getSettingsContainer()
+  if (settingsContainer) {
+    return settingsContainer.style.display === "block"
+  }
+
+  return false
+}
+
 const onDocumentClick = (event: Event) => {
   const target = event.target as HTMLElement
   if (target?.closest(`.${prefix}container`)) {
@@ -320,13 +351,13 @@ function createSettingsElement() {
       class: `${prefix}main thin_scrollbar`,
     })
 
-    addElement(settingsMain, "a", {
-      textContent: i("settings.title"),
-      class: "navigation_go_previous",
-      onclick() {
-        activeExtensionList()
-      },
-    })
+    // addElement(settingsMain, "a", {
+    //   textContent: i("settings.title"),
+    //   class: "navigation_go_previous",
+    //   onclick() {
+    //     activeExtensionList()
+    //   },
+    // })
 
     if (settingsOptions.title) {
       addElement(settingsMain, "h2", { textContent: settingsOptions.title })
@@ -560,30 +591,26 @@ function addCommonSettings(settingsTable: SettingsTable) {
   settingsTable.locale = {
     title: i("settings.locale"),
     type: "select",
-    defaultValue: prefferedLocale,
-    options: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      English: "en",
-      中文: "zh",
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      Русский: "ru",
-    },
+    defaultValue: "",
+    options: {},
     group: ++maxGroup,
   } as SettingsSelectItem
 
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  settingsTable.displaySettingsButtonInSideMenu = {
-    title: i("settings.displaySettingsButtonInSideMenu"),
-    defaultValue: !(
-      typeof GM === "object" && typeof GM.registerMenuCommand === "function"
-    ),
-    group: ++maxGroup,
-  } as SettingsSwitchItem
+  // // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  // settingsTable.displaySettingsButtonInSideMenu = {
+  //   title: i("settings.displaySettingsButtonInSideMenu"),
+  //   defaultValue: !(
+  //     typeof GM === "object" && typeof GM?.registerMenuCommand === "function"
+  //   ),
+  //   group: ++maxGroup,
+  // } as SettingsSwitchItem
 }
 
 function handleShowSettingsUrl() {
-  if (location.hash === "#bes-show-settings") {
+  const hashString = `#!show-settings-${settingsOptions.id}`
+  if (location.hash === hashString) {
     setTimeout(showSettings, 100)
+    history.replaceState({}, "", location.href.replace(hashString, ""))
   }
 }
 
@@ -596,48 +623,86 @@ export async function showSettings() {
 
   addEventListener(document, "click", onDocumentClick, true)
   addEventListener(document, "keydown", onDocumentKeyDown, true)
-  activeExtension(settingsOptions.id)
-  deactiveExtensionList()
+  // activeExtension(settingsOptions.id)
+  // deactiveExtensionList()
 }
 
-export const initSettings = async (options: SettingsOptions) => {
+let lastLocale: string | undefined
+
+// Reset settings UI on init and locale change
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const resetSettingsUI = (optionsProvider: () => SettingsOptions) => {
+  lastLocale =
+    (getSettingsValue("locale") as string | undefined) || getPrefferedLocale()
+  resetI18n(lastLocale)
+
+  const options = optionsProvider()
   settingsOptions = options
   settingsTable = options.settingsTable || {}
   addCommonSettings(settingsTable)
+  const availableLocales = options.availableLocales
+  if (availableLocales?.length) {
+    initAvailableLocales(availableLocales)
+    const localeSelect = settingsTable.locale as SettingsSelectItem
+    localeSelect.options = {
+      [i("settings.systemLanguage")]: "",
+    }
+    for (const locale of availableLocales) {
+      // Use language display name from localeNames, fallback to locale code if not found
+      const lowerCaseLocale = locale.toLowerCase()
+      const displayName =
+        localeNames[lowerCaseLocale as keyof typeof localeNames] || locale
+      localeSelect.options[displayName] = locale
+    }
+  }
+
+  // runWhenDomReady(() => {
+  // initExtensionList()
+  // addSideMenu()
+  // })
+}
+
+export const initSettings = async (optionsProvider: () => SettingsOptions) => {
   addValueChangeListener(storageKey, async () => {
     settings = await getSettings()
     // console.log(JSON.stringify(settings, null, 2))
     await updateOptions()
-    addSideMenu()
+    // addSideMenu()
 
     const newLocale =
-      (getSettingsValue("locale") as string | undefined) || prefferedLocale
+      (getSettingsValue("locale") as string | undefined) || getPrefferedLocale()
     console.log("lastLocale:", lastLocale, "newLocale:", newLocale)
     if (lastLocale !== newLocale) {
-      closeModal()
+      const isShown = isSettingsShown()
+      destroySettings()
       resetI18n(newLocale)
       lastLocale = newLocale
-      setTimeout(showSettings, 100)
+
+      setTimeout(() => {
+        resetSettingsUI(optionsProvider)
+      }, 50)
+
+      if (isShown) {
+        setTimeout(showSettings, 100)
+      }
     }
 
-    if (typeof options.onValueChange === "function") {
-      options.onValueChange()
+    if (typeof settingsOptions.onValueChange === "function") {
+      settingsOptions.onValueChange()
     }
   })
 
   settings = await getSettings()
 
-  let lastLocale =
-    (getSettingsValue("locale") as string | undefined) || prefferedLocale
-  resetI18n(lastLocale)
+  resetSettingsUI(optionsProvider)
+  // Wait until extension intialized
+  setTimeout(() => {
+    resetSettingsUI(optionsProvider)
+  }, 50)
 
   runWhenHeadExists(() => {
     addStyle(getSettingsStyle())
   })
-  runWhenDomReady(() => {
-    initExtensionList()
-    addSideMenu()
-  })
 
   registerMenuCommand(i("settings.menu.settings"), showSettings, "o")
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
@@ -30,7 +30,7 @@
   },
   "homepage": "https://github.com/utags/browser-extension-settings#readme",
   "dependencies": {
-    "browser-extension-i18n": "^0.1.1",
+    "browser-extension-i18n": "^0.1.3",
     "browser-extension-storage": "^0.1.2",
     "browser-extension-utils": "^0.2.0"
   },