文档笔记

Appearance

概述 ​

谷歌插件官方文档：https://developer.chrome.com/docs/extensions/get-started?hl=zh-cn

​

首先，我们需要理解Chrome插件（扩展）的核心组成部分：

  1. manifest.json：这是Chrome扩展的配置文件。
  2. background.js：用于运行扩展后台代码的JavaScript文件（如果需要）。
  3. popup.html/popup.js：扩展弹出窗口的HTML文件（如果扩展包含UI界面）。
  4. content-script.js：注入到网页中执行的JavaScript文件（如果需要修改或与页面交云通）。
  5. options.html/options.js: Options页面允许用户自定义扩展的行为或外观。这个页面是一个可选组件，并且只有当你希望提供更深层次的定制时才需要它。

项目构建 ​

用模板创建一个vue3 + ts + tailwind + element-plus项目

sh
$ pnpm create zerone

选择Vue后 选择 vue-crx-template

项目脚本 ​

本地运行

sh
$ pnpm dev

打包成zip文件

sh
$ pnpm pack:zip

目录结构 ​

├─api
│  ├─gassApi
│  │  ├─controller
│  │  │  ├─gsync_task
│  │  │  └─pdd
│  │  └─interface
│  │      └─apiTypes
│  ├─gstore
│  └─shopAdmin
├─assets
│  └─icons
│      └─svg
├─background
├─components
├─contentScripts
│  ├─classes
│  ├─components
│  ├─composables
│  └─images
├─options
├─popup
│  ├─components
│  │  └─nav
│  ├─router
│  └─views
├─typings
└─utils