browser-extension-settings 0.0.1 → 0.0.2

package/lib/index.d.ts

@@ -1,139 +1,5 @@
-export const doc: Document
+export async function initSettings(options: Record<string, unknown>): void
 
-export const win: Window
+export async function showSettings(): void
 
-export function uniq(array: any[]): any[]
-
-export function toCamelCase(text: string): string
-
-export function $(
-  selectors: string,
-  element?: HTMLElement | Document
-): HTMLElement | undefined
-
-export function querySelector(
-  selectors: string,
-  element?: HTMLElement | Document
-): HTMLElement | undefined
-
-export function $$(
-  selectors: string,
-  element?: HTMLElement | Document
-): HTMLElement[]
-
-export function querySelectorAll(
-  selectors: string,
-  element?: HTMLElement | Document
-): HTMLElement[]
-
-export function createElement(
-  tagName: string,
-  attributes?: Record<string, unknown>
-): HTMLElement
-
-export function addElement(
-  tagName: string,
-  attributes?: Record<string, unknown>
-): HTMLElement
-
-export function addElement(
-  parentNode: HTMLElement,
-  tagName: string | HTMLElement,
-  attributes?: Record<string, unknown>
-): HTMLElement
-
-export function addStyle(styleText: string): HTMLElement
-
-export function addEventListener(
-  element: HTMLElement | Document | EventTarget,
-  type: string,
-  listener: EventListenerOrEventListenerObject,
-  options?: boolean | AddEventListenerOptions
-): void
-
-export function addEventListener(
-  element: HTMLElement | Document | EventTarget,
-  type: string | Record<string, unknown>
-): void
-
-export function removeEventListener(
-  element: HTMLElement | Document | EventTarget,
-  type: string,
-  listener: EventListenerOrEventListenerObject,
-  options?: boolean | AddEventListenerOptions
-): void
-
-export function removeEventListener(
-  element: HTMLElement | Document | EventTarget,
-  type: string | Record<string, unknown>
-): void
-
-export function getAttribute(element: HTMLElement, name: string): string
-
-export function setAttribute(
-  element: HTMLElement,
-  name: string,
-  value: string
-): void
-
-export function setAttributes(
-  element: HTMLElement,
-  attributes: Record<string, unknown>
-): void
-
-export function addAttribute(
-  element: HTMLElement,
-  name: string,
-  value: string
-): void
-
-export function addClass(element: HTMLElement, className: string): void
-
-export function removeClass(element: HTMLElement, className: string): void
-
-export function hasClass(element: HTMLElement, className: string): boolean
-
-export type SetStyle = (
-  element: HTMLElement,
-  style: string | Record<string, unknown>,
-  overwrite?: boolean
-) => void
-
-export function setStyle(
-  element: HTMLElement,
-  style: string | Record<string, unknown>,
-  overwrite?: boolean
-): void
-
-export function toStyleMap(styleText: string): Record<string, string>
-
-export function noStyleSpace(text: string): string
-
-export function createSetStyle(styleText: string): SetStyle
-
-export function isUrl(text: string): boolean
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function throttle(func: Function, interval: number): Function
-
-export type MenuCallback = (event?: MouseEvent | KeyboardEvent) => void
-export function registerMenuCommand(
-  name: string,
-  callback: MenuCallback,
-  accessKey?: string
-): void
-
-export function extendHistoryApi(): void
-
-export const actionHref: string
-
-export function getOffsetPosition(
-  element: HTMLElement | undefined,
-  referElement?: HTMLElement | undefined
-): {
-  top: number
-  left: number
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function runOnce(key: string, func: Function): any
+export function getSettingsValue(key: string): boolean | string | undefined

package/lib/index.js

@@ -1,335 +1 @@
-export const doc = document
-
-export const win = window
-
-export const uniq = (array) => [...new Set(array)]
-
-export const toCamelCase = function (text) {
-  return text.replace(/^([A-Z])|[\s-_](\w)/g, function (match, p1, p2) {
-    if (p2) return p2.toUpperCase()
-    return p1.toLowerCase()
-  })
-}
-
-export const $ = (selectors, element) =>
-  (element || doc).querySelector(selectors)
-export const $$ = (selectors, element) => [
-  ...(element || doc).querySelectorAll(selectors),
-]
-export const querySelector = $
-export const querySelectorAll = $$
-
-export const createElement = (tagName, attributes) =>
-  setAttributes(doc.createElement(tagName), attributes)
-
-export const addElement = (parentNode, tagName, attributes) => {
-  if (!parentNode) {
-    return
-  }
-
-  if (typeof parentNode === "string") {
-    attributes = tagName
-    tagName = parentNode
-    parentNode = doc.head
-  }
-
-  if (typeof tagName === "string") {
-    const element = createElement(tagName, attributes)
-    parentNode.append(element)
-    return element
-  }
-
-  // tagName: HTMLElement
-  setAttributes(tagName, attributes)
-  parentNode.append(tagName)
-  return tagName
-}
-
-export const addStyle = (styleText) => {
-  const element = createElement("style", { textContent: styleText })
-  doc.head.append(element)
-  return element
-}
-
-export const addEventListener = (element, type, listener, options) => {
-  if (!element) {
-    return
-  }
-
-  if (typeof type === "object") {
-    for (const type1 in type) {
-      if (Object.hasOwn(type, type1)) {
-        element.addEventListener(type1, type[type1])
-      }
-    }
-  } else if (typeof type === "string" && typeof listener === "function") {
-    element.addEventListener(type, listener, options)
-  }
-}
-
-export const removeEventListener = (element, type, listener, options) => {
-  if (!element) {
-    return
-  }
-
-  if (typeof type === "object") {
-    for (const type1 in type) {
-      if (Object.hasOwn(type, type1)) {
-        element.removeEventListener(type1, type[type1])
-      }
-    }
-  } else if (typeof type === "string" && typeof listener === "function") {
-    element.removeEventListener(type, listener, options)
-  }
-}
-
-export const getAttribute = (element, name) =>
-  element ? element.getAttribute(name) : null
-export const setAttribute = (element, name, value) =>
-  element ? element.setAttribute(name, value) : undefined
-
-export const setAttributes = (element, attributes) => {
-  if (element && attributes) {
-    for (const name in attributes) {
-      if (Object.hasOwn(attributes, name)) {
-        const value = attributes[name]
-        if (value === undefined) {
-          continue
-        }
-
-        if (/^(value|textContent|innerText|innerHTML)$/.test(name)) {
-          element[name] = value
-        } else if (name === "style") {
-          setStyle(element, value, true)
-        } else if (/on\w+/.test(name)) {
-          const type = name.slice(2)
-          addEventListener(element, type, value)
-        } else {
-          setAttribute(element, name, value)
-        }
-      }
-    }
-  }
-
-  return element
-}
-
-export const addAttribute = (element, name, value) => {
-  const orgValue = getAttribute(element, name)
-  if (!orgValue) {
-    setAttribute(element, name, value)
-  } else if (!orgValue.includes(value)) {
-    setAttribute(element, name, orgValue + " " + value)
-  }
-}
-
-export const addClass = (element, className) => {
-  if (!element || !element.classList) {
-    return
-  }
-
-  element.classList.add(className)
-}
-
-export const removeClass = (element, className) => {
-  if (!element || !element.classList) {
-    return
-  }
-
-  element.classList.remove(className)
-}
-
-export const hasClass = (element, className) => {
-  if (!element || !element.classList) {
-    return false
-  }
-
-  return element.classList.contains(className)
-}
-
-export const setStyle = (element, values, overwrite) => {
-  if (!element) {
-    return
-  }
-
-  // element.setAttribute("style", value) -> Fail when violates CSP
-  const style = element.style
-
-  if (typeof values === "string") {
-    style.cssText = overwrite ? values : style.cssText + ";" + values
-    return
-  }
-
-  if (overwrite) {
-    style.cssText = ""
-  }
-
-  for (const key in values) {
-    if (Object.hasOwn(values, key)) {
-      style[key] = values[key].replace("!important", "")
-    }
-  }
-}
-
-// convert `font-size: 12px; color: red` to `{"fontSize": "12px"; "color": "red"}`
-// eslint-disable-next-line no-unused-vars
-const toStyleKeyValues = (styleText) => {
-  const result = {}
-  const keyValues = styleText.split(/\s*;\s*/)
-  for (const keyValue of keyValues) {
-    const kv = keyValue.split(/\s*:\s*/)
-    // TODO: fix when key is such as -webkit-xxx
-    const key = toCamelCase(kv[0])
-    if (key) {
-      result[key] = kv[1]
-    }
-  }
-
-  return result
-}
-
-export const toStyleMap = (styleText) => {
-  styleText = noStyleSpace(styleText)
-  const map = {}
-  const keyValues = styleText.split("}")
-  for (const keyValue of keyValues) {
-    const kv = keyValue.split("{")
-    if (kv[0] && kv[1]) {
-      map[kv[0]] = kv[1]
-    }
-  }
-
-  return map
-}
-
-export const noStyleSpace = (text) => text.replace(/\s*([^\w-+%!])\s*/gm, "$1")
-
-export const createSetStyle = (styleText) => {
-  const styleMap = toStyleMap(styleText)
-  return (element, value, overwrite) => {
-    if (typeof value === "object") {
-      setStyle(element, value, overwrite)
-    } else if (typeof value === "string") {
-      const key = noStyleSpace(value)
-      const value2 = styleMap[key]
-      setStyle(element, value2 || value, overwrite)
-    }
-  }
-}
-
-export const isUrl = (text) => /^https?:\/\//.test(text)
-
-/**
- *
- * @param { function } func
- * @param { number } interval
- * @returns
- */
-export const throttle = (func, interval) => {
-  let timeoutId = null
-  let next = false
-  const handler = (...args) => {
-    if (timeoutId) {
-      next = true
-    } else {
-      func.apply(this, args)
-      timeoutId = setTimeout(() => {
-        timeoutId = null
-        if (next) {
-          next = false
-          handler()
-        }
-      }, interval)
-    }
-  }
-
-  return handler
-}
-
-if (typeof Object.hasOwn !== "function") {
-  Object.hasOwn = (instance, prop) =>
-    Object.prototype.hasOwnProperty.call(instance, prop)
-}
-
-export const registerMenuCommand = () => undefined
-
-export const extendHistoryApi = () => {
-  // https://dirask.com/posts/JavaScript-on-location-changed-event-on-url-changed-event-DKeyZj
-  const pushState = history.pushState
-  const replaceState = history.replaceState
-
-  history.pushState = function () {
-    // eslint-disable-next-line prefer-rest-params
-    pushState.apply(history, arguments)
-    window.dispatchEvent(new Event("pushstate"))
-    window.dispatchEvent(new Event("locationchange"))
-  }
-
-  history.replaceState = function () {
-    // eslint-disable-next-line prefer-rest-params
-    replaceState.apply(history, arguments)
-    window.dispatchEvent(new Event("replacestate"))
-    window.dispatchEvent(new Event("locationchange"))
-  }
-
-  window.addEventListener("popstate", function () {
-    window.dispatchEvent(new Event("locationchange"))
-  })
-
-  // Usage example:
-  // window.addEventListener("locationchange", function () {
-  //   console.log("onlocationchange event occurred!")
-  // })
-}
-
-// eslint-disable-next-line no-script-url
-export const actionHref = "javascript:;"
-
-export const getOffsetPosition = (element, referElement) => {
-  const position = { top: 0, left: 0 }
-  referElement = referElement || doc.body
-
-  while (element && element !== referElement) {
-    position.top += element.offsetTop
-    position.left += element.offsetLeft
-    element = element.offsetParent
-  }
-
-  return position
-}
-
-const runOnceCache = {}
-export const runOnce = (key, func) => {
-  if (!key) {
-    return func()
-  }
-
-  if (Object.hasOwn(runOnceCache, key)) {
-    return runOnceCache[key]
-  }
-
-  const result = func()
-  runOnceCache[key] = result
-  return result
-}
-
-const cacheStore = {}
-const makeKey = (key: string | any[]) =>
-  Array.isArray(key) ? key.join(":") : key
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const Cache = {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  get: (key: string | any[]) => cacheStore[makeKey(key)],
-  add(key: string | any[], value: any) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    cacheStore[makeKey(key)] = value
-  },
-}
-
-export const sleep = async (time: number) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(1)
-    }, time)
-  })
-}
+export { initSettings, showSettings, getSettingsValue } from "./settings.js"

