vue開發(fā)chrome插件，實現獲取界面數據和保存到數據庫功能
更新時間：2020年12月01日 10:33:27 作者：啟晨1991
這篇文章主要介紹了vue開發(fā)chrome插件，實現獲取界面數據和保存到數據庫功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
前言
最近在評估項目時，要開啟評估平臺，查看平臺和保存平臺，感覺非常繁瑣，開發(fā)了一款可以獲取評估平臺數據，查看項目排期和直接保存數據到數據庫的chrome插件，由于我需要使用之前vue封裝的一個日歷插件，這里就用vue來開發(fā)這個插件。
開發(fā)前準備
要開發(fā)一個chrome插件，我們首先需要了解chrome插件的基本結構和對應的功能。
每個擴展的文件類型和目錄數量有所不同，但都必須有 manifest。 一些基本但有用的擴展程序可能僅由 manifest 及其工具欄圖標組成。
manifest.json
{
"name": "My Extension", // "擴展名"
"version": "2.1", // 當前創(chuàng)建擴展版本號
"description": "Gets information from Google.", //"擴展描述"
"icons": { // 擴展工具界面使用圖標
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": { // 擴展常常用一個單獨的長時間運行的腳本來管理一些任務或者狀態(tài)
"persistent": false,
"scripts": ["background_script.js"] // 后臺常駐腳本，自動運行，直到關閉瀏覽器?？筛鶕枨笞孕性O置
},
"permissions": ["https://*.google.com/", "activeTab"], //開啟拓展權限
"browser_action": {
"default_icon": "icon_16.png", // 器右上角顯示
"default_popup": "popup.html" /** 鼠標移入，顯示簡短擴展文本描述 **/
},
"content_scripts": [{ // ontent scripts是在Web頁面內運行的javascript腳本。通過使用標準的DOM，它們可以獲取瀏覽器所訪問頁面的詳細信息，并可以修改這些信息。
"js": ["script/contentscript.js"], /** 需要注入的腳本 **/
"matches": [ /** 匹配網址(支持正則)，成功即注入（其余屬性自行查詢） **/
"http://*/*",
"https://*/*"
]
}]
}
vue開發(fā)chrome插件
我們需要使用vue來開發(fā)插件，幾經搜索，查到一款樣板，很方便我們進行vue開發(fā)插件，便引入該樣板來進行開發(fā)。
引入vue-web-extension樣板來實現vue開發(fā)
npm install -g @vue/cli npm install -g @vue/cli-init vue init kocal/vue-web-extension new-tab-page
然后切換到項目目錄安裝依賴項
cd new-tab-page npm install
我們可以運行
npm run watch:dev
在項目根目錄中會得到一個dist 文件夾，我們直接安裝解壓的擴展程序，選擇這個dist,就可以進行開發(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進行打包，
src文件夾包含我們將用于擴展的所有文件。manifest 文件和 background.js 對于我們來說是熟悉的，但也要注意包含Vue 組件的 popup 文件夾。當樣板文件將擴展構建到 dist 文件夾中時，它將通過vue-loader 管理所有 .vue 文件并輸出一個瀏覽器可以理解的 JavaScript 包。
在 src 文件夾中還有一個 icons 文件夾。如果你看一眼 Chrome 的工具欄，會看到我們的擴展程序的新圖標（也被稱為 browser action）。這就是從此文件夾中拿到的。如果單擊它，你應該會看到一個彈出窗口，顯示“Hello world！” 這是由 popup/App.vue 創(chuàng)建的。
最后，請注 scripts 文件夾的兩個腳本：一個用于刪除 eval 用法以符合 Chrome Web Store 的內容安全策略，另一個用于當你要把擴展上傳到Chrome Web Store時將其打包到 .zip 文件中。
在 package.json 文件中還聲明了各種腳本。我們將用 npm run watch:dev 來開發(fā)擴展，然后使用 npm run build-zip 生成一個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="popup.css" rel="external nofollow" rel="stylesheet"> <div id="app"> </div> <script src="popup.js"></script> </body> </html>
這里我們引入popup.css和popup.js 在popup.css放入我們需要用的樣式 在popup.js中，來引入我們的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 id="app" 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 獲取當前頁面的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": "測試",
"default_popup": "popup/popup.html"
},
這里我們主要引入了我們的日歷控件customPlan，大家可以按需引入自己需要的組件。到這里，我們的插件界面基本搭建完成了。
獲取當前界面數據，并在插件中進行監(jiān)聽
需要獲取當前界面數據，就需要在Web頁面內運行的javascript腳本。通過使用標準的DOM，它們可以獲取瀏覽器所訪問頁面的詳細信息，并可以修改這些信息。就需要content_scripts里面引入我們需要的contentscript.js文件，在這個js文件中，可以獲取瀏覽器所訪問頁面的詳細信息
"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" });//通道名稱
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].innerText
startTime = choseSelect.getElementsByTagName('td')[3].getElementsByTagName('input')[0].title
endTime = 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('未查到該項目預排人員與預排時間，請點開插件或打開定制管理系統(tǒng)手動添加項目!')
}
}
});
這里獲取元素就是js基本知識了。主要使用chrome插件的api
chrome.runtime.connect
保持長期連接的模式，在content scripts與Chrome擴展程序頁面之間建立通道（可以為通道命名），可以處理多個消息。在通道的兩端分別擁有一個chrome.runtime.Port對象，用以收發(fā)消息。這里主要在我們點擊需要的按鈕時，就會向chrome插件發(fā)送消息。
在content scripts主動建立通道如下：
var port = chrome.runtime.connect({name: "custommanage"});//通道名稱
port.postMessage({joke: "Knock knock"});//發(fā)送消息
port.onMessage.addListener(function(msg) {//監(jiān)聽消息
port.postMessage({answer: "custommanage"});
});
獲取到界面信息后，在content scripts發(fā)生請求消息給Google Chrome擴展程序，我們在插件中就需要獲取獲取的界面信息了
chrome擴展獲取信息
我們在background.js中建立通道，獲取web界面?zhèn)骰氐男畔?/p>
chrome.tabs.query(
{ active: true, currentWindow: true },
function (tabs) {
var port = chrome.tabs.connect(//建立通道
tabs[0].id,
{ name: "custommanage" }//通道名稱
);
});
chrome.runtime.onConnect.addListener((port) => {
console.assert(port.name == "custommanage");
port.onMessage.addListener((res) => {
addActon(res)
});
});
addAction函數即是保存我們獲取的數據到數據庫。
/**
* @desc 添加獲取數據到數據庫
*/
function addProject (params) {
let paramsObj = Object.assign({}, params)
let optsUpdata = {
method: 'POST', //請求方法
body: JSON.stringify(paramsObj), //請求體
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函數來連接數據庫，和修改數據庫，后端接口也需要做一些跨域相關處理，才能正常連接，我這里用的Node開發(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();
});
到此，獲取界面數據，并自動保存到數據庫功能已完成,background.js我們在manifest.json引用下。
"background": {
"scripts": ["script/background.js"]
},
我們需要將編輯好的插件通過webpack打包，還需要在webpack.config.js配置一下，然后運行npm run watch:dev 就可以得到我們需要的dist，安裝到擴展程序就可使用了。
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;
我們數據改變后，如果想點開插件就查看對應界面，這里就按需引入我們需要的組件，來實現不同的界面展示。
最后附上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開發(fā)chrome插件，實現獲取界面數據和保存到數據庫功能的詳細內容，更多關于vue開發(fā)chrome插件的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue引入axios同源跨域問題，文章給大家提供了解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vite.config.js或者vue.config.js配置方式
這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Axios?是一個簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U展的接口的小包中提供了一個簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之axios,需要的朋友可以參考下2022-12-12
Vue MVVM模型與data及methods屬性超詳細講解
MVVM旨在利用WPF中的數據綁定函數,通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10
與如何在React項目中應用TypeScript類類似在VUE項目中應用typescript，我們需要引入一個庫vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹2021-09-09
本篇文章主要介紹了vue中用H5實現文件上傳的方法實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了Vue監(jiān)聽數據變化，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
在本篇內容中小編給大家分享了關于Vue中使用canvas方法和步驟，對此有需要的讀者們參考學習下。2019-02-02
這篇文章主要為大家介紹了vue+three.js實現炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12