vue3+webpack开发chrome插件（MV3版本）

简介

chrome插件，chrome扩展是自定义的小型软件程序。它允许用户以多种方式定制Chrome的功能和行为，提供如下功能：1. 提高生产力的工具;2. 丰富网页内容;3. 信息汇总;4. 娱乐(如游戏)

之前公司开发过一个基于MV2版本+vue2的chrome插件，并且已经投入市场进行使用了，但chrome官方已经宣布将在2023年不再更新MV2版本的chrome extension，虽然不影响使用，但MV2版本的chrome插件不仅没有办法上架chrome插件的商城，并且还会在拓展程序页面进行报错。基于以上的问题，公司决定开发MV3版本的chrome extension，而这个任务自然落到了我的身上。

这篇博客是使用vue3+webpack开发chrome插件（MV3版本）时的一个流程，主要是利用webpack把vue3项目打包成chrome extension需要的文件格式供浏览器解析。

让我们开始吧

创建vue3项目

我的环境: node（v16.20.0）；@vue/cli（v5.0.8）
项目文件夹/cmd

lua 复制代码

vue create <项目>

创建后出现以下界面，选择vue3即可

创建成功之后

arduino 复制代码

cd <项目>
npm i
npm run serve

将生成的url在浏览器中打开出现以下界面之后，vue3项目就创建完成了

vue3参考文档：cn.vuejs.org/guide/intro...

chrome插件项目配置

修改后的目录文件如下

文件内容

background/index.js

arduino 复制代码

console.log('background.js')

content/index.js

arduino 复制代码

console.log('content.js')

popup/App.vue

xml 复制代码

<template>
  <div class="popup">chrome extensionv3开发 popup页面</div>
</template>

<script setup></script>

<style>
.popup {
  color: red;
}
</style>

popup/index.js

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

popup/index.html

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-chrome-extension</title>
  </head>
  <body>
    <noscript>
    </noscript>
    <div id="app"></div>
  </body>
</html>

manifest.json chrome插件的具体配置，可以按照自己的需要进行修改

chrome extension V3 国内参考文档：doc.yilijishu.info/chrome/

css 复制代码

{
    "manifest_version": 3,
    "name": "chromeMV3",
    "description": "chromeMV3",
    "version": "1.0.0",
    "icons": {
        "48": "assets/logo.png",  
        "128": "assets/logo.png"
      },
    "action": {
        "default_icon": {
            "19": "assets/logo.png",
            "38": "assets/logo.png"
        },
        "default_popup": "popup.html",
        "default_title": "my-chrome-vue"
    },
    "background": {
        "service_worker": "js/background.js"
      },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "js/content.js"
            ],
            "run_at": "document_end"
        }
    ],
    "host_permissions": ["http://*/*", "https://*/*"],
    "permissions": [
        "contextMenus",
        "tabs",
        "notifications",
        "storage"
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'"
    },
    "web_accessible_resources": [
        {
            "resources":["js/content.js"],
            "matches":[
                "http://*/*",
                "https://*/*"
            ]
        }
    ]
}

vue.config.js

这是webpack打包方式的配置，在配置之前需要先安装一个插件用来复制文件
npm i copy-webpack-plugin

javascript 复制代码

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

// 只需要复制的文件
const copyFiles = [
  {
    from: path.resolve(`src/manifest.json`),
    to: `${path.resolve("dist")}/manifest.json`,
  },
  {
    from: path.resolve("src/assets"),
    to: path.resolve("dist/assets"),
  },
];

const plugins = [
  new CopyWebpackPlugin({
    patterns: copyFiles,
  }),
];

// 配置页面
const pages = {};
/**
 * popup 和 devtool 都需要html文件
 * 因此 chromeName 还可以添加devtool
 */
const chromeName = ["popup"];

chromeName.forEach((name) => {
  pages[name] = {
    entry: `src/${name}/index.js`,
    template: `src/${name}/index.html`,
    filename: `${name}.html`,
  };
});

module.exports = {
  pages,
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  configureWebpack: {
    // 多入口打包
    entry: {
      content: "./src/content/index.js",
      background: "./src/background/index.js",
    },
    output: {
      filename: "js/[name].js",
    },
    plugins,
    optimization: {
      splitChunks: false,
    },
  },
  css: {
    extract: {
      filename: "css/[name].css",
    },
  },
};

查看效果

打包

npm run build

打包成功后的文件如下

将dist文件导入拓展程序页面，成功之后如下

点击Service Worker，看到控制台打印出如下，代表background.js成功运行了

随便打开一个网页，以百度为例，打开控制台，打印出如下，代表content.js成功运行了

最后是点击拓展按钮

再点击我们的插件，弹出红色的文字，代表popup.js成功运行，并且CSS也成功注入了

结语

因为正在开发相关的项目，所以我也翻阅了很多文档，还有CSDN、掘金上一些大神的文章，并按照需求也进行了修改，目前开发的进度已经是将基本框架以及通信方式差不多做好了，我会把一些自己踩过的坑，和实现需求时遇到的一些问题，分享给大家，如果也有正在开发chrome extension的小伙伴们，也可以在文章下一起讨论遇到的问题。

如果有需要的，也可以直接拉下来使用,代码地址如下：github.com/cqxmi/vue-c...