记录–使用Vue开发Chrome插件

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 project     content: ['src/**/*.vue'],        // Whitelist selectors by using regular expression     whitelistPatterns: [         /-(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-input             type="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>