使用Vue.js开发Chrome浏览器插件：从零到一
Chrome浏览器插件是一种强大的工具，它可以为用户提供更丰富的浏览体验。在本篇博客中，我们将探讨如何使用Vue.js框架来构建一个Chrome浏览器插件。
步骤1：准备工作
首先，确保你已经安装了Node.js和Vue CLI。如果还没有安装，你可以在终端中运行以下命令来安装Vue CLI：
npm install -g @vue/cli
步骤2：创建Vue.js项目
使用Vue CLI，我们可以轻松地创建一个新的Vue.js项目。在终端中，运行以下命令来创建一个新的Vue项目：
vue create chrome-extension-vue-example
然后，选择默认配置或手动配置，根据你的需要进行设置。确保你在手动配置中勾选了Babel和Linter / Formatter选项。
步骤3：构建配置
在Vue.js项目中，你需要一个配置文件来处理项目的构建和打包（这里我使用的是webpack及部分插件）。在vue.config.js文件中添加以下内容：
const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require("path"); const packageName = "chrome-extension-vue-example"; const copyFiles = [ { from: path.resolve("src/manifest.json"), to: path.resolve(packageName, "manifest.json") }, { from: path.resolve("public"), to: path.resolve(packageName) } ]; const plugins = [ new CopyWebpackPlugin({ patterns: copyFiles }) ]; module.exports = { pages: { popup: { entry: `src/popup/popup.js`, template: `src/popup/popup.html`, filename: `popup.html` } }, productionSourceMap: false, outputDir: path.join(__dirname, packageName), configureWebpack: { watch: true, entry: { content: "./src/content-scripts/content-script.js", background: "./src/background/background.js", popup: "./src/popup/popup.js", }, output: { filename: "js/[name].js" //输出路径 }, plugins, optimization: { splitChunks: false // 不允许切分，打包时文件太大的情况会被webpack切分成几个文件 } }, css: { extract: { filename: "css/[name].css" // 提取CSS } } };
在这个Webpack配置文件中，我们使用了CopyWebpackPlugin插件来将manifest.json和public文件夹下的内容复制到打包后的目录中
项目结构：
构建后的结构
package.json
{ "name": "chrome-extension", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "copy-webpack-plugin": "^6.0.2", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }
步骤4：编写Chrome插件的清单文件（manifest.json）
Chrome浏览器插件需要一个清单文件来定义插件的基本信息。在你的项目根目录下，创建一个manifest.json文件，并定义插件的名称、版本、图标等信息。以下是一个示例的manifest.json文件：
{ "manifest_version": 3, "name": "Vue Chrome Extension", "version": "1.0", "default_locale": "en", "permissions": [ ], "background": { "service_worker": "js/background.js" }, "action": { "default_title": "popup", "default_icon": { "16": "assets/icon/16.png" }, "default_popup": "popup.html" }, "icons": { "16": "assets/icon/16.png", "48": "assets/icon/48.png", "128": "assets/icon/128.png" }, "content_scripts": [ { "js": ["js/content.js" ], "css": ["css/content.css"], "matches": ["<all_urls>" ], "run_at": "document_idle" } ] }
在上述清单文件中，我们定义了插件的名称、版本、权限、图标等信息。default_popup指定了插件的弹出页面，我们将在下一步创建该页面。
步骤5：使用Vue创建弹出页面
1.popup.html文件
在你的Vue项目中，创建一个名为popup.html的文件，用作插件的弹出页面。在该页面中，你可以使用Vue.js来构建你的用户界面。以下是一个简单的popup.html示例：
<!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"> <title>popup</title> </head> <body> <div id="app"></div> </body> </html>
2.popup中的Vue组件
在Vue项目中，你可以按照正常的Vue.js开发方式编写组件。例如，创建一个名为App.vue的组件：
<template>
<div class="example">
hello, this is chrome extension vue
</div>
</template>
<style scoped>
.example {
align-items: center;
display: flex;
position: relative;
margin: 0 16px;
}
</style>
复制3.popup.js内容，引入VUE组件
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
4.popup效果图
步骤6：使用vue构建你的content-script
content-script.js 是注入到具体的浏览器页面中运行的，我们在manifest.json中声明了该JS会注入到所有浏览器页面中，接下来看看在content-script中该如何使用vue构建一个页面
content-script.js文件
/* eslint-disable */ // 使用原生JS创建了一个锚点，将vue组件渲染到这个锚点上 import {createApp} from 'vue' import App from './App.vue' window.onload = function () { createExample() } function createExample() { const container = document.createElement('div'); container.setAttribute('id', 'example-content-app') container.setAttribute('style', 'position: absolute;\n' + ' display: flex;\n' + ' top: 50%;\n' + ' width: 400px;\n' + ' left: 50%;\n' + ' height: 400px;\n' + ' transform: translate(-50%, -50%);\n' + ' align-items: center;\n' + ' justify-content: center;\n' + ' background: #507ebf45;\n' + ' border: 1px solid rgba(0, 0, 0, 0.05);\n' + ' box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n' + ' border-radius: 12px;') document.body.appendChild(container) const url = window.location.href; console.log(url) const app = createApp(App,{url: url}) // 演示如何向组件中传值 app.mount('#example-content-app'); } chrome.runtime.onMessage.addListener(function(request) { if (request.target === 'CONTENT' && request.from === 'BACKGROUND') { } });
2.content-script中的vue组件
<template>
<div class="example">
hello, this is chrome extension vue. URL: {{ url }}
</div>
</template>
<script>
export default {
props: {
url: String
}
}
</script>
<style scoped> // scoped 表示这个CSS只在该组件中生效，避免对页面中的元素造成影响
.example {
align-items: center;
display: flex;
position: relative;
margin: 0 16px;
font-size: 24px;
font-weight: 700;
}
</style>
复制3.效果图
步骤7：构建和加载插件
在你的Vue项目中，运行以下命令来构建插件：
vue-cli-service build
这将会在chrome-extension-vue-example目录下生成构建好的插件文件。将chrome-extension-vue-example目录作为你的Chrome插件的根目录，加载插件到Chrome浏览器中。
项目源码：https://github.com/ordersheet/chrome-extension/tree/main/chrome-extension
（该代码只是简单示例，并无复杂功能，想要了解如何实现更加复杂的功能，可以参考我之前的文章）
以上就是从零开始使用Vue.js开发Chrome浏览器插件的完整指南。希望这篇博客对你有所帮助，祝你开发愉快！
