一种支持多账号切换的chrome插件设计方法及装置与流程

1.本发明涉及网络技术领域，具体提供一种支持多账号切换的chrome插件设计方法及装置。


背景技术：

2.在平时项目日常开发或者测试过程中，经常会遇到这样的场景：平台支持不同的账户登录，针对不同账户，有不同的权限，会展示不同的路由(页面)或者隐藏部分功能，开发人员在自测或者测试人员在测试的时候，需要频繁切换多个账号，来测试不同的功能，这就让开发或者测试人员反复在登录页面输入不同的账号密码，也需要我们维护额外的账号文档。
3.除此之外，传统浏览器存储账号的方式是将账号等信息缓存在浏览器缓存中，一旦清空缓存，就会导致账户信息丢失，会给开发者或使用者造成很大的困扰。


技术实现要素：

4.本发明是针对上述现有技术的不足，提供一种实用性强的支持多账号切换的chrome插件设计方法
5.本发明进一步的技术任务是提供一种设计合理，安全适用支持多账号切换的chrome插件设计装置。
6.本发明解决其技术问题所采用的技术方案是：
7.一种支持多账号切换的chrome插件设计方法，具有如下步骤:
8.s1、利用chrome插件，将dom元素直接注入到目标登录页面；
9.s2、将react代码进行chrome插件化配置，并通过chrome://extensions/进行插件安装，并利用extensions reloader进行插件重载。
10.进一步的，在步骤s1中，进一步包括：
11.s101、首先利用原生javascript对登录页面进行dom操作；
12.s102、实现填充表单内容，并一键登录。
13.进一步的，在步骤s101中，通过getelementsbyname的原生api获取名为username的输入框dom元素，如果所述dom元素存在，就在左侧加载插件accountpanel。
14.进一步的，在步骤s102中，需要通过getelementbyid的原生api，获取用户表单中id为username和password的dom元素，之后需要通过state账号记录表查询出输入用户名对应的密码，并通过创建input的event事件，进行用户名和密码的数据回填，最终通过模拟点击登录按钮实现一键登录系统。
15.进一步的，在步骤s2中，进一步的包括：
16.s201、搭建chrome插件包目录结构；
17.s202、配置mainfest.json插件清单文件；
18.s203、配置webpack，打包项目，需额外配置插件。
19.进一步的，在步骤s201中，插件包内容包括readme.md文件，用于描述工具的使用方法和具体描述；
20.package.json文件用于描述插件的包信息；src文件夹下需要放置chrome插件的必备文件，包括assets文件夹，用于存放插件的logo；contentscript文件夹用于存放对web文件的操作；manifest.json用于描述chrome extension的清单文件；popup文件夹用于存放具体的插件代码；webpack.config.js文件用于描述插件使用webpack打包时的配置。
21.进一步的，在步骤s202中，其中各个字段含义为：name表示插件的名称，description表示插件的描述信息，version表示插件的版本，manifest_version表示浏览器版本，icons表示插件显示在浏览器的图片配置，不同尺寸支持不同适配，browser_icon表示插件加载在浏览器右上角时的图标，default_title表示插件hover时的提示文字，default_popup默认点击图标时弹出的浮层页面。
22.进一步的，在步骤s203中，htmlwebpackplugin插件用于在html中插入打包的js文件，hotmodulereplacementplugin插件用于编辑后文件的热替换，cleanwebpackplugin用于打包之前的文件清理，copywebpackplugin插件用于复制文件到打包目录中。
23.一种支持多账号切换的chrome插件设计装置，包括：至少一个存储器和至少一个处理器；
24.所述至少一个存储器，用于存储机器可读程序；
25.所述至少一个处理器，用于调用所述机器可读程序，执行一种支持多账号切换的chrome插件设计方法。
26.本发明的一种支持多账号切换的chrome插件设计方法及装置和现有技术相比，具有以下突出的有益效果：
27.本发明在chrome浏览器中安装插件后，可以系统的网页内容进行读取，并通过原生api进行插件浮层的注入，并通过读取登录表单的dom结构，进行账户信息回填和一键登录。
28.利用浏览器插件技术、进行多账户管理并支持一键登录，用户无需额外维护平台账户信息，支持使用多标签标记不同的账号角色或权限，支持数据永久存储，避免数据丢失。使用本插件可以提升用户体验、高效工作、提升数据可靠性。
附图说明
29.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
30.附图1是一种支持多账号切换的chrome插件设计方法的使用流程图；
31.附图2是一种支持多账号切换的chrome插件设计方法的设计框图。
具体实施方式
32.为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全
部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。
33.下面给出一个最佳实施例：
34.如图1-2所示，本实施例中的一种支持多账号切换的chrome插件设计方法，具有如下步骤：
35.s1、利用chrome插件，将dom元素直接注入到目标登录页面；
36.chrome插件既然可以访问web内容，就可以不使用弹窗，直接识别登录页面，在原有登录页面的空白位置插入dom元素，并将用户曾经配置过的账户表进行展示，一键登录，替代用户手动操作。
37.进一步包括：
38.s101、首先需要利用原生javascript对登录页面进行dom操作；
39.通过getelementsbyname的原生api获取名为username的输入框dom元素，如果该dom存在，就在其左侧加载我们的插件accountpanel。
40.具体代码为：
41.const{domain}＝document；
42.const userdom＝document.getelementsbyname('username')[0]；
[0043]
if(userdom)
[0044]
const body＝document.getelementsbytagname('body)[0]；
[0045]
const panelwrapper＝document.createelement(div)
[0046]
reactdom.render(《accountpanel/》,panelwrapper)；
[0047]
body.append(panelwrapper)；
[0048]
s102、实现填充表单内容，并一键登录；
[0049]
首先，需要通过getelementbyid的原生api，获取用户表单中id为username和password的dom元素，之后需要通过state账号记录表查询出输入用户名对应的密码，并通过创建input的event事件，进行用户名和密码的数据回填，最终通过模拟点击登录按钮实现一键登录系统。
[0050]
代码为：
[0051]
const usernamedom＝document.getelementbyid(username)；
[0052]
const passworddom＝document.getelementbyid(password)；
[0053]
const{accountlist}＝this.state；
[0054]
const{username,password}＝
[0055]
accountlist.find((item)＝》item.username＝＝＝handleusername)；
[0056]
const evt＝new event('input',{bubbles:true})；
[0057]
数据回填：
[0058]
usernamedom.value＝username；
[0059]
usernamedom.dispatchevent(evt)；
[0060]
passworddom.value＝password；
[0061]
passworddom.dispatchevent(evt)；
[0062]
模拟用户点击登录按钮：
[0063]
const loginbtn＝document.getelementsbyclassname('login-btn')0.[0064]
loginbtn.click()；
[0065]
s2、将react代码进行chrome插件化配置，并通过chrome://extensions/进行插件安装，并利用extensions reloader进行插件重载；
[0066]
进一步包括：
[0067]
s201、搭建chrome插件包目录结构；
[0068]
插件包内容包括readme.md文件，用于描述该工具的使用方法，具体描述等；package.json文件用于描述插件的包信息，比如需要安装的依赖，以及包版本等；src文件夹下需要放置chrome插件的必备文件，包括assets文件夹，用于存放插件的logo；contentscript文件夹用于存放对web文件的操作；manifest.json用于描述chrome extension的清单文件；popup文件夹用于存放具体的插件代码；webpack.config.js文件用于描述该插件使用webpack打包时的配置。
[0069]
代码为：
[0070]
readme.md；
[0071]
package.json；
[0072]
src；
[0073]
assets；
[0074]
contentscript；
[0075]
manifest.json；
[0076]
popup；
[0077]
webpack.config.js；
[0078]
s202、配置mainfest.json插件清单文件；
[0079]
其中各个字段含义为：name表示该插件的名称，description表示该插件的描述信息，version表示该插件的版本，manifest_version表示需要支持的浏览器版本，icons表示该插件显示在浏览器的图片配置，不同尺寸支持不同适配，browser_icon表示插件加载在浏览器右上角时的图标，default_title表示插件hover时的提示文字，default_popup默认点击图标时弹出的浮层页面。
[0080]
代码为：
[0081]
"name":"accountmanager",
[0082]
"description":"",
[0083]
"version":"1.0",
[0084]
"manifest_version":2,
[0085]
"icons":{
[0086]
"16":"./assets/icon.png" >[0087]
"48":"./assets/icon.png" >[0088]
"96":"./assets/icon.png" >[0089]
"128":"./assets/icon.png" >[0090]
"browser_action":{
[0091]
"default_icon":"/assets/icon.png" >[0092]
"default_title":"",
[0093]
"default_popup":"/index.html"
[0094]
"permissions":["tabs","activetab","storage","notifications"],
[0095]
"background":{
[0096]
"persistent":false,
[0097]
"scripts":["./background.js"]
[0098]
"content_security_policy":"script-src'self''unsafe-eval'；object-src'self'",
[0099]
"content_scripts":[{
[0100]
"matches":["http://","https://"],
[0101]
"js":["/popuplistener.js"],
[0102]
"run at":"document_idle"
[0103]
s203、配置webpack，打包项目，需额外配置插件；
[0104]
htmlwebpackplugin插件用于在html中插入打包的js文件，hotmodulereplacementplugin插件用于编辑后文件的热替换，cleanwebpackplugin用于打包之前的文件清理，copywebpackplugin插件用于复制文件到打包目录中；
[0105]
代码为：
[0106]
plugins:[
[0107]
new htmlwebpackplugin({
[0108]
template:"./popup/index.html",
[0109]
inject:true,
[0110]
chunks:["popup"],
[0111]
filename:"popup.html"
[0112]
new webpack.hotmodulereplacementplugin(),
[0113]
new cleanwebpackplugin(["/dist","/zip"]),
[0114]
new copywebpackplugin([
[0115]
from:"assets",
[0116]
to:"assets"
[0117]
from:"manifest.json",
[0118]
to:"manifest.json",
[0119]
flatten:true
[0120]
基于上述方法，本实施例中的一种支持多账号切换的chrome插件设计装置，包括：至少一个存储器和至少一个处理器；
[0121]
所述至少一个存储器，用于存储机器可读程序；
[0122]
所述至少一个处理器，用于调用所述机器可读程序，执行一种支持多账号切换的chrome插件设计方法。
[0123]
上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种支持多账号切换的chrome插件设计方法及装置权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应
落入本发明的专利保护范围。
[0124]
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。