编程技术是改变世界的力量。
本站
当前位置:网站首页 > HTML/CSS > 正文

手把手教你开发chrome插件,提高效率,再也不用挠头录入测试资料

gowuye 2023-10-14 14:02 21 浏览 0 评论

背景

最近在做中后台相关页面中涉及到录入大量的姓名,手机号码,身份证号码来生成订单,昏天黑地。往往出现bug的页面都是在录入一大堆信息之后才显示。

在开发前期时,对录入input框的内容不做限制的时候,可以随便输入111,222,测试之类的内容,虽然不好看,但是也可以快速录入,但当开发结束进入联调和反馈bug的时候,增加了对身份证号码的正确性校验,增加了手机号码的长度和区号校验,录入资料的时候还要想想。虽然比较简单,但是谁让咱比较懒呢。

其中一种解决方案是在代码中针对debug情况都自动录入默认测试数据。 另一种就是今天拍脑门的方案,做个chrome插件,直接在input框上右键选择随机姓名,随机手机号,随机身份证号码就可以快速录入合格数据,而且插件也可以分享给测试的小伙伴,也记录下chrome插件开发的流程,方便未来制作新的小插件。

基础manifest.json文件讲解

manifest.json是chrome开发指定的配置文件,指明了很多扩展信息,所以开发插件先上这个文件。

{
 "name": "MockInput", //插件名称
 "version": "1.01", //插件版本
 "manifest_version": 2, //manifest文件版本号,填2就是了
 "description": "右键录入输入框数据,烦人的手动输入", //插件描述信息
 "icons": { //拓展图标,
 "16": "image/icon-16.png",
 "48": "image/icon-48.png",
 "128": "image/icon-128.png"
 }, 
 "browser_action": { //在地址栏右侧显示信息,包含图标和弹出页面的设置。
 "default_icon": "image/icon-128.png",
 "default_title": "右键输入mock数据",
 "default_popup": "html/browser.html"
 },
 "page_action": { //地址栏最后附加图标。含图标及行为等
 "default_icon": "image/icon-48.png",
 "default_title": "Test",
 "default_popup": "html/page.html"
 },
 "background": { //指定扩展进程的background运行环境
 "scripts": [
 "js/menu.js"
 ]
 },
 "content_scripts": [ //注入web页面运行的脚本和样式。
 {
 "matches": [
 "*://*/*"
 ],
 "js": [
 "js/content.js"
 ]
 }
 ],
 "homepage_url": "https://notes.tingno.com", //主页地址
 "incognito": "spanning", 
 "offline_enabled": true, 
 "options_page": "html/setting.html", //设置选项页面
 "options_ui":{
 "page": "html/setting.html",
 "chrome_style": true
 },
 "permissions": [ //申请权限
 "*://*/*",
 "contextMenus",
 "tabs",
 "activeTab",
 "storage",
 "notifications"
 ]
}

我这边用到的也就上面这些信息,直接帖进去载入chrome有错误的话,浏览器会进行提示。

这里特别说明content_scripts文件是在指定域名后进行脚本和样式的注入,大部分插件主要依赖这个部分。可以修改页面。

增加右键菜单

首先在配置文件的permissions中申请右键权限contextMenus,以及对应的增加扩展环境background的选项,见前面配置文件。 路径按照相对路径进行填写就行。

然后在对应的文件(我这里是js/menu.js)中添加增加菜单内容,需要多增加几个菜单就多create几个。

chrome.contextMenus.create({
 type: 'normal',
 title: '模拟数据插入',
 id: 'menuDemo',
 contexts: ['editable']
});

