电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue開發chrome插件,實現獲取界面數據和保存到數據庫功能

瀏覽:169日期:2022-10-22 13:15:05

前言

最近在評估項目時,要開啟評估平臺,查看平臺和保存平臺,感覺非常繁瑣,開發了一款可以獲取評估平臺數據,查看項目排期和直接保存數據到數據庫的chrome插件,由于我需要使用之前vue封裝的一個日歷插件,這里就用vue來開發這個插件。

開發前準備

要開發一個chrome插件,我們首先需要了解chrome插件的基本結構和對應的功能。每個擴展的文件類型和目錄數量有所不同,但都必須有 manifest。 一些基本但有用的擴展程序可能僅由 manifest 及其工具欄圖標組成。

manifest.json

{ 'name': 'My Extension', // '擴展名' 'version': '2.1', // 當前創建擴展版本號 'description': 'Gets information from Google.', //'擴展描述' 'icons': { // 擴展工具界面使用圖標 '128': 'icon_16.png', '128': 'icon_32.png', '128': 'icon_48.png', '128': 'icon_128.png' }, 'background': { // 擴展常常用一個單獨的長時間運行的腳本來管理一些任務或者狀態 '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開發chrome插件

我們需要使用vue來開發插件,幾經搜索,查到一款樣板,很方便我們進行vue開發插件,便引入該樣板來進行開發。

引入vue-web-extension樣板來實現vue開發

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,就可以進行開發并監視更改。

樣板文件的基本格式

├── 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 創建的。

最后,請注 scripts 文件夾的兩個腳本:一個用于刪除 eval 用法以符合 Chrome Web Store 的內容安全策略,另一個用于當你要把擴展上傳到Chrome Web Store時將其打包到 .zip 文件中。

在 package.json 文件中還聲明了各種腳本。我們將用 npm run watch:dev 來開發擴展,然后使用 npm run build-zip 生成一個ZIP文件以上傳到 Chrome Web Store。

創建插件界面

我們直接修改popup.html

popup.html

<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <link href='http://www.hdgsjgj.cn/bcjs/popup.css' rel='external nofollow' rel='stylesheet'> <div id='app'> </div> <script src='http://www.hdgsjgj.cn/bcjs/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 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,大家可以按需引入自己需要的組件。到這里,我們的插件界面基本搭建完成了。

獲取當前界面數據,并在插件中進行監聽

需要獲取當前界面數據,就需要在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].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);//發送消息 } else { alert(’未查到該項目預排人員與預排時間,請點開插件或打開定制管理系統手動添加項目!’) } }});

這里獲取元素就是js基本知識了。主要使用chrome插件的api

chrome.runtime.connect

保持長期連接的模式,在content scripts與Chrome擴展程序頁面之間建立通道(可以為通道命名),可以處理多個消息。在通道的兩端分別擁有一個chrome.runtime.Port對象,用以收發消息。這里主要在我們點擊需要的按鈕時,就會向chrome插件發送消息。在content scripts主動建立通道如下:

var port = chrome.runtime.connect({name: 'custommanage'});//通道名稱 port.postMessage({joke: 'Knock knock'});//發送消息 port.onMessage.addListener(function(msg) {//監聽消息 port.postMessage({answer: 'custommanage'}); });

獲取到界面信息后,在content scripts發生請求消息給Google Chrome擴展程序,我們在插件中就需要獲取獲取的界面信息了

chrome擴展獲取信息

我們在background.js中建立通道,獲取web界面傳回的信息

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開發的后端,大致代碼如下

//跨域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開發chrome插件,實現獲取界面數據和保存到數據庫功能的詳細內容,更多關于vue開發chrome插件的資料請關注好吧啦網其它相關文章!

標簽: Vue
主站蜘蛛池模板: 建筑工程资质合作-工程资质加盟分公司-建筑资质加盟 | 医用酒精_84消毒液_碘伏消毒液等医用消毒液-漓峰消毒官网 | 广东教师资格网-广东教师资格证考试网 | 电缆接头_防水接头_电缆防水接头 - 乐清市新豪电气有限公司 | 导电银胶_LED封装导电银胶_半导体封装导电胶厂家-上海腾烁 | 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 爆破器材运输车|烟花爆竹运输车|1-9类危险品厢式运输车|湖北江南专用特种汽车有限公司 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 吊篮式|移动式冷热冲击试验箱-二槽冷热冲击试验箱-广东科宝 | 闪电优家-卫生间防水补漏_酒店漏水渗水维修_防水堵漏公司 | 科昊仪器超纯水机系统-可成气相液氮罐-美菱超低温冰箱-西安昊兴生物科技有限公司 | 新能源汽车教学设备厂家报价[汽车教学设备运营18年]-恒信教具 | 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 杭州成人高考_浙江省成人高考网上报名 | 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 河南生物显微镜,全自动冰冻切片机-河南荣程联合科技有限公司 | 宏源科技-房地产售楼系统|线上开盘系统|售楼管理系统|线上开盘软件 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 沈阳激光机-沈阳喷码机-沈阳光纤激光打标机-沈阳co2激光打标机 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 臻知网大型互动问答社区-你的问题将在这里得到解答!-无锡据风网络科技有限公司 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 2025黄道吉日查询、吉时查询、老黄历查询平台- 黄道吉日查询网 | 活性氧化铝球|氧化铝干燥剂|分子筛干燥剂|氢氧化铝粉-淄博同心材料有限公司 | 密集柜_档案密集柜_智能密集架_密集柜厂家_密集架价格-智英伟业 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | 证券新闻,热播美式保罗1984第二部_腾讯1080p-仁爱影院 | 济南宣传册设计-画册设计_济南莫都品牌设计公司 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 |