vue开发chrome插件，实现获取界面数据和保存到数据库功能

2023-07-10 10:32:08 213

前言

最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vue封装的一个日历插件，这里就用vue来开发这个插件。

开发前准备

要开发一个chrome插件，我们首先需要了解chrome插件的基本结构和对应的功能。
每个扩展的文件类型和目录数量有所不同，但都必须有manifest。一些基本但有用的扩展程序可能仅由manifest及其工具栏图标组成。

manifest.json

{
"name":"MyExtension",//"扩展名"
"version":"2.1",//当前创建扩展版本号
"description":"GetsinformationfromGoogle.",//"扩展描述"
"icons":{//扩展工具界面使用图标
"128":"icon_16.png",
"128":"icon_32.png",
"128":"icon_48.png",
"128":"icon_128.png"
},
"background":{//扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态
"persistent":false,
"scripts":["background_script.js"]//后台常驻脚本，自动运行，直到关闭浏览器。可根据需求自行设置
},
"permissions":["https://*.google.com/","activeTab"],//开启拓展权限
"browser_action":{
"default_icon":"icon_16.png",//器右上角显示
"default_popup":"popup.html"/**鼠标移入，显示简短扩展文本描述**/
},
"content_scripts":[{//ontentscripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
"js":["script/contentscript.js"],/**需要注入的脚本**/
"matches":[/**匹配网址(支持正则)，成功即注入（其余属性自行查询）**/
"http://*/*",
"https://*/*"
]
}]
}

vue开发chrome插件

我们需要使用vue来开发插件，几经搜索，查到一款样板，很方便我们进行vue开发插件，便引入该样板来进行开发。

引入vue-web-extension样板来实现vue开发

npminstall-g@vue/cli
npminstall-g@vue/cli-init
vueinitkocal/vue-web-extensionnew-tab-page

然后切换到项目目录安装依赖项

cdnew-tab-page
npminstall

我们可以运行

npmrunwatch:dev

在项目根目录中会得到一个dist文件夹，我们直接安装解压的扩展程序，选择这个dist,就可以进行开发并监视更改。

样板文件的基本格式

├──dist
│└──
├──node_modules
│└──
├──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的工具栏，会看到我们的扩展程序的新图标（也被称为browseraction）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Helloworld！”这是由popup/App.vue创建的。

最后，请注scripts文件夹的两个脚本：一个用于删除eval用法以符合ChromeWebStore的内容安全策略，另一个用于当你要把扩展上传到ChromeWebStore时将其打包到.zip文件中。

在package.json文件中还声明了各种脚本。我们将用npmrunwatch:dev来开发扩展，然后使用npmrunbuild-zip生成一个ZIP文件以上传到ChromeWebStore。

创建插件界面

我们直接修改popup.html

popup.html





Title

这里我们引入popup.css和popup.js在popup.css放入我们需要用的样式在popup.js中，来引入我们的vue文件

popup.js

importVuefrom'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';
importAppfrom'./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;
newVue({
el:'#app',
render:h=>h(App)
})

这里，我们主要按需引入element-ui中的控件，和app.vue组件

app.vue

在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){
letisCurrect=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){
varport=chrome.runtime.connect({name:"custommanage"});//通道名称
letloginPerson=document.getElementsByClassName('layout-nav')&&document.getElementsByClassName('layout-nav')[0].children?document.getElementsByClassName('layout-nav')[0].children[0].innerText:''
letpartMentName=document.getElementsByClassName('layout-nav')&&document.getElementsByClassName('layout-nav')[0].children?document.getElementsByClassName('layout-nav')[0].children[3].innerText:''
letprocessName=document.getElementsByClassName('el-input__inner')&&document.getElementsByClassName('layout-nav')[0].children?document.getElementsByClassName('el-input__inner')[0].title:''
lettableElement=document.getElementsByClassName('user-table')?document.getElementsByClassName('user-table')[0].getElementsByClassName('el-table__row'):[]
letchoseSelect=[]
for(letvalueoftableElement){
if(value.innerText.indexOf(partMentName)!==-1){
choseSelect=value
}
}
letdevelopPerson=''
letstartTime=''
letendTime=''
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
}
letitem={
"loginPerson":loginPerson,
"processName":processName,
"developPerson":developPerson,
"startTime":startTime,
"endTime":endTime
}
port.postMessage(item);//发送消息
}else{
alert('未查到该项目预排人员与预排时间，请点开插件或打开定制管理系统手动添加项目!')
}
}
});

这里获取元素就是js基本知识了。主要使用chrome插件的api

chrome.runtime.connect

保持长期连接的模式，在contentscripts与Chrome扩展程序页面之间建立通道（可以为通道命名），可以处理多个消息。在通道的两端分别拥有一个chrome.runtime.Port对象，用以收发消息。这里主要在我们点击需要的按钮时，就会向chrome插件发送消息。
在contentscripts主动建立通道如下：

varport=chrome.runtime.connect({name:"custommanage"});//通道名称
port.postMessage({joke:"Knockknock"});//发送消息
port.onMessage.addListener(function(msg){//监听消息
port.postMessage({answer:"custommanage"});
});

获取到界面信息后，在contentscripts发生请求消息给GoogleChrome扩展程序，我们在插件中就需要获取获取的界面信息了

chrome扩展获取信息

我们在background.js中建立通道，获取web界面传回的信息

chrome.tabs.query(
{active:true,currentWindow:true},
function(tabs){
varport=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添加获取数据到数据库
*/
functionaddProject(params){
letparamsObj=Object.assign({},params)
letoptsUpdata={
method:'POST',//请求方法
body:JSON.stringify(paramsObj),//请求体
headers:{
Accept:'application/json',
'Content-Type':'application/json'
}
}
fetch('http://****/api/EditConfirmWork',optsUpdata)
.then(response=>{
returnresponse.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配置一下，然后运行npmrunwatch:dev就可以得到我们需要的dist，安装到扩展程序就可使用了。

webpack.config.js配置如下

constwebpack=require('webpack');
constejs=require('ejs');
constMiniCssExtractPlugin=require('mini-css-extract-plugin');
constWebpackShellPlugin=require('webpack-shell-plugin');
constCopyWebpackPlugin=require('copy-webpack-plugin');
constChromeExtensionReloader=require('webpack-chrome-extension-reloader');
const{VueLoaderPlugin}=require('vue-loader');
const{version}=require('./package.json');

constconfig={
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:[
newVueLoaderPlugin(),
newMiniCssExtractPlugin({
filename:'[name].css',
}),
newCopyWebpackPlugin([
{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)=>{
constjsonContent=JSON.parse(content);
jsonContent.version=version;

if(config.mode==='development'){
jsonContent['content_security_policy']="script-src'self''unsafe-eval';object-src'self'";
}

returnJSON.stringify(jsonContent,null,2);
},
},
])
],
};

if(config.mode==='production'){
config.plugins=(config.plugins||[]).concat([
newwebpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"',
},
}),
]);
}

if(process.env.HMR==='true'){
config.plugins=(config.plugins||[]).concat([
newChromeExtensionReloader(),
]);
}

functiontransformHtml(content){
returnejs.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",
""
],
"background":{
"scripts":["script/background.js"]
},
"content_scripts":[{
"js":["script/contentscript.js"],
"matches":[
"http://*/*",
"https://*/*"
]
}]
}

以上就是vue开发chrome插件，实现获取界面数据和保存到数据库功能的详细内容，更多关于vue开发chrome插件的资料请关注毛票票其它相关文章！

vue开发chrome插件，实现获取界面数据和保存到数据库功能

热门推荐

随机推荐