package/lib/settings.js

@@ -0,0 +1,224 @@
+import {
+  addValueChangeListener,
+  getValue,
+  setValue,
+} from "browser-extension-storage"
+import {
+  $,
+  addElement,
+  addEventListener,
+  addStyle,
+  doc,
+  removeEventListener,
+} from "browser-extension-utils"
+import styleText from "data-text:./style.scss"
+import { createSwitchOption } from "./switch.js"
+
+const settingsElementId =
+  "browser_extension_settings_" + String(Math.round(Math.random() * 10_000))
+const getSettingsElement = () => $("#" + settingsElementId)
+const getSettingsStyle = () =>
+  styleText.replace(/browser_extension_settings/gm, settingsElementId)
+const storageKey = "settings"
+
+let settingsOptions = {}
+let settingsTable = {}
+let settings = {}
+async function getSettings() {
+  return (await getValue(storageKey)) ?? {}
+}
+
+async function saveSattingsValue(key, value) {
+  const settings = await getSettings()
+  settings[key] =
+    settingsTable[key] && settingsTable[key].defaultValue === value
+      ? undefined
+      : value
+
+  await setValue(storageKey, settings)
+}
+
+export function getSettingsValue(key) {
+  return Object.hasOwn(settings, key)
+    ? settings[key]
+    : settingsTable[key]?.defaultValue
+}
+
+const modalHandler = (event) => {
+  let target = event.target
+  const settingsLayer = getSettingsElement()
+  if (settingsLayer) {
+    while (target !== settingsLayer && target) {
+      target = target.parentNode
+    }
+
+    if (target === settingsLayer) {
+      return
+    }
+
+    settingsLayer.style.display = "none"
+  }
+
+  removeEventListener(document, "click", modalHandler)
+}
+
+async function updateOptions() {
+  if (!getSettingsElement()) {
+    return
+  }
+
+  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 host = location.host
+  const group2 = $(`#${settingsElementId} .option_groups:nth-of-type(2)`)
+  if (group2) {
+    group2.style.display = getSettingsValue(
+      `enableCustomRulesForCurrentSite_${host}`
+    )
+      ? "block"
+      : "none"
+  }
+
+  const customStyleValue = $(`#${settingsElementId} .option_groups textarea`)
+  if (customStyleValue) {
+    customStyleValue.value = settings[`customRulesForCurrentSite_${host}`] || ""
+  }
+}
+
+function createSettingsElement() {
+  let settingsLayer = getSettingsElement()
+  if (!settingsLayer) {
+    settingsLayer = addElement(document.body, "div", {
+      id: settingsElementId,
+    })
+
+    if (settingsOptions.title) {
+      addElement(settingsLayer, "h2", { textContent: settingsOptions.title })
+    }
+
+    const options = addElement(settingsLayer, "div", { class: "option_groups" })
+    for (const key in settingsTable) {
+      if (Object.hasOwn(settingsTable, key)) {
+        const item = settingsTable[key]
+        if (!item.type || item.type === "switch") {
+          const switchOption = createSwitchOption(item.title, {
+            async onchange(event) {
+              await saveSattingsValue(key, event.target.checked)
+            },
+          })
+
+          switchOption.dataset.key = key
+
+          addElement(options, switchOption)
+        }
+      }
+    }
+
+    const options2 = addElement(settingsLayer, "div", {
+      class: "option_groups",
+    })
+    let timeoutId
+    addElement(options2, "textarea", {
+      placeholder: `/* Custom rules for internal URLs, matching URLs will be opened in new tabs */`,
+      onkeyup(event) {
+        if (timeoutId) {
+          clearTimeout(timeoutId)
+          timeoutId = null
+        }
+
+        timeoutId = setTimeout(async () => {
+          const host = location.host
+          await saveSattingsValue(
+            `customRulesForCurrentSite_${host}`,
+            event.target.value.trim()
+          )
+        }, 100)
+      },
+    })
+
+    const tip = addElement(options2, "div", {
+      class: "tip",
+    })
+    addElement(tip, "a", {
+      class: "tip_anchor",
+      textContent: "Examples",
+    })
+    const tipContent = addElement(tip, "div", {
+      class: "tip_content",
+      innerHTML: `<p>Custom rules for internal URLs, matching URLs will be opened in new tabs</p>
+      <p>
+      - One line per url pattern<br>
+      - All URLs contains '/posts' or '/users/'<br>
+      <pre>/posts/
+/users/</pre>
+
+      - Regex is supported<br>
+      <pre>^/(posts|members)/d+</pre>
+
+      - '*' for all URLs
+      </p>`,
+    })
+
+    if (settingsOptions.footer) {
+      const footer = addElement(settingsLayer, "footer")
+      footer.innerHTML =
+        typeof settingsOptions.footer === "string"
+          ? settingsOptions.footer
+          : `<p>Made with ❤️ by
+      <a href="https://www.pipecraft.net/" target="_blank">
+        Pipecraft
+      </a></p>`
+    }
+  }
+
+  return settingsLayer
+}
+
+function addSideMenu(options) {
+  const menu =
+    $("#browser_extension_side_menu") ||
+    addElement(doc.body, "div", {
+      id: "browser_extension_side_menu",
+      "data-version": 1,
+    })
+  addElement(menu, "button", {
+    type: "button",
+    title: options.title ? "设置 - " + options.title : "设置",
+    onclick() {
+      setTimeout(showSettings, 1)
+    },
+  })
+}
+
+export async function showSettings() {
+  const settingsLayer = createSettingsElement()
+  await updateOptions()
+  settingsLayer.style.display = "block"
+
+  addEventListener(document, "click", modalHandler)
+}
+
+export const initSettings = async (options) => {
+  settingsOptions = options
+  settingsTable = options.settingsTable || {}
+  addValueChangeListener(storageKey, async () => {
+    settings = await getSettings()
+    await updateOptions()
+    if (typeof options.onValueChange === "function") {
+      options.onValueChange()
+    }
+  })
+
+  settings = await getSettings()
+  addStyle(getSettingsStyle())
+  addSideMenu(options)
+}

