browser-extension-settings 0.7.0 → 0.8.0

package/lib/common.ts

@@ -1,5 +1,5 @@
-// Version 0.7.0
-export const besVersion = 70
+// Version 0.8.0
+export const besVersion = 80
 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/settings.ts

@@ -168,7 +168,6 @@ export function getSettingsValue(key: string): boolean | string | undefined {
 const closeModal = () => {
   const settingsContainer = getSettingsContainer()
   if (settingsContainer) {
-    settingsContainer.style.display = "none"
     settingsContainer.remove()
   }
 
@@ -188,11 +187,8 @@ export function hideSettings() {
 
 function isSettingsShown() {
   const settingsContainer = $(`.${prefix}container`)
-  if (settingsContainer) {
-    return settingsContainer.style.display === "block"
-  }
 
-  return false
+  return Boolean(settingsContainer)
 }
 
 const onDocumentClick = (event: Event) => {
@@ -301,10 +297,9 @@ function getSettingsContainer(create = false) {
   }
 
   if (create) {
-    return addElement(doc.body, "div", {
+    return addElement(doc.documentElement, "div", {
       class: `${prefix}container`,
       "data-bes-version": besVersion,
-      style: "display: none;",
     })
   }
 }
@@ -357,6 +352,18 @@ function createSettingsElement() {
       class: `${prefix}main thin_scrollbar`,
     })
 
+    const header = addElement(settingsMain, "header", {
+      style: "display: flex; justify-content: flex-end;",
+    })
+    addElement(header, "div", {
+      class: `close-button`,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      innerHTML: createHTML(
+        `<svg viewBox="0 0 24 24" width="100%" height="100%" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`
+      ),
+      onclick: hideSettings,
+    })
+
     if (settingsOptions.title) {
       addElement(settingsMain, "h2", { textContent: settingsOptions.title })
     }
@@ -587,16 +594,14 @@ export async function showSettings() {
   closeModal()
 
   const event = new CustomEvent("beforeShowSettings")
+  // Dispatch beforeShowSettings event to close other extension's settings
   globalThis.dispatchEvent(event)
 
   // Listen to beforeShowSettings event to close opened modal before showing settings from other extension
   addEventListener(globalThis, "beforeShowSettings", onBeforeShowSettings, true)
 
-  const settingsContainer = getSettingsContainer(true)!
-
-  const settingsMain = createSettingsElement()
+  createSettingsElement()
   await updateOptions()
-  settingsContainer.style.display = "block"
 
   addEventListener(document, "click", onDocumentClick, true)
   addEventListener(document, "keydown", onDocumentKeyDown, true)
@@ -648,7 +653,7 @@ export const initSettings = async (optionsProvider: () => SettingsOptions) => {
 
     const newLocale =
       (getSettingsValue("locale") as string | undefined) || getPrefferedLocale()
-    console.log("lastLocale:", lastLocale, "newLocale:", newLocale)
+    // console.log("lastLocale:", lastLocale, "newLocale:", newLocale)
     if (lastLocale !== newLocale) {
       const isShown = isSettingsShown()
       closeModal()

package/lib/style.scss

@@ -1,27 +1,28 @@
 :host {
+  all: initial;
   --browser-extension-settings-background-color: #f2f2f7;
   --browser-extension-settings-text-color: #444444;
   --browser-extension-settings-link-color: #217dfc;
+  --browser-extension-settings-border-radius: 8px;
   --sb-track-color: #00000000;
   --sb-thumb-color: #33334480;
   --sb-size: 2px;
   --font-family: "helvetica neue", "microsoft yahei", arial, sans-serif;
 
-  position: fixed;
-  top: 10px;
-  right: 30px;
-  display: none;
-
-  z-index: 200000;
-  border-radius: 5px;
-  -webkit-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
-  -moz-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
-  box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22) !important;
-
   .browser_extension_settings_v2_wrapper {
+    position: fixed;
+    top: 10px;
+    right: 30px;
+    display: none;
+    z-index: 2147483647;
+    border-radius: var(--browser-extension-settings-border-radius);
+    -webkit-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
+    -moz-box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22);
+    box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22) !important;
     display: flex;
     background-color: var(--browser-extension-settings-background-color);
     font-family: var(--font-family);
+    border-radius: var(--browser-extension-settings-border-radius);
 
     h1,
     h2 {
@@ -100,6 +101,7 @@
   max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
+  border-radius: var(--browser-extension-settings-border-radius);
 
   box-sizing: border-box;
   padding: 10px 15px;
@@ -112,6 +114,18 @@
     margin: 5px 0 0;
   }
 
+  .close-button {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .option_groups {
     background-color: #fff;
     padding: 6px 15px 6px 15px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
@@ -35,13 +35,13 @@
     "browser-extension-utils": "^0.2.2"
   },
   "devDependencies": {
-    "@types/chrome": "^0.1.31",
-    "@vitest/coverage-v8": "^4.0.14",
-    "jsdom": "^27.2.0",
+    "@types/chrome": "^0.1.32",
+    "@vitest/coverage-v8": "^4.0.16",
+    "jsdom": "^27.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.14",
+    "vitest": "^4.0.16",
     "xo": "^1.2.3"
   },
   "files": [