vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
前言
最近在評(píng)估項(xiàng)目時(shí)，要開(kāi)啟評(píng)估平臺(tái)，查看平臺(tái)和保存平臺(tái)，感覺(jué)非常繁瑣，開(kāi)發(fā)了一款可以獲取評(píng)估平臺(tái)數(shù)據(jù)，查看項(xiàng)目排期和直接保存數(shù)據(jù)到數(shù)據(jù)庫(kù)的chrome插件，由于我需要使用之前vue封裝的一個(gè)日歷插件，這里就用vue來(lái)開(kāi)發(fā)這個(gè)插件。
開(kāi)發(fā)前準(zhǔn)備
要開(kāi)發(fā)一個(gè)chrome插件，我們首先需要了解chrome插件的基本結(jié)構(gòu)和對(duì)應(yīng)的功能。每個(gè)擴(kuò)展的文件類(lèi)型和目錄數(shù)量有所不同，但都必須有 manifest。 一些基本但有用的擴(kuò)展程序可能僅由 manifest 及其工具欄圖標(biāo)組成。
manifest.json
{ 'name': 'My Extension', // '擴(kuò)展名' 'version': '2.1', // 當(dāng)前創(chuàng)建擴(kuò)展版本號(hào) 'description': 'Gets information from Google.', //'擴(kuò)展描述' 'icons': { // 擴(kuò)展工具界面使用圖標(biāo) '128': 'icon_16.png', '128': 'icon_32.png', '128': 'icon_48.png', '128': 'icon_128.png' }, 'background': { // 擴(kuò)展常常用一個(gè)單獨(dú)的長(zhǎng)時(shí)間運(yùn)行的腳本來(lái)管理一些任務(wù)或者狀態(tài) 'persistent': false, 'scripts': ['background_script.js'] // 后臺(tái)常駐腳本，自動(dòng)運(yùn)行，直到關(guān)閉瀏覽器。可根據(jù)需求自行設(shè)置 }, 'permissions': ['https://*.google.com/', 'activeTab'], //開(kāi)啟拓展權(quán)限 'browser_action': { 'default_icon': 'icon_16.png', // 器右上角顯示 'default_popup': 'popup.html' /** 鼠標(biāo)移入，顯示簡(jiǎn)短擴(kuò)展文本描述 **/ }, 'content_scripts': [{ // ontent scripts是在Web頁(yè)面內(nèi)運(yùn)行的javascript腳本。通過(guò)使用標(biāo)準(zhǔn)的DOM，它們可以獲取瀏覽器所訪問(wèn)頁(yè)面的詳細(xì)信息，并可以修改這些信息。 'js': ['script/contentscript.js'], /** 需要注入的腳本 **/ 'matches': [ /** 匹配網(wǎng)址(支持正則)，成功即注入（其余屬性自行查詢） **/ 'http://*/*', 'https://*/*' ] }] }
vue開(kāi)發(fā)chrome插件
我們需要使用vue來(lái)開(kāi)發(fā)插件，幾經(jīng)搜索，查到一款樣板，很方便我們進(jìn)行vue開(kāi)發(fā)插件，便引入該樣板來(lái)進(jìn)行開(kāi)發(fā)。
引入vue-web-extension樣板來(lái)實(shí)現(xiàn)vue開(kāi)發(fā)
npm install -g @vue/cli npm install -g @vue/cli-init vue init kocal/vue-web-extension new-tab-page
然后切換到項(xiàng)目目錄安裝依賴(lài)項(xiàng)
cd new-tab-page npm install
我們可以運(yùn)行
npm run watch:dev
在項(xiàng)目根目錄中會(huì)得到一個(gè)dist 文件夾，我們直接安裝解壓的擴(kuò)展程序，選擇這個(gè)dist,就可以進(jìn)行開(kāi)發(fā)并監(jiān)視更改。
樣板文件的基本格式
├── dist│ └── <the built extension>├── node_modules│ └── <one or two files and folders>├── package.json├── package-lock.json├── scripts│ ├── build-zip.js│ └── remove-evals.js├── src│ ├── background.js│ ├── icons│ │ ├── icon_128.png│ │ ├── icon_48.png│ │ └── icon.xcf│ ├── manifest.json│ └── popup│ ├── App.vue│ ├── popup.html│ └── popup.js└── webpack.config.js
可以看出，樣板文件使用 webpack進(jìn)行打包，
src文件夾包含我們將用于擴(kuò)展的所有文件。manifest 文件和 background.js 對(duì)于我們來(lái)說(shuō)是熟悉的，但也要注意包含Vue 組件的 popup 文件夾。當(dāng)樣板文件將擴(kuò)展構(gòu)建到 dist 文件夾中時(shí)，它將通過(guò)vue-loader 管理所有 .vue 文件并輸出一個(gè)瀏覽器可以理解的 JavaScript 包。
在 src 文件夾中還有一個(gè) icons 文件夾。如果你看一眼 Chrome 的工具欄，會(huì)看到我們的擴(kuò)展程序的新圖標(biāo)（也被稱(chēng)為 browser action）。這就是從此文件夾中拿到的。如果單擊它，你應(yīng)該會(huì)看到一個(gè)彈出窗口，顯示“Hello world！” 這是由 popup/App.vue 創(chuàng)建的。
最后，請(qǐng)注 scripts 文件夾的兩個(gè)腳本：一個(gè)用于刪除 eval 用法以符合 Chrome Web Store 的內(nèi)容安全策略，另一個(gè)用于當(dāng)你要把擴(kuò)展上傳到Chrome Web Store時(shí)將其打包到 .zip 文件中。
在 package.json 文件中還聲明了各種腳本。我們將用 npm run watch:dev 來(lái)開(kāi)發(fā)擴(kuò)展，然后使用 npm run build-zip 生成一個(gè)ZIP文件以上傳到 Chrome Web Store。
創(chuàng)建插件界面
我們直接修改popup.html
popup.html
<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <link href='http://www.piao2010.com/bcjs/popup.css' rel='external nofollow' rel='stylesheet'> <div id='app'> </div> <script src='http://www.piao2010.com/bcjs/popup.js'></script></body></html>
這里我們引入popup.css和popup.js 在popup.css放入我們需要用的樣式 在popup.js中，來(lái)引入我們的vue文件
popup.js
import Vue from ’vue’ import { Tabs,TabPane, Dialog, Button,Form,FormItem,Input,DatePicker,Message,Alert,Tooltip,MessageBox } from ’element-ui’; import ’element-ui/lib/theme-chalk/index.css’; import App from ’./App’ Vue.use(Tabs); Vue.use(TabPane); Vue.use(Dialog); Vue.use(Button); Vue.use(Form); Vue.use(FormItem); Vue.use(Input); Vue.use(DatePicker); Vue.use(Tooltip); Vue.use(Alert); Vue.prototype.$message = Message; Vue.prototype.$confirm = MessageBox.confirm; new Vue({ el: ’#app’, render: h => h(App) })
這里，我們主要按需引入element-ui中的控件，和app.vue組件
app.vue
<template> <div style='height: 580px;overflow-y: hidden;width:680px;'> <div> 模板 </div> <customPlan :projectData='projectData' :loginPerson='loginPerson'></customPlan> </div></template><script>import customPlan from ’../components/customPlan’let { Pinyin } = require(’../script/pinyin’)let pinyin = new Pinyin()export default { components: { customPlan }, data() { return { loginPerson: ’’, projectData: { departmentName: ’’, developer: ’’, endDate: ’’, evaluator: ’’, isDeprecated: false, isIncludeSaturday: false, isNewComponent: false, issureAdress: ’’, msg: ’’, name: ’’, startDate: ’’, workDay: ’’, year: 2020 } } }, created() { this.getUrl() }, methods: { getCaption(obj) { var index = obj.lastIndexOf(’，’) obj = obj.substring(index + 1, obj.length) return obj }, /** * @desc 獲取當(dāng)前頁(yè)面的url */ getUrl() { chrome.tabs.getSelected(null, tab => { console.log(tab,'tab') this.projectData.issureAdress = tab.url chrome.tabs.sendMessage(tab.id, { greet: ’hello’ }, response => { if (response && response.developer && response.processName) { let developer = pinyin .getFullChars(this.getCaption(response.developer)) .toLowerCase() this.projectData.evaluator = developer this.projectData.name = response.processName } else if (response && response.developer && !response.processName) { var index = response.developer.lastIndexOf(’@’) response.developer = response.developer.substring( index + 1, response.developer.length ) this.loginPerson = response.loginPerson this.projectData.evaluator = response.developer this.projectData.name =response.peocessName } }) }) } }}</script>
在manifest.json中引入
'browser_action': { 'default_title': '測(cè)試', 'default_popup': 'popup/popup.html' },
這里我們主要引入了我們的日歷控件customPlan，大家可以按需引入自己需要的組件。到這里，我們的插件界面基本搭建完成了。
獲取當(dāng)前界面數(shù)據(jù)，并在插件中進(jìn)行監(jiān)聽(tīng)
需要獲取當(dāng)前界面數(shù)據(jù)，就需要在Web頁(yè)面內(nèi)運(yùn)行的javascript腳本。通過(guò)使用標(biāo)準(zhǔn)的DOM，它們可以獲取瀏覽器所訪問(wèn)頁(yè)面的詳細(xì)信息，并可以修改這些信息。就需要content_scripts里面引入我們需要的contentscript.js文件，在這個(gè)js文件中，可以獲取瀏覽器所訪問(wèn)頁(yè)面的詳細(xì)信息
'content_scripts': [{ 'js': ['script/contentscript.js'], 'matches': [ 'http://*/*', 'https://*/*' ] }]
contentscript.js文件配置如下
document.addEventListener(’click’, function (e) { let isCurrect = e.path.length > 3&&e.path[4].innerText&&e.path[4].innerText.indexOf(’提交需求’) != -1 && e.target.innerText === ’確 定’ && document.getElementsByClassName(’layout-nav’) && document.getElementsByClassName(’layout-nav’)[0].children if (isCurrect) { if (document.getElementsByClassName(’user-table’) && document.getElementsByClassName(’user-table’)[0] && document.getElementsByClassName(’user-table’)[0].getElementsByClassName(’el-table__row’).length > 0) { var port = chrome.runtime.connect({ name: 'custommanage' });//通道名稱(chēng) let loginPerson = document.getElementsByClassName(’layout-nav’) && document.getElementsByClassName(’layout-nav’)[0].children ? document.getElementsByClassName(’layout-nav’)[0].children[0].innerText : ’’ let partMentName = document.getElementsByClassName(’layout-nav’) && document.getElementsByClassName(’layout-nav’)[0].children ? document.getElementsByClassName(’layout-nav’)[0].children[3].innerText : ’’ let processName = document.getElementsByClassName(’el-input__inner’) && document.getElementsByClassName(’layout-nav’)[0].children ? document.getElementsByClassName(’el-input__inner’)[0].title : ’’ let tableElement = document.getElementsByClassName(’user-table’) ? document.getElementsByClassName(’user-table’)[0].getElementsByClassName(’el-table__row’) : [] let choseSelect = [] for (let value of tableElement) {if (value.innerText.indexOf(partMentName) !== -1) { choseSelect = value} } let developPerson = ’’ let startTime = ’’ let endTime = ’’ if (choseSelect && choseSelect.getElementsByTagName(’td’)) {developPerson = choseSelect.getElementsByTagName(’td’)[1].innerTextstartTime = choseSelect.getElementsByTagName(’td’)[3].getElementsByTagName(’input’)[0].titleendTime = choseSelect.getElementsByTagName(’td’)[4].getElementsByTagName(’input’)[0].title } let item = {'loginPerson': loginPerson,'processName': processName,'developPerson': developPerson,'startTime': startTime,'endTime': endTime } port.postMessage(item);//發(fā)送消息 } else { alert(’未查到該項(xiàng)目預(yù)排人員與預(yù)排時(shí)間，請(qǐng)點(diǎn)開(kāi)插件或打開(kāi)定制管理系統(tǒng)手動(dòng)添加項(xiàng)目!’) } }});
這里獲取元素就是js基本知識(shí)了。主要使用chrome插件的api
chrome.runtime.connect
保持長(zhǎng)期連接的模式，在content scripts與Chrome擴(kuò)展程序頁(yè)面之間建立通道（可以為通道命名），可以處理多個(gè)消息。在通道的兩端分別擁有一個(gè)chrome.runtime.Port對(duì)象，用以收發(fā)消息。這里主要在我們點(diǎn)擊需要的按鈕時(shí)，就會(huì)向chrome插件發(fā)送消息。在content scripts主動(dòng)建立通道如下：
var port = chrome.runtime.connect({name: 'custommanage'});//通道名稱(chēng) port.postMessage({joke: 'Knock knock'});//發(fā)送消息 port.onMessage.addListener(function(msg) {//監(jiān)聽(tīng)消息 port.postMessage({answer: 'custommanage'}); });
獲取到界面信息后，在content scripts發(fā)生請(qǐng)求消息給Google Chrome擴(kuò)展程序，我們?cè)诓寮芯托枰@取獲取的界面信息了
chrome擴(kuò)展獲取信息
我們?cè)赽ackground.js中建立通道，獲取web界面?zhèn)骰氐男畔?/p>
chrome.tabs.query( { active: true, currentWindow: true }, function (tabs) { var port = chrome.tabs.connect(//建立通道 tabs[0].id, { name: 'custommanage' }//通道名稱(chēng) ); });chrome.runtime.onConnect.addListener((port) => { console.assert(port.name == 'custommanage'); port.onMessage.addListener((res) => { addActon(res) });});
addAction函數(shù)即是保存我們獲取的數(shù)據(jù)到數(shù)據(jù)庫(kù)。
/** * @desc 添加獲取數(shù)據(jù)到數(shù)據(jù)庫(kù) */function addProject (params) { let paramsObj = Object.assign({}, params) let optsUpdata = { method: ’POST’, //請(qǐng)求方法 body: JSON.stringify(paramsObj), //請(qǐng)求體 headers: { Accept: ’application/json’, ’Content-Type’: ’application/json’ } } fetch(’http://****/api/EditConfirmWork’, optsUpdata) .then(response => { return response.json() }) .then(data => { if (data.code === 0) { alert(’更新成功!’) } }) .catch(error => { alert(error) })}
這里我們采用fetch函數(shù)來(lái)連接數(shù)據(jù)庫(kù)，和修改數(shù)據(jù)庫(kù)，后端接口也需要做一些跨域相關(guān)處理，才能正常連接，我這里用的Node開(kāi)發(fā)的后端，大致代碼如下
//跨域app.all(’*’, function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header(’Access-Control-Allow-Methods’, ’PUT, GET, POST, DELETE, OPTIONS’); res.header(’Access-Control-Allow-Headers’, ’Origin, X-Requested-With, Content-Type, Accept’); res.header(’Access-Control-Allow-Credentials’, true) next();});
到此，獲取界面數(shù)據(jù)，并自動(dòng)保存到數(shù)據(jù)庫(kù)功能已完成,background.js我們?cè)趍anifest.json引用下。
'background': { 'scripts': ['script/background.js'] },
我們需要將編輯好的插件通過(guò)webpack打包，還需要在webpack.config.js配置一下，然后運(yùn)行npm run watch:dev 就可以得到我們需要的dist，安裝到擴(kuò)展程序就可使用了。
webpack.config.js配置如下
const webpack = require(’webpack’);const ejs = require(’ejs’);const MiniCssExtractPlugin = require(’mini-css-extract-plugin’);const WebpackShellPlugin = require(’webpack-shell-plugin’);const CopyWebpackPlugin = require(’copy-webpack-plugin’);const ChromeExtensionReloader = require(’webpack-chrome-extension-reloader’);const { VueLoaderPlugin } = require(’vue-loader’);const { version } = require(’./package.json’);const config = { mode: process.env.NODE_ENV, context: __dirname + ’/src’, entry: { ’popup/popup’: ’./popup/popup.js’, ’script/contentscript’: ’./script/contentscript.js’, ’script/background’: ’./script/background.js’ }, output: { path: __dirname + ’/dist’, filename: ’[name].js’, }, resolve: { extensions: [’.js’, ’.vue’], }, module: { rules: [ { test: /.vue$/, loaders: ’vue-loader’, }, { test: /.js$/, loader: ’babel-loader’, exclude: /node_modules/, }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, ’css-loader’], }, { test: /.scss$/, use: [MiniCssExtractPlugin.loader, ’css-loader’, ’sass-loader’], }, { test: /.sass$/, use: [MiniCssExtractPlugin.loader, ’css-loader’, ’sass-loader?indentedSyntax’], }, { test: /.(png|jpg|gif|svg|ico)$/, loader: ’file-loader’, options: { name: ’[name].[ext]?emitFile=false’, }, }, { test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/, loader: ’url-loader’, options: { esModule: false, limin: 10000, name: 'font/[name].[hash:8].[ext]' } } ], }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: ’[name].css’, }), new CopyWebpackPlugin([ { from: ’icons’, to: ’icons’, ignore: [’icon.xcf’] }, { from: ’popup/popup.html’, to: ’popup/popup.html’, transform: transformHtml }, { from: ’manifest.json’, to: ’manifest.json’, transform: (content) => { const jsonContent = JSON.parse(content); jsonContent.version = version; if (config.mode === ’development’) { jsonContent[’content_security_policy’] = 'script-src ’self’ ’unsafe-eval’; object-src ’self’'; } return JSON.stringify(jsonContent, null, 2); }, }, ]) ],};if (config.mode === ’production’) { config.plugins = (config.plugins || []).concat([ new webpack.DefinePlugin({ ’process.env’: { NODE_ENV: ’'production'’, }, }), ]);}if (process.env.HMR === ’true’) { config.plugins = (config.plugins || []).concat([ new ChromeExtensionReloader(), ]);}function transformHtml(content) { return ejs.render(content.toString(), { ...process.env, });}module.exports = config;
我們數(shù)據(jù)改變后，如果想點(diǎn)開(kāi)插件就查看對(duì)應(yīng)界面，這里就按需引入我們需要的組件，來(lái)實(shí)現(xiàn)不同的界面展示。
最后附上manifest.json完整的配置
{ 'name': '插件', 'description': '描述', 'version': 2.0, 'manifest_version': 2, 'icons': { '48': 'icons/icon_426.png', '128': 'icons/icon_426.png' }, 'browser_action': { 'default_title': '插件', 'default_popup': 'popup/popup.html' }, 'permissions': [ 'tabs', '<all_urls>' ], 'background': { 'scripts': ['script/background.js'] }, 'content_scripts': [{ 'js': ['script/contentscript.js'], 'matches': [ 'http://*/*', 'https://*/*' ] }]}
以上就是vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的詳細(xì)內(nèi)容，更多關(guān)于vue開(kāi)發(fā)chrome插件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
網(wǎng)公網(wǎng)安備