package/lib/style.scss

@@ -0,0 +1,263 @@
+#browser_extension_settings {
+  --browser-extension-settings-background-color: #f3f3f3;
+  --browser-extension-settings-text-color: #444444;
+  --browser-extension-settings-link-color: #217dfc;
+  --sb-track-color: #00000000;
+  --sb-thumb-color: #33334480;
+  --sb-size: 2px;
+
+  position: fixed;
+  top: 10px;
+  right: 30px;
+  min-width: 250px;
+  max-height: 90%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+  /* for Firefox */
+  scrollbar-width: thin;
+  display: none;
+  box-sizing: border-box;
+  padding: 10px 15px;
+  background-color: var(--browser-extension-settings-background-color);
+  color: var(--browser-extension-settings-text-color);
+  z-index: 100000;
+  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;
+
+  &::-webkit-scrollbar {
+    width: var(--sb-size);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 10px;
+  }
+
+  h2 {
+    text-align: center;
+    margin: 5px 0 0;
+    font-size: 18px;
+    font-weight: 600;
+    border: none;
+  }
+
+  footer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 11px;
+    margin: 10px auto 0px;
+    background-color: var(--browser-extension-settings-background-color);
+    color: var(--browser-extension-settings-text-color);
+  }
+
+  footer a {
+    color: var(--browser-extension-settings-link-color) !important;
+    text-decoration: none;
+    padding: 0;
+  }
+
+  footer p {
+    text-align: center;
+    padding: 0;
+    margin: 2px;
+    line-height: 13px;
+  }
+
+  .option_groups {
+    background-color: #fff;
+    padding: 6px 15px 6px 15px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0 0;
+  }
+
+  .option_groups .action {
+    font-size: 14px;
+    border-top: 1px solid #cccccc;
+    padding: 6px 0 6px 0;
+    color: var(--browser-extension-settings-link-color);
+    cursor: pointer;
+  }
+
+  .option_groups textarea {
+    margin: 10px 0 10px 0;
+    height: 100px;
+    width: 100%;
+    border: 1px solid darkgray;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .switch_option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #cccccc;
+    padding: 6px 0 6px 0;
+    font-size: 14px;
+  }
+  .switch_option:first-of-type,
+  .option_groups .action:first-of-type {
+    border-top: none;
+  }
+
+  .switch_option > span {
+    margin-right: 10px;
+  }
+
+  .option_groups .tip {
+    position: relative;
+    margin: 0;
+    padding: 0 15px 0 0;
+    border: none;
+    max-width: none;
+    font-size: 14px;
+
+    .tip_anchor {
+      cursor: help;
+      text-decoration: underline;
+    }
+    .tip_content {
+      position: absolute;
+      bottom: 15px;
+      left: 0;
+      background-color: #ffffff;
+      color: var(--browser-extension-settings-text-color);
+      text-align: left;
+      padding: 10px;
+      display: none;
+      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;
+    }
+
+    .tip_anchor:hover + .tip_content,
+    .tip_content:hover {
+      display: block;
+    }
+
+    p,
+    pre {
+      margin: revert;
+      padding: revert;
+    }
+
+    pre {
+      font-family: Consolas, panic sans, bitstream vera sans mono, Menlo,
+        microsoft yahei, monospace;
+      font-size: 13px;
+      letter-spacing: 0.015em;
+      line-height: 120%;
+      white-space: pre;
+      overflow: auto;
+      background-color: #f5f5f5;
+      word-break: normal;
+      overflow-wrap: normal;
+      padding: 0.5em;
+      border: none;
+    }
+  }
+
+  /* https://uiverse.io/zanina-yassine/afraid-eel-50 */
+  /* The switch - the box around the slider */
+  .container {
+    --button-width: 51px;
+    --button-height: 24px;
+    --toggle-diameter: 20px;
+    --color-off: #e9e9eb;
+    --color-on: #34c759;
+    width: var(--button-width);
+    height: var(--button-height);
+    position: relative;
+    padding: 0;
+    margin: 0;
+    flex: none;
+  }
+
+  /* Hide default HTML checkbox */
+  input[type="checkbox"] {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  .switch {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: var(--color-off);
+    border-radius: calc(var(--button-height) / 2);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease-out;
+  }
+
+  .switch::before {
+    display: none;
+  }
+
+  /* The slider */
+  .slider {
+    width: var(--toggle-diameter);
+    height: var(--toggle-diameter);
+    position: absolute;
+    left: 2px;
+    top: calc(50% - var(--toggle-diameter) / 2);
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
+    transition: all 0.2s ease-out;
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked + .switch {
+    background-color: var(--color-on);
+  }
+
+  input[type="checkbox"]:checked + .switch .slider {
+    left: calc(var(--button-width) - var(--toggle-diameter) - 2px);
+  }
+}
+
+#browser_extension_side_menu {
+  min-height: 200px;
+  width: 40px;
+  opacity: 0;
+  position: fixed;
+  top: 80px;
+  right: 0;
+  padding-top: 20px;
+}
+
+#browser_extension_side_menu:hover {
+  opacity: 1;
+}
+
+#browser_extension_side_menu button {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8C9.79109 8 8.00023 9.79086 8.00023 12C8.00023 14.2091 9.79109 16 12.0002 16ZM12.0002 14C13.1048 14 14.0002 13.1046 14.0002 12C14.0002 10.8954 13.1048 10 12.0002 10C10.8957 10 10.0002 10.8954 10.0002 12C10.0002 13.1046 10.8957 14 12.0002 14Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1182 1.86489L15.5203 4.81406C15.8475 4.97464 16.1621 5.1569 16.4623 5.35898L19.2185 4.23223C19.6814 4.043 20.2129 4.2248 20.463 4.65787L22.5901 8.34213C22.8401 8.77521 22.7318 9.3264 22.3365 9.63266L19.9821 11.4566C19.9941 11.6362 20.0002 11.8174 20.0002 12C20.0002 12.1826 19.9941 12.3638 19.9821 12.5434L22.3365 14.3673C22.7318 14.6736 22.8401 15.2248 22.5901 15.6579L20.463 19.3421C20.2129 19.7752 19.6814 19.957 19.2185 19.7678L16.4623 18.641C16.1621 18.8431 15.8475 19.0254 15.5203 19.1859L15.1182 22.1351C15.0506 22.6306 14.6274 23 14.1273 23H9.87313C9.37306 23 8.94987 22.6306 8.8823 22.1351L8.48014 19.1859C8.15296 19.0254 7.83835 18.8431 7.53818 18.641L4.78195 19.7678C4.31907 19.957 3.78756 19.7752 3.53752 19.3421L1.41042 15.6579C1.16038 15.2248 1.26869 14.6736 1.66401 14.3673L4.01841 12.5434C4.00636 12.3638 4.00025 12.1826 4.00025 12C4.00025 11.8174 4.00636 11.6362 4.01841 11.4566L1.66401 9.63266C1.26869 9.3264 1.16038 8.77521 1.41041 8.34213L3.53752 4.65787C3.78755 4.2248 4.31906 4.043 4.78195 4.23223L7.53818 5.35898C7.83835 5.1569 8.15296 4.97464 8.48014 4.81406L8.8823 1.86489C8.94987 1.3694 9.37306 1 9.87313 1H14.1273C14.6274 1 15.0506 1.3694 15.1182 1.86489ZM13.6826 6.14004L14.6392 6.60948C14.8842 6.72975 15.1201 6.86639 15.3454 7.01805L16.231 7.61423L19.1674 6.41382L20.4216 8.58619L17.9153 10.5278L17.9866 11.5905C17.9956 11.7255 18.0002 11.8621 18.0002 12C18.0002 12.1379 17.9956 12.2745 17.9866 12.4095L17.9153 13.4722L20.4216 15.4138L19.1674 17.5862L16.231 16.3858L15.3454 16.982C15.1201 17.1336 14.8842 17.2702 14.6392 17.3905L13.6826 17.86L13.2545 21H10.746L10.3178 17.86L9.36131 17.3905C9.11626 17.2702 8.88037 17.1336 8.6551 16.982L7.76954 16.3858L4.83313 17.5862L3.57891 15.4138L6.0852 13.4722L6.01392 12.4095C6.00487 12.2745 6.00024 12.1379 6.00024 12C6.00024 11.8621 6.00487 11.7255 6.01392 11.5905L6.0852 10.5278L3.57891 8.58619L4.83312 6.41382L7.76953 7.61423L8.6551 7.01805C8.88037 6.86639 9.11625 6.72976 9.36131 6.60949L10.3178 6.14004L10.746 3H13.2545L13.6826 6.14004Z' fill='black'/%3E%3C/svg%3E");
+}
+
+#browser_extension_side_menu button:hover {
+  opacity: 70%;
+}
+
+#browser_extension_side_menu button:active {
+  opacity: 100%;
+}

