feat: basic options page

src/contentScripts/content.css

@@ -0,0 +1,23 @@
+.toast {
+  background: rgb(24, 24, 24);
+  color: rgb(255, 255, 255);
+  font-size: 14px;
+  padding: 12px;
+  border-radius: 1em;
+  transition: all 150ms ease-in-out;
+  opacity: 0;
+  transform: rotate3d(0, 3, 1, 10deg) translateY(-10px);
+}
+
+.toast.show {
+  opacity: 1;
+  transform: none;
+}
+
+.container {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  z-index: 999999;
+  perspective: 100px;
+}

src/contentScripts/content_script.tsx

@@ -1,6 +1,7 @@
 import logger from '@/common/logger'
 import { onMessage } from 'webext-bridge/content-script'
 import '../styles'
+import './content.css'
 
 let toastTimeout1: NodeJS.Timeout, toastTimeout2: NodeJS.Timeout
 let shadowDOM: ShadowRoot
@@ -32,10 +33,12 @@ export function contentScriptMain() {
 async function injectShadowRoot() {
   const container = document.createElement('div')
   root = document.createElement('div')
-  const styleEl = document.createElement('link')
   shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
+
+  const styleEl = document.createElement('link')
   styleEl.setAttribute('rel', 'stylesheet')
   styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+
   shadowDOM.appendChild(styleEl)
   shadowDOM.appendChild(root)
   document.body.appendChild(container)

src/hooks/useOptions.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useStorageLocal } from './useStorageLocal'
+
+export type Options = {
+  customButtons: CustomButton[]
+}
+
+export type CustomButton = {
+  label: string
+  format: string
+}
+
+export function useOptions() {
+  const [options, setOptions] = useStorageLocal<Options>({
+    key: 'options',
+    initialValue: { customButtons: [] },
+  })
+  const setOption = React.useCallback(
+    function <K extends keyof Options>(key: K, value: Options[K]) {
+      console.log('setOption', key, value, options)
+      setOptions({ ...(options as Options), [key]: value as never })
+    },
+    [options, setOptions],
+  )
+  return {
+    options: options!,
+    setOption,
+    setOptions,
+  }
+}

src/hooks/useStorageLocal.ts

@@ -11,9 +11,9 @@ export function useStorageLocal<T>({ key, initialValue = null }: Params<T>) {
   const [value, _setValue] = useState<T | null>(initialValue)
 
   useEffect(() => {
-    storage.local.get(key).then(val => _setValue(val[key] ?? initialValue))
+    storage.local.get(key).then((val) => _setValue((val[key] as T) ?? (initialValue as T)))
     const callback = (changes: Record<string, Storage.StorageChange>) => {
-      if (changes[key]) _setValue(changes[key].newValue)
+      if (changes[key]) _setValue(changes[key].newValue as T)
     }
     storage.onChanged.addListener(callback)
     return () => {
@@ -26,5 +26,5 @@ export function useStorageLocal<T>({ key, initialValue = null }: Params<T>) {
     await storage.local.set({ [key]: val })
   }
 
-  return [value, setValue] as [T | null, (val: T) => void]
+  return [value, setValue] as [T | null, (_val: T) => void]
 }

src/options/Options.css

@@ -1,40 +1,66 @@
-.App {
+.options {
-  text-align: center;
+  min-height: 100vmin;
+  margin: 4rem auto 0;
+  max-width: 600px;
 }
 
-.App-logo {
+.options-link {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+.options-section {
-  from {
+  margin: 1rem 0;
-    transform: rotate(0deg);
+  display: flex;
-  }
+  flex-direction: column;
-  to {
+  gap: 0.25rem;
-    transform: rotate(360deg);
+}
-  }
+
+.options-section-title {
+  font-weight: bold;
+  margin: 0;
+}
+
+.options-section-subtitle {
+  font-size: 0.875rem;
+  color: #666;
+  margin: 0;
+}
+
+button {
+  background: #006;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #008;
+}
+
+.custom-buttons-section {
+  gap: 1rem;
+}
+
+.custom-button-item {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  border: 1px solid #ccc;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.custom-button-item .custom-button-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.remove-button {
+  margin-top: 1rem;
 }
 
 input {
@@ -42,6 +68,11 @@ input {
   line-height: 1.15;
   transition: border-color calc(var(--transition, 0.2) * 1s) ease;
   outline: transparent;
-  text-align: center;
+  font-size: 1.125rem;
-  font-size: calc(10px + 2vmin);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

src/options/Options.tsx

@@ -1,30 +1,83 @@
-import logo from '@/assets/logo.svg'
+import '../styles'
-import { useStorageLocal } from '@/hooks/useStorageLocal'
 import './Options.css'
+import { useOptions } from '@/hooks/useOptions'
+import React from 'react'
 
 const Options = () => {
-  const [value, setValue] = useStorageLocal<string>({ key: 'webext-demo' })
+  const { options, setOption } = useOptions()
+
+  const setBtnLabel = React.useCallback(
+    (index: number, value: string) => {
+      const customButtons = [...options.customButtons]
+      customButtons[index].label = value
+      setOption('customButtons', customButtons)
+    },
+    [options.customButtons],
+  )
+  const setBtnFormat = React.useCallback(
+    (index: number, value: string) => {
+      const customButtons = [...options.customButtons]
+      customButtons[index].format = value
+      setOption('customButtons', customButtons)
+    },
+    [options.customButtons],
+  )
+
+  const addButton = React.useCallback(
+    () => setOption('customButtons', [...options.customButtons, { label: '', format: '' }]),
+    [options.customButtons],
+  )
+  const removeButton = React.useCallback(
+    (index: number) => {
+      const customButtons = [...options.customButtons]
+      customButtons.splice(index, 1)
+      setOption('customButtons', customButtons)
+    },
+    [options.customButtons],
+  )
 
   return (
-    <div className="App">
+    <div className="options">
-      <header className="App-header">
+      <header className="options-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <p>Copy Tab URL Options</p>
-        <p>This is the Options page</p>
+        <p className="options-header-subtitle">Changes are automatically saved.</p>
-        <p>
-          <b>Change Storage Value and Check Popup</b>
-        </p>
-        <input value={value ?? ''} onChange={e => setValue(e.target.value)} />
-        <p>
-          Powered by{' '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer">
-            Vite
-          </a>
-        </p>
       </header>
+      <main>
+        <div className="options-section">
+          <p className="options-section-title">Custom Buttons</p>
+          <p className="options-section-subtitle">Add custom buttons to the popup.</p>
+        </div>
+        <button onClick={addButton}>Add Button</button>
+        <div className="options-section custom-buttons-section">
+          {options.customButtons.map((btn, i) => (
+            <div className="custom-button-item" key={i}>
+              <div className="custom-button-inputs">
+                <label>
+                  <div>Button Label</div>
+                  <input
+                    value={btn.label}
+                    placeholder="Check this out!"
+                    onChange={(e) => setBtnLabel(i, e.target.value)}
+                  />
+                </label>
+                <label>
+                  <div>Output Format</div>
+                  <input
+                    value={btn.format}
+                    placeholder="[Check this out!](https://example.com/{url})"
+                    onChange={(e) => setBtnFormat(i, e.target.value)}
+                  />
+                </label>
+              </div>
+              <div>
+                <button className="remove-button" onClick={() => removeButton(i)}>
+                  Remove Button
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
     </div>
   )
 }

src/popup/Popup.css

@@ -1,34 +1,37 @@
 html,
 body {
   overflow: hidden;
+  font-size: 16px;
 }
 
-.App {
+.popup {
   width: 300px;
   text-align: center;
+  padding: 0.5em;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+.popup-header {
-  .App-logo {
+  font-weight: bold;
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
+.button-group {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  margin: 1rem 0;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+.button-group button {
-  color: #61dafb;
+  display: block;
+  background: transparent;
+  display: flex;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  transition: all 150ms ease-in-out;
 }
 
-button {
+.button-group button:hover {
-  font-size: calc(10px + 2vmin);
+  background: #e6e6e6;
 }

src/popup/Popup.tsx

@@ -11,47 +11,30 @@ const Popup = () => {
 
   const send = (cmd: string) => {
     sendMessage(cmd, {})
+    window.close()
   }
 
   return (
-    <div className="App">
+    <div className="popup">
-      <header className="App-header">
+      <header className="popup-header">
         <p>Copy Tab URL</p>
-        <p>
-          <button type="button" onClick={() => send('copy-tab-url')}>
-            Copy Tab URL
-          </button>
-        </p>
-        <p>
-          <button type="button" onClick={() => send('copy-tab-markdown')}>
-            Copy Tab Markdown
-          </button>
-        </p>
-        <p>
-          <button type="button" onClick={openOptionsPage}>
-            Options
-          </button>
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
       </header>
+
+      <main className="button-group">
+        <button type="button" onClick={() => send('copy-tab-url')}>
+          Copy Tab URL
+        </button>
+
+        <button type="button" onClick={() => send('copy-tab-markdown')}>
+          Copy Tab Markdown
+        </button>
+      </main>
+
+      <footer>
+        <button type="button" onClick={openOptionsPage}>
+          Options
+        </button>
+      </footer>
     </div>
   )
 }

src/styles/main.css

@@ -5,27 +5,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.toast {
-  background: rgb(24, 24, 24);
-  color: rgb(255, 255, 255);
-  font-size: 14px;
-  padding: 12px;
-  border-radius: 1em;
-  transition: all 150ms ease-in-out;
-  opacity: 0;
-  transform: rotate3d(0, 3, 1, 10deg) translateY(-10px);
-}
-
-.toast.show {
-  opacity: 1;
-  transform: none;
-}
-
-.container {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  z-index: 999999;
-  perspective: 100px;
-}