Published 2022-08-23

Chrome插件开发 - Popup extension

在此之前，我们学习了以下几个关于 chrome 插件开发的文章：

这篇文章学习创建弹窗插件（点击插件图标时出现）

f1l2Nk

结构

创建目录，然后初始化

mkdir popup-extension
cd popup-extension
npm init -y

安装依赖

npm i react react-dom tailwindcss vite

npm i -D @vitejs/plugin-react postcss-cli

npx tailwind init

React、React-dom for framework
Tailwind for css
vite for build

npx tailwind init将会创建tailwind.config.js，内容如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/*.jsx'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}

创建.postcssrc.json

{
  "plugins": {
    "tailwindcss": {}
  }
}

创建css/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

创建vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

修改package.json，添加如下scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

创建public/manifest.json

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Popup Extension",
  "description": "A demo popup experience",
  "action": {
    "default_icon": "icons/icon-48.png",
    "default_popup": "index.html"
  },
  "icons": {
    "48": "icons/icon-48.png"
  }
}

创建index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Popup</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    Hello world 👋
  </body>
</html>

假如现在构建并加载插件，当前 Popup 插件将会展示如下：

tnq7AB

添加Tailwind、React，修改index.html

<body>
  <div id="app"></div>
  <script type="module" src="src/index.jsx"></script>
</body>

创建src，并在src下添加index.jsx

import ReactDOM from 'react-dom'
import {App} from './App'

const app = document.getElementById('app')
ReactDOM.render(<App />, app)

创建App.jsx

import Counter from './Counter'

export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <p>Welcome 👋</p>
      <br />
      <Counter />
    </div>
  )
}

创建Counter.jsx

import {useState} from 'react'

export default function Counter() {
  const [counter, setCounter] = useState(0)
  const increase = () => setCounter((count) => count + 1)
  const decrease = () => setCounter((count) => count - 1)
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className="px-4">{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}

构建后，现在的 Popup 插件展示如下：

Qk0rJH

emm，宽度不够，修改style.css

#app {
  width: 350px;
}

TAwxHm

Source Code

【Source Code】