技术

Chrome插件开发之录入随机信息

微信扫一扫,分享到朋友圈

Chrome插件开发之录入随机信息
0 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

另外,还有批量生成模拟信息的页面 模拟个人信息测试用

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

智能写诗云开发小程序开发流程

上一篇

【爬坑日记】linux vscode 保存 "index.vue"失败: 权限不足。选择 "以超级用户身份重试" 以超级用户身份重试。

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      Chrome插件开发之录入随机信息

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