利用Vue 脚手架 开发chrome 插件，太方便了
免费下载资源
前言
一个 Chrome 插件，核心就是 manifest.json 文件，manifest.json 下的属性
-
content_scripts 指定inject的脚本列表 js，css 【 injected】
-
browser_action 中 default_popup指定popup弹出的html文件路径 【popup】
-
background 后台常驻页面 【background】
用户通过 popup 页面操作，inject 分析 DOM ，与 background 通信将数据传给 background 汇总，这个通信是很麻烦的。
vue开发 Chrome 插件优势
▍避免复杂的通信
原生的文件开发插件，需要使用
chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx})来传递数据，就那么一两个还是可以的，但是往往我们要做的插件不能是这么简单的。通信多了就麻烦了，vue 就可以解决这个问题，不需要麻烦的通信。
▍DOM操作
开发插件不免不了用户交互，原生的 DOM 操作，document.getElementById() 这样来操作是麻烦的，vue 的双向绑定完美的决绝这个问题。
▎打包
vue 和 webpack实时打包 方便
vue初始化项目
前提是你已经安装了脚手架环境，这里不再演示
vue create hello-chrome-vue
这里默认选中的是vue2.0语法
Please pick a preset: Default ([Vue 2] babel, eslint)
✨ Creating project in E:\dev_workspace\webstorm_workspace\hello-chrome-vue.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
> yorkie@2.0.0 install E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
> core-js@3.19.3 postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> ejs@2.7.4 postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\ejs
> node ./postinstall.js
added 1264 packages from 656 contributors in 52.131s
84 packages are looking for funding
run `npm fund` for details
🚀 Invoking generators...
📦 Installing additional dependencies...
added 53 packages from 36 contributors in 19.491s
89 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project hello-chrome-vue.
👉 Get started with the following commands:
$ cd hello-chrome-vue
$ npm run serve
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
Successfully 代表安装成功
删除不需要的文件
由于我们不是做完全的web 项目，vue-cli3 脚手架生成的文件，我们不是都需要， 这里就删除不必要的部分
src/main.js
src/components
src/App.vue (可选)
安装chrome-ext插件依赖
我们需要修改项目使得 它适用于开发 Chrome 扩展只能使用 vue add chrome-ext 命令来安装，如果使用 yarn add chrome-ext 会发现项目没有任何改变。
安装完之后，package.json 的配置如下
chrome-ext依赖安装对应的就是 vue-cli-plugin-chrome-ext ，整个项目目录如下：
vue.config.js 自动生成配置，backgroud.js 是我后配置的
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
// Generate pages object
const pagesObj = {};
const chromeName = ["popup", "options"];
chromeName.forEach(name => {
pagesObj[name] = {
entry: `src/${name}/index.js`,
template: "public/index.html",
filename: `${name}.html`
};
});
const background = {
from: path.resolve("src/background.js"),
to: `${path.resolve("dist")}/background.js`
}
const plugins =
process.env.NODE_ENV === "production"
? [
{
from: path.resolve("src/manifest.production.json"),
to: `${path.resolve("dist")}/manifest.json`
},
{
...background
}
]
: [
{
from: path.resolve("src/manifest.development.json"),
to: `${path.resolve("dist")}/manifest.json`
},
{
...background
}
];
module.exports = {
pages: pagesObj,
configureWebpack: {
plugins: [CopyWebpackPlugin(plugins)]
}
};
package.json 配置运行脚本
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:dev": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint",
"build-watch": "vue-cli-service build-watch"
},
插件使用
npm run build 会生成一个dist， 此文件夹可以直接放到Google浏览器中就行安装
popup 里的目录结构是安装chrome-ext插件后，自动生成的
App.vue里的内容是我自己随便定义的
<template>
<div class="main_app">
<button id="changeColor" @click="handleClick">测试</button>
<input type="text" v-model="value">
</div>
</template>
<script>
import chrome from "vue-cli-plugin-chrome-ext";
export default {
name: 'app',
data(){
return{
listenerId: null,
value:'',
}
},
mounted() {
let that = this;
this.$nextTick(()=>{
// When the button is clicked, inject setPageBackgroundColor into current page
that.listenerId = that.$refs.changeColor.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({active: true, currentWindow: true});
chrome.scripting.executeScript({
target: {tabId: tab.id},
function: that.setPageBackgroundColor,
});
});
})
},
destroyed() {
this.listenerId && window.removeEventListener(this.listenerId);
},
methods: {
handleClick() {
this.value = new Date().getMilliseconds();
chrome.storage.sync.get("color", ({color}) => {
this.$refs.changeColor.style.backgroundColor = color;
});
},
setPageBackgroundColor() {
console.log('setPageBackgroundColor---');
chrome.storage.sync.get("color", ({color}) => {
document.body.style.backgroundColor = color;
});
}
}
}
</script>
<style>
button {
height: 50px;
width: 50px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white,
0 0 0 4px black;
}
</style>
这里使用到了 相关的chrome api 需要引入 “@type/chrome” 增加chrome类型声明
npm install --save-d @types/chrome
记得关闭 eslint 语法检测 方便开发
在调试过程中，如果想要打印插件内的日志 ，需要右键点击插件图标单独的点击审核元素，否则直接按F12浏览器 是捕获不到的
最后
项目按照上面的流程走完之后，以后的页面就完全按照Vue的方式开发即可，引入一些好的UI，确实比直接写JS和jquery.js快很多的
点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)
听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！
往期推荐
[
紧急！Log4j 史诗级漏洞来袭，请速速自查！
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489823&idx=1&sn=18826af3de8e5746d4303f43ffd7a59e&chksm=ebb6fa7cdcc1736af50c1a2142cff1299b1cd35f3cff7666346f347076981b61904d41c7f423&scene=21#wechat_redirect)
[
TGA 2021：《绝地求生》2022年1月12日开始免费
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489823&idx=2&sn=a7f9689acd45a93b9b8d776235c1f3a8&chksm=ebb6fa7cdcc1736a9cdac6ca46405c631aec7b18aa1a4b47c42e5737f52848e10cd99232a5bc&scene=21#wechat_redirect)
[
惊呆了！网传腾讯《英雄联盟》项目组年终奖每人120万！
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489767&idx=1&sn=1b287bd006ec961d2c76b38a17b4a960&chksm=ebb6fb84dcc172924f48694370a367a60336d3ca19738dc174247f84eb0e6f584560a68ef15b&scene=21#wechat_redirect)
[
使用 StopWatch 优雅打印执行耗时
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489823&idx=3&sn=f0bf150431d5bcca9f9078569a9ee591&chksm=ebb6fa7cdcc1736a2510dffc9b531f3835742376616729cc49d6592969d37fe76a97d19206d7&scene=21#wechat_redirect)
[
雷军做程序员时写的文章，挺有哲学的！
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489767&idx=2&sn=c44e46e64de18e118515fffe220b58e8&chksm=ebb6fb84dcc172928a1227abe9565a8ab828b46855af5bf2d9c280bc75bdd9ee0c1e5364fb1f&scene=21#wechat_redirect)
[
SpringBoot + Netty4 实现自己RPC
](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489767&idx=3&sn=3d55ae73f654aea76a93d6e25c8e42fa&chksm=ebb6fb84dcc17292339c571d561a8847ac14f9fc0fe3d7a53819b3840cda8f0fc987d5997227&scene=21#wechat_redirect)
GitHub 加速计划 / vu / vue
80
16
下载
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)