browser-extension-settings 0.0.3 → 0.0.5

package/lib/common.ts

@@ -1,2 +1,3 @@
+export const besVersion = 12
 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/extension-list.ts

@@ -1,4 +1,11 @@
-import { $, addElement, createElement } from "browser-extension-utils"
+import {
+  $,
+  $$,
+  addClass,
+  addElement,
+  createElement,
+  removeClass,
+} from "browser-extension-utils"
 import { openButton, openInNewTabButton } from "./common"
 
 type InstalledExtension = {
@@ -27,6 +34,11 @@ const relatedExtensions: RelatedExtension[] = [
     description: "在新标签页中打开第三方网站链接，图片链接转图片标签等",
     url: "https://greasyfork.org/scripts/464541",
   },
+  {
+    id: "v2ex.rep",
+    title: "V2EX.REP - 专注提升 V2EX 主题回复浏览体验",
+    url: "https://greasyfork.org/scripts/466589",
+  },
   {
     id: "v2ex.min",
     title: "v2ex.min - V2EX 极简风格",
@@ -38,25 +50,72 @@ const getInstalledExtesionList = () => {
   return $(".extension_list_container .installed_extension_list")
 }
 
+const getRelatedExtesionList = () => {
+  return $(".extension_list_container .related_extension_list")
+}
+
+const isInstalledExtension = (id: string) => {
+  const list = getInstalledExtesionList()
+  if (!list) {
+    return false
+  }
+
+  const installed = $(`[data-extension-id="${id}"]`, list)
+  return Boolean(installed)
+}
+
 export const addCurrentExtension = (extension: InstalledExtension) => {
   const list = getInstalledExtesionList()
   if (!list) {
     return
   }
 
-  const id = extension.id
-  const added = $(`[data-extension-id="${id}"]`, list)
-  if (added) {
+  if (isInstalledExtension(extension.id)) {
     return
   }
 
   const element = createInstalledExtension(extension)
   list.append(element)
+
+  const list2 = getRelatedExtesionList()
+  if (list2) {
+    updateRelatedExtensions(list2)
+  }
+}
+
+export const activeExtension = (id: string) => {
+  const list = getInstalledExtesionList()
+  if (!list) {
+    return false
+  }
+
+  for (const element of $$(".active", list)) {
+    removeClass(element, "active")
+  }
+
+  const installed = $(`[data-extension-id="${id}"]`, list)
+  if (installed) {
+    addClass(installed, "active")
+  }
+}
+
+export const activeExtensionList = () => {
+  const extensionListContainer = $(".extension_list_container")
+  if (extensionListContainer) {
+    addClass(extensionListContainer, "bes_active")
+  }
+}
+
+export const deactiveExtensionList = () => {
+  const extensionListContainer = $(".extension_list_container")
+  if (extensionListContainer) {
+    removeClass(extensionListContainer, "bes_active")
+  }
 }
 
 const createInstalledExtension = (installedExtension: InstalledExtension) => {
   const div = createElement("div", {
-    class: "related_extension",
+    class: "installed_extension",
     "data-extension-id": installedExtension.id,
   })
   const a = addElement(div, "a", {
@@ -71,6 +130,33 @@ const createInstalledExtension = (installedExtension: InstalledExtension) => {
   return div
 }
 
+const updateRelatedExtensions = (container: HTMLElement) => {
+  container.innerHTML = ""
+
+  for (const relatedExtension of relatedExtensions) {
+    // console.log(relatedExtension)
+
+    if (isInstalledExtension(relatedExtension.id)) {
+      continue
+    }
+
+    const div4 = addElement(container, "div", {
+      class: "related_extension",
+    })
+
+    const a = addElement(div4, "a", {
+      href: relatedExtension.url,
+      target: "_blank",
+    })
+
+    addElement(a, "span", {
+      textContent: relatedExtension.title,
+    })
+    const svg = addElement(a, "svg")
+    svg.outerHTML = openInNewTabButton
+  }
+}
+
 export function createExtensionList(installedExtensions: InstalledExtension[]) {
   const div = createElement("div", {
     class: "extension_list_container thin_scrollbar",
@@ -82,7 +168,11 @@ export function createExtensionList(installedExtensions: InstalledExtension[]) {
     class: "installed_extension_list",
   })
   for (const installedExtension of installedExtensions) {
-    console.log(installedExtension)
+    // console.log(installedExtension)
+
+    if (isInstalledExtension(installedExtension.id)) {
+      continue
+    }
 
     const element = createInstalledExtension(installedExtension)
     div2.append(element)
@@ -92,24 +182,7 @@ export function createExtensionList(installedExtensions: InstalledExtension[]) {
   const div3 = addElement(div, "div", {
     class: "related_extension_list",
   })
-  for (const relatedExtension of relatedExtensions) {
-    console.log(relatedExtension)
-
-    const div4 = addElement(div3, "div", {
-      class: "related_extension",
-    })
-
-    const a = addElement(div4, "a", {
-      href: relatedExtension.url,
-      target: "_blank",
-    })
-
-    addElement(a, "span", {
-      textContent: relatedExtension.title,
-    })
-    const svg = addElement(a, "svg")
-    svg.outerHTML = openInNewTabButton
-  }
+  updateRelatedExtensions(div3)
 
   return div
 }

package/lib/settings.ts

@@ -6,6 +6,7 @@ import {
 import {
   $,
   $$,
+  addClass,
   addElement,
   addEventListener,
   addStyle,
@@ -15,7 +16,14 @@ import {
 } from "browser-extension-utils"
 import styleText from "data-text:./style.scss"
 import { createSwitchOption } from "./switch"
-import { createExtensionList, addCurrentExtension } from "./extension-list"
+import {
+  createExtensionList,
+  addCurrentExtension,
+  activeExtension,
+  activeExtensionList,
+  deactiveExtensionList,
+} from "./extension-list"
+import { besVersion } from "./common"
 
 const prefix = "browser_extension_settings_"
 
@@ -28,13 +36,19 @@ type SettingsOptions = {
   relatedExtensions?: RelatedExtension[]
 }
 
-type SettingsTable = Record<string, SettingsSwitchItem>
+type SettingsTable = Record<string, SettingsSwitchItem | SettingsInputItem>
 
 type SettingsSwitchItem = {
   title: string
   defaultValue: boolean
 }
 
+type SettingsInputItem = {
+  title: string
+  defaultValue: string
+  type: string
+}
+
 type RelatedExtension = {
   id: string
   title: string
@@ -48,11 +62,14 @@ type InstalledExtension = {
   version: string
 }
 
-const settingsElementId =
-  prefix + "main_" + String(Math.round(Math.random() * 10_000))
+const randomId = String(Math.round(Math.random() * 10_000))
+const settingsContainerId = prefix + "container_" + randomId
+const settingsElementId = prefix + "main_" + randomId
 const getSettingsElement = () => $("#" + settingsElementId)
 const getSettingsStyle: () => string = () =>
-  styleText.replace(/browser_extension_settings_main/gm, settingsElementId)
+  styleText
+    .replace(/browser_extension_settings_container/gm, settingsContainerId)
+    .replace(/browser_extension_settings_main/gm, settingsElementId)
 const storageKey = "settings"
 
 let settingsOptions: SettingsOptions
@@ -80,7 +97,17 @@ export function getSettingsValue(key: string): boolean | string | undefined {
     : settingsTable[key]?.defaultValue
 }
 
-const modalHandler = (event) => {
+const closeModal = () => {
+  const settingsContainer = getSettingsContainer()
+  if (settingsContainer) {
+    settingsContainer.style.display = "none"
+  }
+
+  removeEventListener(document, "click", onDocumentClick)
+  removeEventListener(document, "keydown", onDocumentKeyDown)
+}
+
+const onDocumentClick = (event) => {
   let target = event.target as HTMLElement
   const settingsContainer = getSettingsContainer()
   if (settingsContainer) {
@@ -91,11 +118,30 @@ const modalHandler = (event) => {
     if (target === settingsContainer) {
       return
     }
+  }
 
-    settingsContainer.style.display = "none"
+  closeModal()
+}
+
+const onDocumentKeyDown = (event) => {
+  if (event.defaultPrevented) {
+    return // 如果事件已经在进行中，则不做任何事。
+  }
+
+  switch (event.key) {
+    case "Escape": {
+      // 按“ESC”键时要做的事。
+      closeModal()
+      break
+    }
+
+    default: {
+      return
+    } // 什么都没按就退出吧。
   }
 
-  removeEventListener(document, "click", modalHandler)
+  // 取消默认动作，从而避免处理两次。
+  event.preventDefault()
 }
 
 async function updateOptions() {
@@ -131,17 +177,27 @@ async function updateOptions() {
 }
 
 function getSettingsContainer() {
-  return (
-    $(`#${prefix}container`) ||
-    addElement(doc.body, "div", {
-      id: `${prefix}container`,
-    })
-  )
+  const container = $(`.${prefix}container`)
+  if (container) {
+    const theVersion = Number.parseInt(container.dataset.besVersion || "0", 10)
+    if (theVersion < besVersion) {
+      container.id = settingsContainerId
+      container.dataset.besVersion = String(besVersion)
+    }
+
+    return container
+  }
+
+  return addElement(doc.body, "div", {
+    id: settingsContainerId,
+    class: `${prefix}container`,
+    "data-bes-version": besVersion,
+  })
 }
 
 function getSettingsWrapper() {
   return (
-    $(`#${prefix}container .${prefix}wrapper`) ||
+    $(`.${prefix}container .${prefix}wrapper`) ||
     addElement(getSettingsContainer(), "div", {
       class: `${prefix}wrapper`,
     })
@@ -149,6 +205,11 @@ function getSettingsWrapper() {
 }
 
 function initExtensionList() {
+  if (!doc.body) {
+    setTimeout(initExtensionList, 100)
+    return
+  }
+
   const wrapper = getSettingsWrapper()
   if (!$(".extension_list_container", wrapper)) {
     const list = createExtensionList([])
@@ -180,7 +241,7 @@ function createSettingsElement() {
       textContent: "Settings",
       class: "navigation_go_previous",
       onclick() {
-        console.log(1)
+        activeExtensionList()
       },
     })
 
@@ -267,17 +328,34 @@ function createSettingsElement() {
   return settingsMain
 }
 
-function addSideMenu(options) {
-  console.log("doc.body", doc.body)
+function addSideMenu() {
+  if (!doc.body) {
+    setTimeout(addSideMenu, 100)
+    return
+  }
+
   const menu =
     $("#browser_extension_side_menu") ||
     addElement(doc.body, "div", {
       id: "browser_extension_side_menu",
-      "data-version": 1,
+      "data-bes-version": besVersion,
     })
+
+  const button = $("button[data-bes-version]", menu)
+
+  if (button) {
+    const theVersion = Number.parseInt(button.dataset.besVersion || "0", 10)
+    if (theVersion >= besVersion) {
+      return
+    }
+
+    button.remove()
+  }
+
   addElement(menu, "button", {
     type: "button",
-    title: options.title ? "设置 - " + options.title : "设置",
+    "data-bes-version": besVersion,
+    title: "设置",
     onclick() {
       setTimeout(showSettings, 1)
     },
@@ -291,7 +369,10 @@ export async function showSettings() {
   await updateOptions()
   settingsContainer.style.display = "block"
 
-  addEventListener(document, "click", modalHandler)
+  addEventListener(document, "click", onDocumentClick)
+  addEventListener(document, "keydown", onDocumentKeyDown)
+  activeExtension(settingsOptions.id)
+  deactiveExtensionList()
 }
 
 export const initSettings = async (options: SettingsOptions) => {
@@ -308,5 +389,5 @@ export const initSettings = async (options: SettingsOptions) => {
   settings = await getSettings()
   addStyle(getSettingsStyle())
   initExtensionList()
-  addSideMenu(options)
+  addSideMenu()
 }

package/lib/style.scss

@@ -78,6 +78,10 @@
             background-color: #e4e4e6;
           }
 
+          &.active a {
+            cursor: default;
+          }
+
           &:first-of-type {
             border-top: none;
             border-top-right-radius: 10px;
@@ -183,6 +187,7 @@
   }
 
   .option_groups textarea {
+    font-size: 12px;
     margin: 10px 0 10px 0;
     height: 100px;
     width: 100%;
@@ -332,6 +337,7 @@
   top: 80px;
   right: 0;
   padding-top: 20px;
+  z-index: 10000;
 }
 
 #browser_extension_side_menu:hover {
@@ -354,3 +360,25 @@
 #browser_extension_side_menu button:active {
   opacity: 100%;
 }
+
+@media (max-width: 500px) {
+  #browser_extension_settings_container {
+    right: 10px;
+
+    .extension_list_container {
+      display: none;
+    }
+    .extension_list_container.bes_active {
+      display: block;
+    }
+    .extension_list_container.bes_active + div {
+      display: none;
+    }
+  }
+
+  #browser_extension_settings_main {
+    a.navigation_go_previous {
+      display: block;
+    }
+  }
+}

package/package.json

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