npm install -g @vue/cli
npm install -g @vue/cli-init
vue create --preset kocal/vue-web-extension my-extension
cd my-extension
npm run server

├─src
|  ├─App.vue
|  ├─background.js
|  ├─main.js
|  ├─manifest.json
|  ├─views
|  |   ├─About.vue
|  |   └Home.vue
|  ├─store
|  |   └index.js
|  ├─standalone
|  |     ├─App.vue
|  |     └main.js
|  ├─router
|  |   └index.js
|  ├─popup
|  |   ├─App.vue
|  |   └main.js
|  ├─override
|  |    ├─App.vue
|  |    └main.js
|  ├─options
|  |    ├─App.vue
|  |    └main.js
|  ├─devtools
|  |    ├─App.vue
|  |    └main.js
|  ├─content-scripts
|  |        └content-script.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package.json
├─vue.config.js
├─yarn.lock

├─devtools.html
├─favicon.ico
├─index.html
├─manifest.json
├─options.html
├─override.html
├─popup.html
├─_locales
├─js
├─icons
├─css

安装组件库

安装elementUI

整体的开发和vue2开发基本上没太大的区别，不过既然是用vue来开发的话，那肯定少不了组件库了。

要导入Element-ui也十分简单，Vue.use(ElementUI); Vue2中怎么导入element，便怎么导入。演示如下

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

// postcss.config.js
module.exports = {plugins: [// ...require('tailwindcss'),require('autoprefixer'), // if you have installed `autoprefixer`// ...]
}

// tailwind.config.js
module.exports = {purge: {// Specify the paths to all of the template files in your projectcontent: ['src/**/*.vue'],// Whitelist selectors by using regular expressionwhitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, // transitions/data-v-.*/, // scoped css],}// ...
}

<style>
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */@tailwind utilities;
</style>

悬浮窗

悬浮窗其实可有可无，不过之前写Chrome插件的时候就写了悬浮窗，所以vue版的也顺带写一份。

要注意的是悬浮窗是内嵌到网页的(且在document加载前载入，也就是"run_at": "document_start")，所以需要通过content-scripts.js才能操作页面Dom元素，首先在配置清单manifest.json与vue.confing.js中匹配要添加的网站，以及注入的js代码，如下

  "content_scripts": [{"matches": ["https://www.bilibili.com/video/*"],"js": ["js/jquery.js", "js/content-script.js"],"css": ["css/index.css"],"run_at": "document_start"},{"matches": ["https://www.bilibili.com/video/*"],"js": ["js/jquery.js", "js/bilibili.js"],"run_at": "document_end"}]

   contentScripts: {entries: {'content-script': ['src/content-scripts/content-script.js'],bilibili: ['src/content-scripts/bilibili.js'],},},

相关逻辑可自行观看，这里不在赘述了，并不复杂。

也顺带是复习一下HTML中鼠标事件和vue自定义命令了

功能实现

主要功能

• 检测视频页面，输出对应up主，关注数以及视频标题播放(参数过多就不一一显示了)

• 监控关键词根据内容判断是否点赞，例如文本出现了下次一定，那么就点赞。

输出相关信息

这个其实只要接触过一丢丢爬虫的肯定都会知道如何实现，通过右键审查元素，像这样

> document.querySelector("#v_upinfo > div.up-info_right > div.name > a.username").innerText
< '老番茄'

window.onload = function() {console.log('加载完毕');function getInfo() {let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text();let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text();let title = $(`#viewbox_report > h1 > span`).text();let view = $('#viewbox_report > div > span.view').attr('title');console.log(username, follow, title, view);}getInfo();
};

加载完毕
bilibili.js:19 老番茄 1606.0万 顶级画质 总播放数2368406

window.onload = function() {console.log('加载完毕');function getInfo() {let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text().trim()let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text();let title = $(`#viewbox_report > h1 > span`).text();let view = $('#viewbox_report > div > span.view').attr('title');//console.log(username, follow, title, view);window.kz_vm.user = {username,follow,title,view,};}getInfo();
};

// 评论文本框
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val("要回复的内容");
// 评论按钮
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click();

window.onload = function() {console.log('content加载完毕');function comment() {chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {let { cmd, message } = request;if (cmd === 'addComment') {$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val(message);$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click();}sendResponse('我收到了你的消息！');});}comment();
};

<template><div><el-container><el-header height="24">B站小工具</el-header><el-main><el-row :gutter="5"><el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="message"class="mb-5"></el-input><div><el-button @click="addComment">评论</el-button></div></el-row></el-main></el-container></div>
</template><script>
export default {name: 'App',data() {return {message: '',list: [],open: false,}},created() {chrome.storage.sync.get('list', (obj) => {this.list = obj['list']})},mounted() {chrome.runtime.onMessage.addListener(function (request,sender,sendResponse) {console.log('收到来自content-script的消息：')console.log(request, sender, sendResponse)sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request))})},methods: {sendMessageToContentScript(message, callback) {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {chrome.tabs.sendMessage(tabs[0].id, message, function (response) {if (callback) callback(response)})})},addComment() {this.sendMessageToContentScript({ cmd: 'addComment', message: this.message },function () {console.log('来自content的回复：' + response)})},},
}
</script>

代码就不解读了，调用sendMessageToContentScript方法即可。相关源码可自行下载查看

实现类似点赞功能也是同理的。

整体体验

当时写Chrome插件的效率不能说慢，反正不快就是了，像一些tips，都得自行封装。用过Vue的都知道写网页很方便，写Chrome插件未尝不是编写一个网页，当时的我在接触了Vue后就萌发了使用vue来编写Chrome的想法，当然肯定不止我一个这么想过，所以我在github上就能搜索到相应的源码，于是就有了这篇文章。

如果有涉及到爬取数据相关的，我肯定是首选使用HTTP协议，如果在搞不定我会选择使用puppeteerjs，不过Chrome插件主要还是增强页面功能的，可以实现原本页面不具备的功能。

本文仅仅只是初步体验，简单编写了个小项目，后期有可能会实现一个百度网盘一键填写提取码，Js自吐Hooke相关的。(原本是打算做pdd商家自动回复的，客户说要用客户端而不是网页端(客户端可以多号登陆)，无奈，这篇博客就拿B站来演示了)