使用Vue.js开发Chrome浏览器插件：从零到一
站长
· 阅读数 2
使用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浏览器中。
（该代码只是简单示例，并无复杂功能，想要了解如何实现更加复杂的功能，可以参考我之前的文章）
以上就是从零开始使用Vue.js开发Chrome浏览器插件的完整指南。希望这篇博客对你有所帮助，祝你开发愉快！