vue开发chrome插件,实现获取界面数据和保存到数据库功能
作者:启晨1991 发布时间:2024-01-19 03:18:57
前言
最近在评估项目时,要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的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"] // 后台常驻脚本,自动运行,直到关闭浏览器。可根据需求自行设置
},
"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="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,大家可以按需引入自己需要的组件。到这里,我们的插件界面基本搭建完成了。
获取当前界面数据,并在插件中进行监听
需要获取当前界面数据,就需要在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);//发送消息
} 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://*/*"
]
}]
}
来源:https://juejin.cn/post/6900870069309177869?utm_source=tuicool&utm_medium=referral
猜你喜欢
- IE8主页http://www.microsoft.com/windows/products/winfamily/ie/ie8/defaul
- Python 界有条不成文的准则: 计算密集型任务适合多进程,IO 密集型任务适合多线程。本篇来作个比较。通常来说多线程相对于多进程有优势,
- 本文实例讲述了vue+php实现的微博留言功能。分享给大家供大家参考,具体如下:html部分:<!doctype html>&l
- 在上一篇文章中讲解了什么是反射,以及利用反射可以获取程序集里面的哪些内容。在平时的项目中,可能会遇到项目需要使用多种数据库,这篇文章中将会讲
- 如下所示:# Seed random number generatornp.random.seed(42)# Compute mean no
- 1.唯一性以下方法可以检查给定列表是否有重复的地方,可用set()的属性将其从列表中删除。x = [1,1,2,2,3,2,3,4,5,6]
- 最近需要用Python写一个简易通讯录,但是对于数据存储很发愁。大家都知道,使用 Python 中的列表和字典进行存储数据是很不靠谱的,所以
- 如下所示:import pandas as pdfile = pd.read_csv('file.csv',iterator
- 本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图代码块<!DOCTYPE html><html>
- 原理就是先声明常量,包括列数,行数,各列的属性,然后在程序的其它过程用这些常量来控制Cells。非常方便,便于修改和移植! 以下为窗体整体代
- 本节介绍 Python 中的另一个常用模块 —— statistics模块,该模块提供了用于计算数字数据的数理统计量的函数。它包含了很多函数
- 目录前言通过错误日志记录利用 channel 传输使用 sync/errgroup总结前言在 Go 语言程序开发中,goroutine 的使
- <script language="javascript">function chang
- 本文实例为大家分享了js实现微信聊天效果的具体代码,供大家参考,具体内容如下<!DOCTYPE html><html la
- 下面是我已经证实可用的自动备份的方法. 1、打开企业管理器->管理->sql server代理 2、新建一个作业,作业名称随便取
- 在Python中可以使用paramiko模块中的sftp登陆远程主机,实现上传和下载功能。1.功能实现根据输入参数判断是文件还是目录,进行上
- 今天碰到这个极度郁闷的报错,搞了大半下午,才发现是ie的问题,忍不住大骂。例子是这样的:页面中有多处能出发菜单,并且菜单出现在触发点的旁边,
- 公用表表达式简介:公用表表达式 (CTE) 可以认为是在单个 SELECT、INSERT、UPDATE、DELETE 或 CREATE VI
- 在python3.6版本中去掉了os.path.walk()函数os.walk()函数声明:walk(top,topdown=True,on
- folium是python的一个用来绘制地图,并在地图上打点,画圈,做颜色标记的工具类。简单易学,和pandas可以很好的融合,是居家必备良