一种支持多账号切换的chrome插件设计方法及装置制造方法及图纸

本发明专利技术涉及网络技术领域，具体提供了一种支持多账号切换的chrome插件设计方法，具有如下步骤：S1、利用Chrome插件，将DOM元素直接注入到目标登录页面；S2、将React代码进行Chrome插件化配置，并通过chrome://extensions/进行插件安装，并利用Extensions Reloader进行插件重载。与现有技术相比，本发明专利技术在Chrome浏览器中安装插件后，可以系统的网页内容进行读取，并通过原生API进行插件浮层的注入，并通过读取登录表单的DOM结构，进行账户信息回填和一键登录。一键登录。一键登录。

【技术实现步骤摘要】
一种支持多账号切换的chrome插件设计方法及装置


[0001]本专利技术涉及网络
，具体提供一种支持多账号切换的chrome插件设计方法及装置。

技术介绍

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

技术实现思路

[0004]本专利技术是针对上述现有技术的不足，提供一种实用性强的支持多账号切换的chrome插件设计方法
[0005]本专利技术进一步的技术任务是提供一种设计合理，安全适用支持多账号切换的chrome插件设计装置。
[0006]本专利技术解决其技术问题所采用的技术方案是：
[0007]一种支持多账号切换的chrome插件设计方法，具有如下步骤:
[0008]S1、利用Chrome插件，将DOM元素直接注入到目标登录页面；
[0009]S2、将React代码进行Chrome插件化配置，并通过chrome://extensions/进行插件安装，并利用Extensions Reloader进行插件重载。/>[0010]进一步的，在步骤S1中，进一步包括：
[0011]S101、首先利用原生JavaScript对登录页面进行DOM操作；
[0012]S102、实现填充表单内容，并一键登录。
[0013]进一步的，在步骤S101中，通过getElementsByName的原生API获取名为username的输入框DOM元素，如果所述DOM元素存在，就在左侧加载插件AccountPanel。
[0014]进一步的，在步骤S102中，需要通过getElementById的原生API，获取用户表单中id为username和password的DOM元素，之后需要通过state账号记录表查询出输入用户名对应的密码，并通过创建input的Event事件，进行用户名和密码的数据回填，最终通过模拟点击登录按钮实现一键登录系统。
[0015]进一步的，在步骤S2中，进一步的包括：
[0016]S201、搭建Chrome插件包目录结构；
[0017]S202、配置mainfest.json插件清单文件；
[0018]S203、配置webpack，打包项目，需额外配置插件。
[0019]进一步的，在步骤S201中，插件包内容包括readme.md文件，用于描述工具的使用方法和具体描述；
[0020]package.json文件用于描述插件的包信息；src文件夹下需要放置Chrome插件的必备文件，包括assets文件夹，用于存放插件的logo；contentScript文件夹用于存放对web文件的操作；manifest.json用于描述Chrome Extension的清单文件；popup文件夹用于存放具体的插件代码；webpack.config.js文件用于描述插件使用webpack打包时的配置。
[0021]进一步的，在步骤S202中，其中各个字段含义为：name表示插件的名称，description表示插件的描述信息，version表示插件的版本，manifest_version表示浏览器版本，icons表示插件显示在浏览器的图片配置，不同尺寸支持不同适配，browser_icon表示插件加载在浏览器右上角时的图标，default_title表示插件hover时的提示文字，default_popup默认点击图标时弹出的浮层页面。
[0022]进一步的，在步骤S203中，HtmlWebpackPlugin插件用于在html中插入打包的js文件，HotModuleReplacementPlugin插件用于编辑后文件的热替换，CleanWebpackPlugin用于打包之前的文件清理，CopyWebpackPlugin插件用于复制文件到打包目录中。
[0023]一种支持多账号切换的chrome插件设计装置，包括：至少一个存储器和至少一个处理器；
[0024]所述至少一个存储器，用于存储机器可读程序；
[0025]所述至少一个处理器，用于调用所述机器可读程序，执行一种支持多账号切换的chrome插件设计方法。
[0026]本专利技术的一种支持多账号切换的chrome插件设计方法及装置和现有技术相比，具有以下突出的有益效果：
[0027]本专利技术在Chrome浏览器中安装插件后，可以系统的网页内容进行读取，并通过原生API进行插件浮层的注入，并通过读取登录表单的DOM结构，进行账户信息回填和一键登录。
[0028]利用浏览器插件技术、进行多账户管理并支持一键登录，用户无需额外维护平台账户信息，支持使用多标签标记不同的账号角色或权限，支持数据永久存储，避免数据丢失。使用本插件可以提升用户体验、高效工作、提升数据可靠性。
附图说明
[0029]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0030]附图1是一种支持多账号切换的chrome插件设计方法的使用流程图；
[0031]附图2是一种支持多账号切换的chrome插件设计方法的设计框图。
具体实施方式
[0032]为了使本
的人员更好的理解本专利技术的方案，下面结合具体的实施方式对本专利技术作进一步的详细说明。显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全
部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本专利技术保护的范围。
[0033]下面给出一个最佳实施例：
[0034]如图1
‑
2所示，本实施例中的一种支持多账号切换的chrome插件设计方法，具有如下步骤：
[0035]S1、利用Chrome插件，将DOM元素直接注入到目标登录页面；
[0036]Chrome插件既然可以访问web内容，就可以不使用弹窗，直接识别登录页面，在原有登录页面的空白位置插入DOM元素，并将用户曾经配置过的账户表进行展示，一键登录，替代用户手动操作。
[0037]进一步包括：
[0038]S101、首先需要利用原生JavaScript对登录页面进行DOM操作；
[0039]通过getElementsByName的原生AP本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种支持多账号切换的chrome插件设计方法，其特征在于，具有如下步骤:S1、利用Chrome插件，将DOM元素直接注入到目标登录页面；S2、将React代码进行Chrome插件化配置，并通过chrome://extensions/进行插件安装，并利用Extensions Reloader进行插件重载。2.根据权利要求1所述的一种支持多账号切换的chrome插件设计方法，其特征在于，在步骤S1中，进一步包括：S101、首先利用原生JavaScript对登录页面进行DOM操作；S102、实现填充表单内容，并一键登录。3.根据权利要求2所述的一种支持多账号切换的chrome插件设计方法，其特征在于，在步骤S101中，通过getElementsByName的原生API获取名为username的输入框DOM元素，如果所述DOM元素存在，就在左侧加载插件AccountPanel。4.根据权利要求3所述的一种支持多账号切换的chrome插件设计方法，其特征在于，在步骤S102中，需要通过getElementById的原生API，获取用户表单中id为username和password的DOM元素，之后需要通过state账号记录表查询出输入用户名对应的密码，并通过创建input的Event事件，进行用户名和密码的数据回填，最终通过模拟点击登录按钮实现一键登录系统。5.根据权利要求4所述的一种支持多账号切换的chrome插件设计方法，其特征在于，在步骤S2中，进一步的包括：S201、搭建Chrome插件包目录结构；S202、配置mainfest.json插件清单文件；S203、配置webpack，打包项目，需额外配置插件。6.根据权利要求5所述的一种支持多账号切换的chrome插件设计方法，其特征在于，在步骤S201中，插件包内容包括readme.md文件，用...

【专利技术属性】
技术研发人员：张雯，
申请(专利权)人：浪潮软件集团有限公司，
类型：发明
国别省市：