create第一个参数是options对象,对应的内容

  • id (文本) 必备,子菜单可以指定父菜单项ID
  • type ( 枚举值:["normal", "checkbox", "radio", "separator"] )右键菜单项的类型。默认为“normal”。
  • title ( 文本 ) 右键菜单项的显示文字;除非类型为“separator”类否则此参数是必须的。如果类型为“selection”,您可以在字符串中使用%s显示选定的文本。例如,如果参数的值为 "Translate '%s' to Pig Latin",而用户还选中了文本“cool”,那么显示在菜单中的将会是 "Translate 'cool' to Pig Latin"。
  • checked ( optional boolean )Checkbox或者radio的初始状态:true代表选中,false代表未选中。在给定的radio中只能有一个处于选中状态。
  • contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )右键菜单项将会在这个列表指定的上下文类型中显示。默认为“page”。
  • onclick ( optional function )当菜单项被点击时触发的函数。
  • 参数info ( OnClickData )右键菜单项被点击时相关的上下文信息。 参数tab ( Tab )右键菜单项被点击时,当前标签的详细信息。
  • parentId ( optional integer )右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单。
  • documentUrlPatterns ( optional array of string )这使得右键菜单只在匹配此模式的url页面上生效(这个对框架也适用)。详细的匹配格式见:模式匹配页面。
  • targetUrlPatterns ( optional array of string )类似于documentUrlPatterns,但是您可以针对img/audio/video标签的src属性和anchor标签的href做过滤。
  • enabled ( optional boolean )启用或者禁用此菜单项,启用为true,禁用为false。默认为true。

create还包含一个回调函数,在创建完菜单项后触发。如果创建过程中有错误产生,其详细信息在Chrome.extension.lastError中。

我的需求里面包含随机姓名、随机手机号、随机身份证、指定姓名、指定手机号、指定身份证。一个总菜单,带6个子菜单,而且默认我们只是在输入框右键的时候,需要弹出菜单,其他地方没啥用。

在总菜单之后,加上子菜单。

//子菜单带上
chrome.contextMenus.create({
 type: 'normal',
 title: '随机证件号',
 id: 'randomPerson',
 parentId: 'menuDemo',
 contexts: ['editable'],
 onclick: genericOnClick
});

出来效果是什么样子的呢?

点击子菜单之后,要将点击了哪个菜单推送到页面中去,方便页面进行操作。

sendMessage,onMessage消息传递

由于右键点击菜单逻辑是在backgroud里面实现,而具体的元素输入是在具体的tab实现。tab向background发送消息的话,就一个不需要指定。而background发送消息的话,就需要指定具体哪个tab,并且在对应的页面进行接收。

发送的话,是在右键菜单的onclick函数genericOnClick中实现。前面也不知道具体用到啥,全送过去再说。而且onclick的参数句柄上也已经给定了是哪个页面点击右键,发回去就行了。

function genericOnClick(info, tab) {
 chrome.tabs.sendMessage(tab.id, {'tab':tab, 'info': info });
}

然后就是在具体的content.js中接收消息,加一个监听。拿到具体的内容进行打印就行了。

chrome.extension.onMessage.addListener(function(request, _, response) {
 console.log(request)
});

元素绑定

对应的事件传递到当前的话,就可以生成对应的随机值,然后输入页面就可以了。不过由于时间短暂,所以没找到回传具体右键点击了什么元素,只能在页面进行注入,右键的时候,指定下具体点击的是哪个元素。目前插件只需要input,所以给所有的页面的input绑定事件。

var mockContent = null
var inputs = document.getElementsByTagName('input')
for(var i=0; i< inputs.length; i++){
 inputs[i].addEventListener('contextmenu',function(){
 mockContent = this
 })
}

当点击回调事件回来之后,就知道具体右击的是什么元素,就可以直接将对应元素还值就是了。

输入事件

前面元素绑定,加值之后,就是直接mockContent.value = 值就是了。但是我们后台用的是vue写的,直接操作dom上的value值,不能引起对应的双向绑定生效,页面元素校验审核也不通过。这时候就需要手动触发下对应的input事件。就变成了下文。随机生成姓名,手机号,身份证不在本文讨论范围内。自行翻阅之前文章内容。

mockContent.value = value
mockContent.dispatchEvent(new Event('input'))

插件存储storage

在配置文件里面声明权限

有时候,其实我们希望录入的内容是固定的,比如手机号码。随机填写别人的也可以,但是你的系统如果同时还给别人发送验证码啊,消息通知之类的就不好了。这时候其实配置一下指定内容既可,这时候就用到的配置页面,一般配置信息都存储在storage。最重要的是,放在此处的内容是全局的。

你直接使用chrome.storage进行操作就行了。插件的存储分为local和sync两种,sync的配置可以跟着你的谷歌帐号同步的。自己也用不到,就先用本地的好了。内容也很简单。

//写入
chrome.storage.local.set({name:'name',age:19},_=>{
})
//读取,格式一样,属性后面的值是默认值。
chrome.storage.local.get({name:'name',age:19},items=>{
 console.log(items.name, items.age)
})