package/lib/switch.js

@@ -0,0 +1,29 @@
+import {
+  addElement,
+  addEventListener,
+  createElement,
+} from "browser-extension-utils"
+
+export function createSwitch(options = {}) {
+  const container = createElement("label", { class: "container" })
+  const checkbox = createElement(
+    "input",
+    options.checked ? { type: "checkbox", checked: "" } : { type: "checkbox" }
+  )
+  addElement(container, checkbox)
+  const switchElm = createElement("span", { class: "switch" })
+  addElement(switchElm, "span", { class: "slider" })
+  addElement(container, switchElm)
+  if (options.onchange) {
+    addEventListener(checkbox, "change", options.onchange)
+  }
+
+  return container
+}
+
+export function createSwitchOption(text, options) {
+  const div = createElement("div", { class: "switch_option" })
+  addElement(div, "span", { textContent: text })
+  div.append(createSwitch(options))
+  return div
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.0.1",
-  "description": "Settings module for developing browser extensions and userscripts  ",
+  "version": "0.0.2",
+  "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.js",
   "exports": {
@@ -37,7 +37,7 @@
     "README.md"
   ],
   "engines": {
-    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+    "node": "^14.13.1 || >=16.0.0"
   },
   "xo": {
     "space": 2,
@@ -49,5 +49,9 @@
       "prefer-destructuring": 0,
       "capitalized-comments": 0
     }
+  },
+  "dependencies": {
+    "browser-extension-storage": "^0.1.2",
+    "browser-extension-utils": "^0.1.4"
   }
 }