browser-extension-settings 0.0.7 → 0.1.0

package/lib/common.ts

@@ -1,3 +1,3 @@
-export const besVersion = 13
+export const besVersion = 14
 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>`

package/lib/settings.ts

@@ -6,13 +6,13 @@ import {
 import {
   $,
   $$,
-  addClass,
   addElement,
   addEventListener,
   addStyle,
-  createElement,
   doc,
+  parseInt10,
   removeEventListener,
+  runWhenBodyExists,
 } from "browser-extension-utils"
 import styleText from "data-text:./style.scss"
 import { createSwitchOption } from "./switch"
@@ -41,12 +41,16 @@ type SettingsTable = Record<string, SettingsSwitchItem | SettingsInputItem>
 type SettingsSwitchItem = {
   title: string
   defaultValue: boolean
+  type?: "switch"
+  group?: number
 }
 
 type SettingsInputItem = {
   title: string
   defaultValue: string
+  placeholder?: string
   type: string
+  group?: number
 }
 
 type RelatedExtension = {
@@ -93,8 +97,8 @@ async function saveSattingsValue(key: string, value: any) {
 
 export function getSettingsValue(key: string): boolean | string | undefined {
   return Object.hasOwn(settings, key)
-    ? settings[key]
-    : settingsTable[key]?.defaultValue
+    ? (settings[key] as boolean | string | undefined)
+    : (settingsTable[key]?.defaultValue as boolean | string | undefined)
 }
 
 const closeModal = () => {
@@ -136,11 +140,33 @@ async function updateOptions() {
 
   for (const key in settingsTable) {
     if (Object.hasOwn(settingsTable, key)) {
-      const checkbox = $(
-        `#${settingsElementId} .option_groups .switch_option[data-key="${key}"] input`
-      )
-      if (checkbox) {
-        checkbox.checked = getSettingsValue(key)
+      const item = settingsTable[key]
+      const type = item.type || "switch"
+
+      // console.log(key, type)
+      switch (type) {
+        case "switch": {
+          const checkbox = $(
+            `#${settingsElementId} .option_groups .switch_option[data-key="${key}"] input`
+          ) as HTMLInputElement
+          if (checkbox) {
+            checkbox.checked = getSettingsValue(key) as boolean
+          }
+
+          break
+        }
+
+        case "textarea": {
+          const textArea = $(
+            `#${settingsElementId} .option_groups textarea[data-key="${key}"]`
+          ) as HTMLTextAreaElement
+          textArea.value = getSettingsValue(key) as string
+          break
+        }
+
+        default: {
+          break
+        }
       }
     }
   }
@@ -154,17 +180,12 @@ async function updateOptions() {
       ? "block"
       : "none"
   }
