browser-extension-settings 0.2.10 → 0.3.1

package/lib/common.ts

@@ -1,4 +1,4 @@
-export const besVersion = 18
+export const besVersion = 30
 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/extension-list.ts

@@ -27,23 +27,33 @@ const relatedExtensions: RelatedExtension[] = [
   {
     id: "utags",
     title: "🏷️ UTags - Add usertags to links",
-    url: "https://greasyfork.org/scripts/460718",
+    url: "https://greasyfork.org/zh-CN/scripts/460718-utags-add-usertags-to-links",
   },
   {
     id: "links-helper",
     title: "🔗 链接助手",
     description: "在新标签页中打开第三方网站链接，图片链接转图片标签等",
-    url: "https://greasyfork.org/scripts/464541",
+    url: "https://greasyfork.org/zh-CN/scripts/464541-links-helper",
   },
   {
     id: "v2ex.rep",
     title: "V2EX.REP - 专注提升 V2EX 主题回复浏览体验",
-    url: "https://greasyfork.org/scripts/466589",
+    url: "https://greasyfork.org/zh-CN/scripts/466589-v2ex-rep-%E4%B8%93%E6%B3%A8%E6%8F%90%E5%8D%87-v2ex-%E4%B8%BB%E9%A2%98%E5%9B%9E%E5%A4%8D%E6%B5%8F%E8%A7%88%E4%BD%93%E9%AA%8C",
   },
   {
     id: "v2ex.min",
     title: "v2ex.min - V2EX 极简风格",
-    url: "https://greasyfork.org/scripts/463552",
+    url: "https://greasyfork.org/zh-CN/scripts/463552-v2ex-min-v2ex-%E6%9E%81%E7%AE%80%E9%A3%8E%E6%A0%BC",
+  },
+  {
+    id: "replace-ugly-avatars",
+    title: "赐你个头像吧",
+    url: "https://greasyfork.org/zh-CN/scripts/472616-replace-ugly-avatars",
+  },
+  {
+    id: "more-by-pipecraft",
+    title: "更多有趣的脚本",
+    url: "https://greasyfork.org/zh-CN/users/1030884-pipecraft",
   },
 ]
 
@@ -132,17 +142,38 @@ const createInstalledExtension = (installedExtension: InstalledExtension) => {
 }
 
 const updateRelatedExtensions = (container: HTMLElement) => {
-  container.innerHTML = createHTML("")
+  const relatedExtensionElements = $$("[data-extension-id]", container)
+  if (relatedExtensionElements.length > 0) {
+    for (const relatedExtensionElement of relatedExtensionElements) {
+      if (
+        isInstalledExtension(
+          relatedExtensionElement.dataset.extensionId || "noid"
+        )
+      ) {
+        relatedExtensionElement.remove()
+      }
+    }
+  } else {
+    container.innerHTML = createHTML("")
+  }
 
   for (const relatedExtension of relatedExtensions) {
     // console.log(relatedExtension)
 
-    if (isInstalledExtension(relatedExtension.id)) {
+    if (
+      isInstalledExtension(relatedExtension.id) ||
+      $(`[data-extension-id="${relatedExtension.id}"]`, container)
+    ) {
       continue
     }
 
+    if ($$("[data-extension-id]", container).length >= 4) {
+      return
+    }
+
     const div4 = addElement(container, "div", {
       class: "related_extension",
+      "data-extension-id": relatedExtension.id,
     })
 
     const a = addElement(div4, "a", {

package/lib/index.ts

@@ -3,6 +3,6 @@ export {
   showSettings,
   hideSettings,
   getSettingsValue,
-  saveSattingsValues,
-  resetSattingsValues,
+  saveSettingsValues,
+  resetSettingsValues,
 } from "./settings"

package/lib/settings.ts

@@ -46,6 +46,7 @@ type SettingsTable = Record<
 
 type SettingsSwitchItem = {
   title: string
+  icon?: string
   defaultValue: boolean
   type?: "switch"
   group?: number
@@ -53,6 +54,7 @@ type SettingsSwitchItem = {
 
 type SettingsInputItem = {
   title: string
+  icon?: string
   defaultValue: string
   placeholder?: string
   type: string
@@ -61,6 +63,7 @@ type SettingsInputItem = {
 
 type SettingsActionItem = {
   title: string
+  icon?: string
   type: string
   onclick?: () => void
   url?: string
@@ -70,6 +73,7 @@ type SettingsActionItem = {
 
 type SettingsTipItem = {
   title: string
+  icon?: string
   type: string
   tipContent: string
   group?: number
@@ -108,7 +112,7 @@ async function getSettings() {
   )
 }
 
-async function saveSattingsValue(key: string, value: any) {
+async function saveSettingsValue(key: string, value: any) {
   const settings = await getSettings()
   settings[key] =
     settingsTable[key] && settingsTable[key].defaultValue === value
@@ -118,11 +122,11 @@ async function saveSattingsValue(key: string, value: any) {
   await setValue(storageKey, settings)
 }
 
-export async function resetSattingsValues() {
+export async function resetSettingsValues() {
   await setValue(storageKey, {})
 }
 
-export async function saveSattingsValues(
+export async function saveSettingsValues(
   values: Record<string, boolean | string | undefined>
 ) {
   const settings = await getSettings()
@@ -324,11 +328,11 @@ function createSettingsElement() {
         // console.log(key, item, type, group)
         switch (type) {
           case "switch": {
-            const switchOption = createSwitchOption(item.title, {
+            const switchOption = createSwitchOption(item.icon, item.title, {
               async onchange(event: Event) {
                 const checkbox = event.target as HTMLInputElement
                 if (checkbox) {
-                  await saveSattingsValue(key, checkbox.checked)
+                  await saveSettingsValue(key, checkbox.checked)
                 }
               },
             })
@@ -357,7 +361,7 @@ function createSettingsElement() {
 
                 timeoutId = setTimeout(async () => {
                   if (textArea) {
-                    await saveSattingsValue(key, textArea.value.trim())
+                    await saveSettingsValue(key, textArea.value.trim())
                   }
                 }, 100)
               },

package/lib/style.scss

@@ -224,8 +224,14 @@
     border-top: none;
   }
 
+  .switch_option > img {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
   .switch_option > span {
     margin-right: 10px;
+    flex-grow: 1;
   }
 
   .option_groups .bes_tip {

package/lib/switch.ts

@@ -29,8 +29,26 @@ export function createSwitch(options = {} as SwichOptions): HTMLElement {
 export function createSwitchOption(
   text: string,
   options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string | undefined,
+  text: string,
+  options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string,
+  text: string | SwichOptions,
+  options?: SwichOptions
 ): HTMLElement {
+  if (typeof text !== "string") {
+    return createSwitchOption(undefined, icon, text)
+  }
+
   const div = createElement("div", { class: "switch_option" })
+  if (icon) {
+    addElement(div, "img", { src: icon })
+  }
+
   addElement(div, "span", { textContent: text })
   div.append(createSwitch(options))
   return div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.2.10",
+  "version": "0.3.1",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",