browser-extension-settings 0.8.9 → 0.9.0

package/lib/settings.ts

@@ -2,7 +2,7 @@ import {
   addValueChangeListener,
   getValue,
   setValue,
-} from "browser-extension-storage"
+} from 'browser-extension-storage'
 import {
   $,
   $$,
@@ -15,17 +15,17 @@ import {
   registerMenuCommand,
   removeEventListener,
   createElement,
-} from "browser-extension-utils"
-import styleText from "data-text:./style.scss"
+} from 'browser-extension-utils'
+import styleText from 'data-text:./style.scss'
 import {
   initAvailableLocales,
   getPrefferedLocale,
-} from "browser-extension-i18n"
-import { createSwitchOption } from "./switch"
-import { besVersion } from "./common"
-import { i, resetI18n, localeNames } from "./messages/index"
+} from 'browser-extension-i18n'
+import { createSwitchOption } from './switch'
+import { besVersion } from './common'
+import { i, resetI18n, localeNames } from './messages/index'
 
-const prefix = "browser_extension_settings_v2_"
+const prefix = 'browser_extension_settings_v2_'
 
 type SettingsOptions = {
   id: string
@@ -51,7 +51,7 @@ type SettingsSwitchItem = {
   title: string
   icon?: string
   defaultValue: boolean
-  type?: "switch"
+  type?: 'switch'
   onConfirmChange?: (checked: boolean) => boolean
   group?: number
 }
@@ -78,7 +78,7 @@ type SettingsActionItem = {
 type SettingsSelectItem = {
   title: string
   icon?: string
-  type: "select"
+  type: 'select'
   options: Record<string, string | number>
   group?: number
   defaultValue?: string | number
@@ -108,7 +108,7 @@ const getSettingsElement = () => {
   )
 }
 
-const storageKey = "settings"
+const storageKey = 'settings'
 
 let settingsOptions: SettingsOptions
 let settingsTable: SettingsTable = {}
@@ -119,7 +119,7 @@ async function getSettings(): Promise<
   let settings =
     await getValue<Record<string, boolean | string | undefined>>(storageKey)
 
-  if (!settings || typeof settings !== "object") {
+  if (!settings || typeof settings !== 'object') {
     settings = {}
   }
 
@@ -176,19 +176,19 @@ const closeModal = () => {
     settingsContainer.remove()
   }
 
-  removeEventListener(doc, "click", onDocumentClick, true)
-  removeEventListener(doc, "keydown", onDocumentKeyDown, true)
-  removeEventListener(win, "beforeShowSettings", onBeforeShowSettings, true)
+  removeEventListener(doc, 'click', onDocumentClick, true)
+  removeEventListener(doc, 'keydown', onDocumentKeyDown, true)
+  removeEventListener(doc, 'beforeShowSettings', onBeforeShowSettings, true)
 }
 
 export function hideSettings() {
   if (win.self !== win.top) {
     win.top?.postMessage(
       {
-        type: "bes-hide-settings",
+        type: 'bes-hide-settings',
         id: settingsOptions?.id,
       },
-      "*"
+      '*'
     )
     return
   }
@@ -223,7 +223,7 @@ const onDocumentKeyDown = (event: KeyboardEvent) => {
     return // 如果事件已经在进行中，则不做任何事。
   }
 
-  if (event.key === "Escape") {
+  if (event.key === 'Escape') {
     // 按“ESC”键时要做的事。
     closeModal()
     // 取消默认动作，从而避免处理两次。
@@ -239,11 +239,11 @@ async function updateOptions() {
   for (const key in settingsTable) {
     if (Object.hasOwn(settingsTable, key)) {
       const item = settingsTable[key]
-      const type = item.type || "switch"
+      const type = item.type || 'switch'
 
       // console.log(key, type)
       switch (type) {
-        case "switch": {
+        case 'switch': {
           const root = getSettingsElement()!
           const checkbox = $(
             `.option_groups .switch_option[data-key="${key}"] input`,
@@ -256,7 +256,7 @@ async function updateOptions() {
           break
         }
 
-        case "select": {
+        case 'select': {
           const root = getSettingsElement()!
           const options = $$(
             `.option_groups .select_option[data-key="${key}"] .bes_select option`,
@@ -270,7 +270,7 @@ async function updateOptions() {
           break
         }
 
-        case "textarea": {
+        case 'textarea': {
           const root = getSettingsElement()!
           const textArea = $(
             `.option_groups textarea[data-key="${key}"]`,
@@ -290,7 +290,7 @@ async function updateOptions() {
     }
   }
 
-  if (typeof settingsOptions.onViewUpdate === "function") {
+  if (typeof settingsOptions.onViewUpdate === 'function') {
     const settingsMain = createSettingsElement()
     settingsOptions.onViewUpdate(settingsMain!)
   }
@@ -308,9 +308,9 @@ function getSettingsContainer(create = false) {
   }
 
   if (create) {
-    return addElement(doc.documentElement, "div", {
+    return addElement(doc.documentElement, 'div', {
       class: `${prefix}container`,
-      "data-bes-version": besVersion,
+      'data-bes-version': besVersion,
     })
   }
 }
@@ -318,7 +318,7 @@ function getSettingsContainer(create = false) {
 function getSettingsShadowRoot(): ShadowRoot | undefined {
   const container = getSettingsContainer(true)
   if (container?.attachShadow) {
-    return container.shadowRoot || container.attachShadow({ mode: "open" })
+    return container.shadowRoot || container.attachShadow({ mode: 'open' })
   }
 
   return undefined
@@ -330,18 +330,18 @@ function getSettingsWrapper() {
     const container = getSettingsContainer(true)!
     return (
       $(`.${prefix}wrapper`, container) ||
-      addElement(container, "div", { class: `${prefix}wrapper` })
+      addElement(container, 'div', { class: `${prefix}wrapper` })
     )
   }
 
   let wrapper = shadow.querySelector(`.${prefix}wrapper`)
   if (!wrapper) {
-    wrapper = createElement("div", { class: `${prefix}wrapper` })
+    wrapper = createElement('div', { class: `${prefix}wrapper` })
     shadow.append(wrapper)
 
     const existStyle = shadow.querySelector(`style`)
     if (!existStyle) {
-      const styleElm = createElement("style")
+      const styleElm = createElement('style')
       styleElm.textContent = styleText
       shadow.append(styleElm)
     }
@@ -359,14 +359,14 @@ function createSettingsElement() {
       element.remove()
     }
 
-    settingsMain = addElement(wrapper, "div", {
+    settingsMain = addElement(wrapper, 'div', {
       class: `${prefix}main thin_scrollbar`,
     })
 
-    const header = addElement(settingsMain, "header", {
-      style: "display: flex; justify-content: flex-end;",
+    const header = addElement(settingsMain, 'header', {
+      style: 'display: flex; justify-content: flex-end;',
     })
-    addElement(header, "div", {
+    addElement(header, 'div', {
       class: `close-button`,
       // eslint-disable-next-line @typescript-eslint/naming-convention
       innerHTML: createHTML(
@@ -376,15 +376,15 @@ function createSettingsElement() {
     })
 
     if (settingsOptions.title) {
-      addElement(settingsMain, "h2", { textContent: settingsOptions.title })
+      addElement(settingsMain, 'h2', { textContent: settingsOptions.title })
     }
 
     const optionGroups: HTMLElement[] = []
     const getOptionGroup = (index: number) => {
       if (index > optionGroups.length) {
         for (let i = optionGroups.length; i < index; i++) {
-          const optionGroup = addElement(settingsMain, "div", {
-            class: "option_groups",
+          const optionGroup = addElement(settingsMain, 'div', {
+            class: 'option_groups',
           })
           if (optionGroup) optionGroups.push(optionGroup)
         }
@@ -396,12 +396,12 @@ function createSettingsElement() {
     for (const key in settingsTable) {
       if (Object.hasOwn(settingsTable, key)) {
         const item = settingsTable[key]
-        const type = item.type || "switch"
+        const type = item.type || 'switch'
         const group = item.group || 1
         const optionGroup = getOptionGroup(group)
         // console.log(key, item, type, group)
         switch (type) {
-          case "switch": {
+          case 'switch': {
             const switchOption = createSwitchOption(item.icon, item.title, {
               async onchange(event: Event) {
                 const checkbox = event.target as HTMLInputElement
@@ -409,7 +409,7 @@ function createSettingsElement() {
                   let result = true
                   if (
                     typeof (item as SettingsSwitchItem).onConfirmChange ===
-                    "function"
+                    'function'
                   ) {
                     result = (item as SettingsSwitchItem).onConfirmChange!(
                       checkbox.checked
@@ -432,14 +432,14 @@ function createSettingsElement() {
             break
           }
 
-          case "textarea": {
+          case 'textarea': {
             let timeoutId: ReturnType<typeof setTimeout> | undefined
-            const div = addElement(optionGroup, "div", {
-              class: "bes_textarea",
+            const div = addElement(optionGroup, 'div', {
+              class: 'bes_textarea',
             })
-            addElement(div, "textarea", {
-              "data-key": key,
-              placeholder: (item as SettingsInputItem).placeholder || "",
+            addElement(div, 'textarea', {
+              'data-key': key,
+              placeholder: (item as SettingsInputItem).placeholder || '',
               onkeyup(event: Event) {
                 const textArea = event.target as HTMLTextAreaElement
                 if (timeoutId) {
@@ -451,17 +451,17 @@ function createSettingsElement() {
                   if (textArea) {
                     await saveSettingsValue(key, textArea.value.trim())
                   }
-                }, 100)
+                }, 2000)
               },
             })
 
             break
           }
 
-          case "action": {
-            addElement(optionGroup, "a", {
-              "data-key": key,
-              class: "action",
+          case 'action': {
+            addElement(optionGroup, 'a', {
+              'data-key': key,
+              class: 'action',
               textContent: item.title,
               onclick: (item as SettingsActionItem).onclick,
             })
@@ -469,36 +469,36 @@ function createSettingsElement() {
             break
           }
 
-          case "externalLink": {
-            const div4 = addElement(optionGroup, "div", {
-              class: "bes_external_link",
+          case 'externalLink': {
+            const div4 = addElement(optionGroup, 'div', {
+              class: 'bes_external_link',
             })
 
-            addElement(div4, "a", {
-              "data-key": key,
+            addElement(div4, 'a', {
+              'data-key': key,
               textContent: item.title,
               href: (item as SettingsActionItem).url,
-              target: "_blank",
+              target: '_blank',
             })
             break
           }
 
-          case "select": {
-            const div = addElement(optionGroup, "div", {
-              class: "select_option bes_option",
-              "data-key": key,
+          case 'select': {
+            const div = addElement(optionGroup, 'div', {
+              class: 'select_option bes_option',
+              'data-key': key,
             })
             if (item.icon) {
-              addElement(div, "img", { src: item.icon, class: "bes_icon" })
+              addElement(div, 'img', { src: item.icon, class: 'bes_icon' })
             }
 
-            addElement(div, "span", {
+            addElement(div, 'span', {
               textContent: item.title,
-              class: "bes_title",
+              class: 'bes_title',
             })
 
-            const select = addElement(div, "select", {
-              class: "bes_select",
+            const select = addElement(div, 'select', {
+              class: 'bes_select',
               async onchange() {
                 await saveSettingsValue(key, select.value)
               },
@@ -507,7 +507,7 @@ function createSettingsElement() {
             for (const option of Object.entries(
               (item as SettingsSelectItem).options
             )) {
-              addElement(select, "option", {
+              addElement(select, 'option', {
                 textContent: option[0],
                 value: option[1],
               })
@@ -516,16 +516,16 @@ function createSettingsElement() {
             break
           }
 
-          case "tip": {
-            const tip = addElement(optionGroup, "div", {
-              class: "bes_tip",
+          case 'tip': {
+            const tip = addElement(optionGroup, 'div', {
+              class: 'bes_tip',
             })
-            addElement(tip, "a", {
-              class: "bes_tip_anchor",
+            addElement(tip, 'a', {
+              class: 'bes_tip_anchor',
               textContent: item.title,
             })
-            const tipContent = addElement(tip, "div", {
-              class: "bes_tip_content",
+            const tipContent = addElement(tip, 'div', {
+              class: 'bes_tip_content',
               // eslint-disable-next-line @typescript-eslint/naming-convention
               innerHTML: createHTML((item as SettingsTipItem).tipContent),
             })
@@ -541,9 +541,9 @@ function createSettingsElement() {
     }
 
     if (settingsOptions.footer) {
-      const footer = addElement(settingsMain, "footer")
+      const footer = addElement(settingsMain, 'footer')
       footer!.innerHTML = createHTML(
-        typeof settingsOptions.footer === "string"
+        typeof settingsOptions.footer === 'string'
           ? settingsOptions.footer
           : `<p>Made with ❤️ by
       <a href="https://www.pipecraft.net/" target="_blank">
@@ -575,9 +575,9 @@ function addCommonSettings(
     // Switch locale
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     settingsTable.locale = {
-      title: i("settings.locale"),
-      type: "select",
-      defaultValue: "",
+      title: i('settings.locale'),
+      type: 'select',
+      defaultValue: '',
       options: {},
       group: ++maxGroup,
     } as SettingsSelectItem
@@ -597,7 +597,7 @@ function handleShowSettingsUrl() {
   const hashString = `#!show-settings-${settingsOptions.id}`
   if (location.hash === hashString) {
     setTimeout(showSettings, 100)
-    history.replaceState({}, "", location.href.replace(hashString, ""))
+    history.replaceState({}, '', location.href.replace(hashString, ''))
   }
 }
 
@@ -611,28 +611,28 @@ export async function showSettings() {
   if (win.self !== win.top) {
     win.top?.postMessage(
       {
-        type: "bes-show-settings",
+        type: 'bes-show-settings',
         id: settingsOptions?.id,
       },
-      "*"
+      '*'
     )
     return
   }
 
   closeModal()
 
-  const event = new CustomEvent("beforeShowSettings")
+  const event = new CustomEvent('beforeShowSettings')
   // Dispatch beforeShowSettings event to close other extension's settings
-  win.dispatchEvent(event)
+  doc.dispatchEvent(event)
 
   // Listen to beforeShowSettings event to close opened modal before showing settings from other extension
-  addEventListener(win, "beforeShowSettings", onBeforeShowSettings, true)
+  addEventListener(doc, 'beforeShowSettings', onBeforeShowSettings, true)
 
   createSettingsElement()
   await updateOptions()
 
-  addEventListener(doc, "click", onDocumentClick, true)
-  addEventListener(doc, "keydown", onDocumentKeyDown, true)
+  addEventListener(doc, 'click', onDocumentClick, true)
+  addEventListener(doc, 'keydown', onDocumentKeyDown, true)
   // activeExtension(settingsOptions.id)
   // deactiveExtensionList()
 }
@@ -642,7 +642,7 @@ 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") || getPrefferedLocale()
+  lastLocale = getSettingsValue('locale') || getPrefferedLocale()
   resetI18n(lastLocale)
 
   const options = optionsProvider()
@@ -656,7 +656,7 @@ const resetSettingsUI = (optionsProvider: () => SettingsOptions) => {
     initAvailableLocales(availableLocales)
     const localeSelect = settingsTable.locale as SettingsSelectItem
     localeSelect.options = {
-      [i("settings.systemLanguage")]: "",
+      [i('settings.systemLanguage')]: '',
     }
     for (const locale of availableLocales) {
       // Use language display name from localeNames, fallback to locale code if not found
@@ -681,7 +681,7 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
     // addSideMenu()
 
     const newLocale =
-      getSettingsValue<string | undefined>("locale") || getPrefferedLocale()
+      getSettingsValue<string | undefined>('locale') || getPrefferedLocale()
     // console.log("lastLocale:", lastLocale, "newLocale:", newLocale)
     if (lastLocale !== newLocale) {
       const isShown = isSettingsShown()
@@ -698,7 +698,7 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
       }
     }
 
-    if (typeof settingsOptions.onValueChange === "function") {
+    if (typeof settingsOptions.onValueChange === 'function') {
       settingsOptions.onValueChange()
     }
   })
@@ -711,18 +711,18 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
     resetSettingsUI(optionsProvider)
   }, 50)
 
-  void registerMenuCommand(i("settings.menu.settings"), showSettings, {
-    accessKey: "o",
+  void registerMenuCommand(i('settings.menu.settings'), showSettings, {
+    accessKey: 'o',
   })
 
-  addEventListener(win, "message", (event: MessageEvent) => {
+  addEventListener(win, 'message', (event: MessageEvent) => {
     if (!event.data || event.data.id !== settingsOptions?.id) {
       return
     }
 
-    if (event.data.type === "bes-show-settings") {
+    if (event.data.type === 'bes-show-settings') {
       void showSettings()
-    } else if (event.data.type === "bes-hide-settings") {
+    } else if (event.data.type === 'bes-hide-settings') {
       hideSettings()
     }
   })

package/lib/style.scss

@@ -220,7 +220,8 @@
   .option_groups .bes_tip {
     position: relative;
     margin: 0;
-    padding: 0 15px 0 0;
+    margin-top: -1px;
+    padding: 6px 15px 6px 0;
     border: none;
     max-width: none;
     font-size: 14px;

package/lib/switch.ts

@@ -2,7 +2,7 @@ import {
   addElement,
   addEventListener,
   createElement,
-} from "browser-extension-utils"
+} from 'browser-extension-utils'
 
 type SwichOptions = {
   checked?: boolean
@@ -10,17 +10,17 @@ type SwichOptions = {
 }
 
 export function createSwitch(options = {} as SwichOptions): HTMLElement {
-  const container = createElement("label", { class: "bes_switch_container" })
+  const container = createElement('label', { class: 'bes_switch_container' })
   const checkbox = createElement(
-    "input",
-    options.checked ? { type: "checkbox", checked: "" } : { type: "checkbox" }
+    'input',
+    options.checked ? { type: 'checkbox', checked: '' } : { type: 'checkbox' }
   )
   addElement(container, checkbox)
-  const switchElm = createElement("span", { class: "bes_switch" })
-  addElement(switchElm, "span", { class: "bes_slider" })
+  const switchElm = createElement('span', { class: 'bes_switch' })
+  addElement(switchElm, 'span', { class: 'bes_slider' })
   addElement(container, switchElm)
   if (options.onchange) {
-    addEventListener(checkbox, "change", options.onchange)
+    addEventListener(checkbox, 'change', options.onchange)
   }
 
   return container
@@ -40,16 +40,16 @@ export function createSwitchOption(
   text: string | SwichOptions,
   options?: SwichOptions
 ): HTMLElement {
-  if (typeof text !== "string") {
+  if (typeof text !== 'string') {
     return createSwitchOption(undefined, icon, text)
   }
 
-  const div = createElement("div", { class: "switch_option bes_option" })
+  const div = createElement('div', { class: 'switch_option bes_option' })
   if (icon) {
-    addElement(div, "img", { src: icon, class: "bes_icon" })
+    addElement(div, 'img', { src: icon, class: 'bes_icon' })
   }
 
-  addElement(div, "span", { textContent: text, class: "bes_title" })
+  addElement(div, 'span', { textContent: text, class: 'bes_title' })
   div.append(createSwitch(options))
   return div
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.8.9",
+  "version": "0.9.0",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
@@ -31,18 +31,18 @@
   "homepage": "https://github.com/utags/browser-extension-settings#readme",
   "dependencies": {
     "browser-extension-i18n": "^0.1.3",
-    "browser-extension-storage": "^0.2.8",
-    "browser-extension-utils": "^0.3.4"
+    "browser-extension-storage": "^0.2.10",
+    "browser-extension-utils": "^0.5.1"
   },
   "devDependencies": {
-    "@types/chrome": "^0.1.32",
-    "@vitest/coverage-v8": "^4.0.16",
-    "jsdom": "^27.4.0",
+    "@types/chrome": "^0.1.38",
+    "@vitest/coverage-v8": "^4.1.0",
+    "jsdom": "^29.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16",
-    "xo": "^1.2.3"
+    "vitest": "^4.1.0",
+    "xo": "^2.0.2"
   },
   "files": [
     "lib/",