-
-  const customStyleValue = $(`#${settingsElementId} .option_groups textarea`)
-  if (customStyleValue) {
-    customStyleValue.value = settings[`customRulesForCurrentSite_${host}`] || ""
-  }
 }
 
 function getSettingsContainer() {
   const container = $(`.${prefix}container`)
   if (container) {
-    const theVersion = Number.parseInt(container.dataset.besVersion || "0", 10)
+    const theVersion = parseInt10(container.dataset.besVersion, 0)
     if (theVersion < besVersion) {
       container.id = settingsContainerId
       container.dataset.besVersion = String(besVersion)
@@ -192,11 +213,6 @@ function getSettingsWrapper() {
 }
 
 function initExtensionList() {
-  if (!doc.body) {
-    setTimeout(initExtensionList, 100)
-    return
-  }
-
   const wrapper = getSettingsWrapper()
   if (!$(".extension_list_container", wrapper)) {
     const list = createExtensionList([])
@@ -236,11 +252,29 @@ function createSettingsElement() {
       addElement(settingsMain, "h2", { textContent: settingsOptions.title })
     }
 
-    const options = addElement(settingsMain, "div", { class: "option_groups" })
+    const optionGroups: HTMLElement[] = []
+    const getOptionGroup = (index: number) => {
+      if (index > optionGroups.length) {
+        for (let i = optionGroups.length; i < index; i++) {
+          optionGroups.push(
+            addElement(settingsMain!, "div", {
+              class: "option_groups",
+            })
+          )
+        }
+      }
+
+      return optionGroups[index - 1]
+    }
+
     for (const key in settingsTable) {
       if (Object.hasOwn(settingsTable, key)) {
         const item = settingsTable[key]
-        if (!item.type || item.type === "switch") {
+        const type = item.type || "switch"
+        const group = item.group || 1
+        const optionGroup = getOptionGroup(group)
+        // console.log(key, item, type, group)
+        if (type === "switch") {
           const switchOption = createSwitchOption(item.title, {
             async onchange(event: Event) {
               if (event.target) {
@@ -251,35 +285,31 @@ function createSettingsElement() {
 
           switchOption.dataset.key = key
 
-          addElement(options, switchOption)
+          addElement(optionGroup, switchOption)
+        } else if (type === "textarea") {
+          let timeoutId: number | undefined
+          addElement(optionGroup, "textarea", {
+            "data-key": key,
+            placeholder: (item as SettingsInputItem).placeholder || "",
+            onkeyup(event: Event) {
+              const textArea = event.target as HTMLTextAreaElement
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+                timeoutId = undefined
+              }
+
+              timeoutId = setTimeout(async () => {
+                if (textArea) {
+                  await saveSattingsValue(key, textArea.value.trim())
+                }
+              }, 100)
+            },
+          })
         }
       }
     }
 
-    const options2 = addElement(settingsMain, "div", {
-      class: "option_groups",
-    })
-    let timeoutId: number | undefined
-    addElement(options2, "textarea", {
-      placeholder: `/* Custom rules for internal URLs, matching URLs will be opened in new tabs */`,
-      onkeyup(event: Event) {
-        const textArea = event.target as HTMLTextAreaElement
-        if (timeoutId) {
-          clearTimeout(timeoutId)
-          timeoutId = undefined
-        }
-
-        timeoutId = setTimeout(async () => {
-          const host = location.host
-          if (textArea) {
-            await saveSattingsValue(
-              `customRulesForCurrentSite_${host}`,
-              textArea.value.trim()
-            )
-          }
-        }, 100)
-      },
-    })
+    const options2 = getOptionGroup(2)
 
     const tip = addElement(options2, "div", {
       class: "tip",
@@ -321,11 +351,6 @@ function createSettingsElement() {
 }
 
 function addSideMenu() {
-  if (!doc.body) {
-    setTimeout(addSideMenu, 100)
-    return
-  }
-
   const menu =
     $("#browser_extension_side_menu") ||
     addElement(doc.body, "div", {
@@ -336,7 +361,7 @@ function addSideMenu() {
   const button = $("button[data-bes-version]", menu)
 
   if (button) {
-    const theVersion = Number.parseInt(button.dataset.besVersion || "0", 10)
+    const theVersion = parseInt10(button.dataset.besVersion, 0)
     if (theVersion >= besVersion) {
       return
     }
@@ -372,6 +397,7 @@ export const initSettings = async (options: SettingsOptions) => {
   settingsTable = options.settingsTable || {}
   addValueChangeListener(storageKey, async () => {
     settings = await getSettings()
+    // console.log(JSON.stringify(settings, null, 2))
     await updateOptions()
     if (typeof options.onValueChange === "function") {
       options.onValueChange()
@@ -380,6 +406,8 @@ export const initSettings = async (options: SettingsOptions) => {
 
   settings = await getSettings()
   addStyle(getSettingsStyle())
-  initExtensionList()
-  addSideMenu()
+  runWhenBodyExists(() => {
+    initExtensionList()
+    addSideMenu()
+  })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
@@ -26,7 +26,7 @@
   "homepage": "https://github.com/utags/browser-extension-settings#readme",
   "dependencies": {
     "browser-extension-storage": "^0.1.2",
-    "browser-extension-utils": "^0.1.4"
+    "browser-extension-utils": "^0.1.7"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.237",