同事看到我填写bug原因的表单, 惊呆了, 那么多字段怎么自动填充了?

在敏捷开发协作工具中, 公司会要求在关闭bug的时候必须填写一些字段. 其实每次填写的内容都一样的, 要选择bug原因, 是否选择, 填写根因等.

同事在旁边看我关闭了个bug, 看到我的表单是自动填充的, 就问我咋那么方便呢?

实现难度非常简单, 而在日常工作中非常有用, 并且有点小帅. 所以分享给大家.

用什么工具来修改你的网页

我选择的是arc浏览器的boost功能. 在网页上新建一个boost, 点击code, 选到js的tab就可以把编写的js插入到当前host的网页里运行了. 还有辅助功能zag可以帮你抓dom.

对于没有用arc浏览器的大家, 可以写一个chrome extension, 只需要使用content_scripts功能, 可以实现和arc的boost类似的功能: match网址url并且加载一段js. (其实功能是比arc多且灵活的)

修改jira页面

jira是个必须用, 且很多重复操作的网站. 我做了这些修改:

站会看板过滤器顺序调整

每天站会轮到的人的顺序和jira看板上不一致, 导致站会轮下一个人的时候得去找下一个人的位置. 只要获取一下看板过滤器, 调整一下子元素就行了.

js 复制代码
const container = document.getElementsByClassName('aui-expander-content ghx-quick-content')[0]
container.children[6].remove()
container.children[10].remove()
container.children[6].after(container.children[2])
container.children[9].after(container.children[1])

看板过滤器多选改单选

jira看板的过滤器是多选的, 所以切换下一个人的时候必须把前一个人取消了, 这样每次都多一次操作.

我们只要给每个过滤器加一个点击事件, 把其他active的过滤器都点击一下就行了.

js 复制代码
let child = null
container.onclick = function (e) {
  if (child) return
  child = e.target
  for (let i = 0;i < container.children.length; i++) {
    if (container.children[i].children[0] && container.children[i].children[0].classList.contains('ghx-active') && container.children[i].children[0].innerHTML !== child.innerHTML) {
      container.children[i].children[0].click()
    }
  }
  child = null
}

关闭bug的时候必须填写原因

公司有个规定, 关闭jira必须填写一些字段. 其实每次填写的内容都一样的, 自动填写可以节省非常多时间.

实现也非常简单, 定时器来寻找指定dom, 然后为这些dom附上指定的值.

js 复制代码
const setInputValue = (id, value) => {
  if (document.getElementById(id)) {
    document.getElementById(id).value = value
  }
}

setInterval(() => {
setInputValue('resolution', 10000)
setInputValue('customfield_10903', 12502)
setInputValue('customfield_12301', `故障原因:代码错误
解决方式:修复
影响范围:界面
故障处理人:yo-cwj.com`)
}, 1000)

获取vue应用的实例来修改界面

老婆画了几套微信表情, 于是我经常登录上去看数据.

但dashboard上信息很少, 需要点到每个表情的详情中才能查看.

通过网络请求, 我看到其实在dashboard的界面, 数据已经请求到了, 于是开始我们的修改.

从dom中寻找vue实例

通过基础的vue知识, 我们知道vue实例是会挂在dom上的.

(vue作者说可以认为他是可用的, 因为vue的devtool也是依赖这个特性的, 那我们一个小脚本是更可用了)

那么哪些dom上有vue实例, 有点像个面试题, 写个简单的脚本就可以找到:

js 复制代码
let traverse = (dom) => {
    if (dom.__vue__) {
        console.log(dom.__vue__._data)
    }
    for (let i = 0; i < dom.children.length; i++) {
        traverse(dom.children[i])
    }
}
traverse()

找到目标数据所在的dom, 正式的脚本就这样获取vue实例就可以了.

编写脚本

首先通过vue实例的_data属性获取到数据:

js 复制代码
const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;

然后把数据贴到对应的dom上:

js 复制代码
const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');
for (let i = 0; i < emotion_dom.children.length; i++) {
	emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`
}

到这里脚本就写完了, 其他的vue应用其实还可以调用vue实例中的方法获取数据, 或自己获取数据放进vue实例.

解决执行环境的问题

但把这段代码放到boost中会出现拿不到dom的\_\_vue\_\_实例的问题, 因为boost和chrome extension的执行环境并不是浏览器执行环境. 可以通过创建script并执行的方式.

js 复制代码
let script = document.createElement('script');
script.textContent = "const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;" +
  "const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');" +
  "for (let i = 0; i < emotion_dom.children.length; i++) {" +
  " emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`" +
  "}";
setTimeout(() => {
  document.documentElement.appendChild(script);
}, 1000)
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试