DEV Community

panfan
panfan

Posted on • Originally published at manon.icu on

Chrome插件开发 - Using storage

在这篇文章,我们将把我们已经非常出色的弹出式浏览器扩展变得更加个性化。

为了维护用户选择的内容,我们将利用 chrome 的存储能力。

<video
src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/storage_fdefvm.webm"
autoPlay

增加浏览器扩展存储权限

修改manifest.json,在权限数组新增storage

{
  "permissions": ["alarms", "notifications", "storage"]
}
Enter fullscreen mode Exit fullscreen mode

编写扩展主体

import {useState} from 'react'

const colorMatch = {
  indigo: 'bg-indigo-400',
  pink: 'bg-pink-400',
  purple: 'bg-purple-400'
}

export function App() {
  const [color, setColor] = useState('indigo')

  const createNotification = () => {
    chrome.alarms.create('motivation_alarm', {
      periodInMinutes: 60
    })
    window.close()
  }

  const stopNotification = () => {
    chrome.alarms.clearAll()
    window.close()
  }

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color)
  })

  const pickColor = (pickedValue) => {
    setColor(pickedValue)
    chrome.storage.sync.set({color: pickedValue})
  }

  return (
    <div
      className={`flex flex-col items-center justify-center w-screen h-auto ${colorMatch[color]} p-4`}
    >
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
      >
        <option>Pick a color</option>
        <option value="indigo">Indigo</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
      </select>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Motivate me 🎉
      </button>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={stopNotification}
      >
        Stop motivating me 😅
      </button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Source Code

【Source Code】

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)