【chrome插件开发】vue开发chrome拓展模版

前言

以前一直在使用chrome商店中的新标签页pro插件。
一时兴起，在网上翻箱倒柜，就开始了自己使用vue框架开发插件的旅途。
整理了一个小小模版，与诸君共享。

你要不想看下边那枯燥的长篇大论，可直接跳转我的git仓库地址，clone我创建好的小小模版，直接找到对应的文件夹，卡卡一顿整，直接完事。

准备

使用的node版本

初始化vue项目

------>跳转vue官网
当前部分与前端初始化vue项目的步骤一致，对这部分比较了解，可直接【下一部分】修改项目目录结构；如果不太了解的，可选择去官网或者跟着我一起再巩固一遍吧。

• 创建项目
  打开命令行窗口或者vscode的终端输入如下命令：

	npm create vue@latest

• 选择项目配置

• 安装依赖
  安装依赖以及启动项目 ，根据如下命令进行。

项目初始化完成，可执行以下命令：
   cd template-test
   npm install
   npm run dev

当出现如下，即为成功。

修改项目目录结构

项目src文件目录结构：

文件位置主要改动

- 将 index.html 文件移入src文件中，主要是因为打包配置的时候设置root文件为src，放在外边执行有问题。
- 新建 manifest.json 文件 （具体内容见下部分）

配置项目文件信息

manifest.json

每个扩展程序的根目录中都必须有一个 manifest.json 文件，其中列出了与该扩展程序的结构和行为相关的重要信息。
配置完整代码：

{
  "manifest_version": 3,
  "name": "Chrome New Tabs",
  "version": "1.0.0",
  "description": "a plugin for chrome",
  "icons": {
      "16": "icons/icon_16x16.png",
      "48": "icons/icon_48x48.png",
      "128": "icons/icon_128x128.png"
  },
  "devtools_page": "devtools/index.html",
  "action": {
      "default_title": "谷歌标签页",
      "default_icon": "icons/icon_16x16.png",
      "default_popup": "popup/index.html"
  },
  "background": {
      "service_worker": "background/service-worker.js"
  },
  "permissions": [
      "bookmarks",
      "tabs",
      "storage"
  ],
  "host_permissions": [],
  "content_scripts": [
      {
          "js": [
              "content/content.js"
          ],
          "matches": [
              "https://*/*"
          ],
          "all_frames": true,
          "run_at": "document_start",
          "match_about_blank": true
      }
  ],
  "chrome_url_overrides": {
      "newtab": "views/index.html"
  }
}

解释：
manifest_version ：指定扩展程序使用的清单文件格式的版本，唯一支持的值是 3；
name ：名称，标识扩展程序；
version：版本号
description：描述
icons ：扩展程序的图标，不同的大小代表了不同的位置使用；
devtools_page ：定义使用 DevTools API 的网页
action： Google 工具栏中扩展程序图标的外观和行为
background：扩展程序的服务工件的 JavaScript 文件
permissions：启用特定扩展程序 API
host_permissions：列出您的扩展程序可以与之互动的网页，这些网页是使用网址匹配模式定义的
content_scripts：用户打开特定网页时要使用的 JavaScript 或 CSS 文件
chrome_url_overrides：默认的 Chrome 网页定义替换项

更多配置以及详细解释见：（https://developer.chrome.google.cn/docs/extensions/reference/manifest?hl=zh-cn）

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import copy from 'rollup-plugin-copy' //拷贝插件

// https://vite.dev/config/
export default defineConfig({
  root:'src/', 
server: {
  port: 8080,
  host: "localhost",
  open: false,
},
plugins: [
  vue(),
  copy({ //将匹配文件拷贝到dist文件下
  targets: [
    { src: 'manifest.json', dest: 'dist' },
    { src: "src/icons/**", dest: 'dist/icons' }
  ]
})
],
 resolve: {
  alias: {
    "@": fileURLToPath(new URL("./src", import.meta.url)),
  },
},
build: {
  outDir: path.resolve(__dirname, 'dist'),
  rollupOptions: {
    input: {
      home: path.resolve(__dirname, 'src/views/index.html'),
      popup: path.resolve(__dirname, 'src/popup/index.html'),
      devtools: path.resolve(__dirname, 'src/devtools/index.html'),
      content: path.resolve(__dirname, 'src/content/content.js'),
      background: path.resolve(__dirname, 'src/background/service-worker.js'),
    },
    output: {
      assetFileNames: 'assets/[name]-[hash].[ext]', // 静态资源
      chunkFileNames: 'js/[name]-[hash].js', // 代码分割中产生的 chunk
      entryFileNames: (chunkInfo) => { // 入口文件
        const baseName = path.basename(chunkInfo.facadeModuleId, path.extname(chunkInfo.facadeModuleId))
        const saveArr = ['content', 'service-worker']
        return `[name]/${saveArr.includes(baseName) ? baseName : chunkInfo.name}.js`;
      },
      name: '[name].js'
    }
  },
},
})

其他文件

• src 目录下的 index.html 需要修改main.js 的引入路径，不然找不到对应文件。
• 其他文件可根据src文件目录创建即可。

页面代码编写

页面代码可在 views 文件夹中编写，如

上图是开发chrome新标签页时，我自己随意创建的目录，和在日常项目工作中创建目录没有什么区别。代码也可直接使用。

运行与打包

按照项目目录配置以及对应配置信息的配置，这样即可在本地运行，也可以打包，引入浏览器进行测试。

// 运行
npm run dev
//打包
npm run build

chrome拓展引入

• 鼠标右键chrome浏览器右上角3个点—》扩展程序 ----》 管理扩展程序
  
• 打开 右上角 开发者模式
• 点击左上角 --加载已解压的扩展程序
  
• 选择对应项目 build 后的 dist 文件夹，点击选择文件夹
  
• 列表新增一个扩展，成功加载。
  
  到此，整个流程就结束了。
  我们可以根据自己的能力去进行页面的扩展，从而开发一个真正随自己心意的插件。附上一个我开发的简易导航页（比较简陋，参考了一下新标签页 pro 插件）。
  

参考信息

1.vue官网：https://cn.vuejs.org/guide/quick-start.html
2.chrome扩展程序:https://developer.chrome.google.cn/docs/extensions?hl=zh-cn