注意,读取和写入都是异步操作。

通知 notifications

保存成功要消息提醒一下,在配置文件里面声明权限,直接用就是了,也很简单。

chrome.notifications.create(null, {
 type: 'basic',
 iconUrl: '../image/icon-48.png',
 title: '保存成功',
 message: '配置已经生效,请继续使用!'
});

当然样式可以很丰富,具体看你自己的需要。

文末

只要用chrome,基本上都会用插件的。开发满足自己需求的插件,提高效率,堪称神器。

文中提到的小插件已经放在了github上,大神看看笑话就得了,单纯自用。

MockInput: https://github.com/q5276/MockInput

另外,还有批量生成模拟信息的页面

模拟个人信息测试用:https://notes.tingno.com/demo/mock/person.html


下面是广告

相关推荐

python中调试pdb_python怎么调试
python中调试pdb_python怎么调试

当你的Python程序出现错误或行为不符合预期时,调试工具是一种非常有用的方式来帮助你找到问题所在。Python内置了一个强大的调试器模块,称为pdb(Pyth...

2023-10-22 12:21 gowuye

vue3+tsx开发语法详解_vue3+typescript
vue3+tsx开发语法详解_vue3+typescript

很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pn...

2023-10-22 12:20 gowuye

对前端初学者的一些帮助(常见名词解释)
对前端初学者的一些帮助(常见名词解释)

1.HTML:HTML是超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。2.CSS:主要用来设计网页的样式,美化网页;...

2023-10-22 12:20 gowuye

JAVA多线程详解(超详细)_java多线程菜鸟教程
JAVA多线程详解(超详细)_java多线程菜鸟教程

一、线程简介1、进程、线程程序:开发写的代码称之为程序。程序就是一堆代码,一组数据和指令集,是一个静态的概念。进程(Process):将程序运行起来,我们称之...

2023-10-22 12:19 gowuye

一文搞懂什么时候用 Runnable?什么时候用 Callable ?

今天我们看一道leetcodehard难度题目:统计可以被K整除的下标对数目。题目给你一个下标从0开始、长度为n的整数数组nums和一个整数k,返回满足下述条件的下标对(i...

优化重复冗余代码的8种方式_优化重复冗余代码的8种方式是什么

日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可维护性差、可读性差、增加错误风险等等。最近呢,我优化了一些系统中的重复代码,用了好几种的方式。感觉挺有用的,所以本文...

高级 CSS 和 Sass:Flexbox、网格、动画等等!
高级 CSS 和 Sass:Flexbox、网格、动画等等!

Udemy-高级CSS和Sass:Flexbox、网格、动画等等!讲师:JonasSchmedtmann下载:口袋资源网高级CSS和Sass:...

2023-10-22 12:19 gowuye

我们现在正处于 JavaScript 消亡的边缘?
我们现在正处于 JavaScript 消亡的边缘?

每10年JavaScript都会发生一次改朝换代式的变革。在我看来,JavaScript当前正处于一次快速变革的开始,而这段时期未来可能会被称为Ja...

2023-10-22 12:19 gowuye

CSS预编译器三剑客及PostCSS_前端预编译css有哪几种
CSS预编译器三剑客及PostCSS_前端预编译css有哪几种

这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。为什么会出现CSS预编译...

2023-10-22 12:18 gowuye

CSS预处理语言Sass入门_css3预处理器
CSS预处理语言Sass入门_css3预处理器

1.引言CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一...

2023-10-22 12:18 gowuye

“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇
“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇

前言又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉,当下,正面临着近几年来的最严重的互联网寒冬,因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀...

2023-10-22 12:18 gowuye

sass @extend(继承)指令详解_sass内置函数总结

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在HTML中给元素定义两个class,一个通用样式,一个特殊样式。普通CSS的实现接下来以警...

Sass混合的使用_sas中如何合并两组数据

本节我们学习Sass中的混合,Sass中的混合是通过@mixin指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的CSS规则和任何其他...

css代码规范工具stylelint_代码规范

css样式的书写顺序及原理——很重要!很重要!很重要!为什么重要???概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint还想知道更多为什么可以参考:https://blog.csdn....

CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使
CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使

有些人极为讨厌CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于JavaScript,而是属于CSS,并且CSS...

2023-10-22 12:17 gowuye

取消回复欢迎 发表评论: