快捷操作插件 – 项目介绍(下)

  • 2022-10-06
  • 297
  • 0

一、项目背景

在日常开发测试中,为了构造、复现某些场景,经常需要耗费大量的时间注册、登陆账号。同时账号数据、状态构造繁琐,因此可以实现一款工具实现一些繁琐的日常操作,从而提高工作效率。相比于搭建另一款web应用用于辅助,浏览器插件具有可以注入目标页面的特性,更易于获得原页面数据、操作目标页面。提供外部了打通到目标页面,完成通信交互的渠道。

二、项目目标

  • 提供快速替换登陆账号、快速跳转不同地区环境的快捷操作
  • 提供便利的当前账号 uid、cookie获取方法
  • 提供自定义指令配置入口
  • 提供便捷的自定义请求配置入口
  • 提供快捷修改redis功能 以达到更改账号状态、数据
  • 请求、响应代理功能 – 用于修改、记录、展示请求链路

三、项目架构

相较于原生js,利用成熟的框架开发效率更高效且更易于维护。项目采用Vue 框架搭建,分别构造谷歌插件所需的popup、options以及content 模块。

  • popup部分为用户的主要操作界面 主要负责读取options中的配置内容,根据相关操作,发起对应请求/事件
  • options为插件相关配置设置 主要提供配置的展示、修改、保存等操作
  • content部分为注入至目标页面中的部分,该部分会注入目标页面,该模块执行操作视为目标网页的操作,content中写入的监听器会根据popup发出的事件执行对应方法:包括执行js语句、读取页面信息、请求相关接口等。

 

四、项目目录介绍

/api 中可编写请求用到的接口信息
/content/index.js 会在运行后注入到目标页面中,注入完成后可执行多种操作,如读写cookie,执行js语句,创建元素等等操作。其action_xxx方法执行会视作目标网页操作。
/popup 为插件弹出页面设置
/options 为插件设置页
/api 中可编写请求用到的接口信息
/content/index.js 会在运行后注入到目标页面中,注入完成后可执行多种操作,如读写cookie,执行js语句,创建元素等等操作。其action_xxx方法执行会视作目标网页操作。
/popup 为插件弹出页面设置
/options 为插件设置页

五、存储与事件

实际上popup页面、options页面和注入目标页面的content相互独立,实现页面之间的存储与通信采用以下方法:
存储:

chrome.storage.sync.set(k,v)
chrome.storage.sync.get(k)

实际运行中,将账号信息存储在浏览器缓存中

事件:

在用戶的可操作页面中(popup页面)会根据用户操作组织数据,并向连接中发送对应事件和数据,content已被注入目标页面,并且监听连接中的事件,执行对应事件的具体操作,从而改变目标页面状态。


 

评论

还没有任何评论,你来说两句吧

苟活时长: Copyright © 2019-2020 OJO