Trac-NoPreview Chrome Extension

WHY

公司用Trac作为管理系统。修改Ticket,或者提交工作日志时,总需要先预览才能提交(应该是有权限的人设置的),为了方便自己使用,就花了点时间写了一个浏览器插件,可以不经过预览就提交,顺便学习下Chrome插件的开发。

HOW

先研究下不用插件怎么实现,现在的情况是不Preview的话,Submit changes的按钮是灰色的,嗯那就应该只是将按钮设为disable了。嗯F12,去掉disabled果然可以直接提交了。那么现在插件要做的事情只是将disabled设为false就可以了。然后查看几个页面发现他们有共同的class="trac-disable-on-submit".

IMG

然后我们来看看Chrome插件的官方文档。概述 overview(可能需要穿越屏障).

简单来说分为以下几个部分

  • Manifest : 指定图标,脚本文件位置,插件描述(版本,作者)
  • Background Script : 后台脚本(目前没用到)
  • UI Elements : 插件的页面,可简单,可复杂
  • Content Script : 要执行的 javaScript 代码
  • Options Page : 插件的配置页面(目前没用到)

上述内容,对照着图更好理解(放到了自己的图床上,应该都可以看到了)

IMG

Code

内容并不多,就把所以代码都粘上来了。

manifest.json

manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
"manifest_version": 2,
"name": "Trac-NoPreview",
"version": "1.0.0.0",
"description": "For Trac No Preview Submit",
"icons": {
"16": "images/trac16.png",
"32": "images/trac32.png",
"48": "images/trac48.png",
"128": "images/trac128.png"
},
"browser_action": {
"default_icon": {
"16": "images/trac16.png",
"32": "images/trac32.png",
"48": "images/trac48.png",
"128": "images/trac128.png"
},
"default_popup": "index.html"
},
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": [
"https://trac.edgewall.org/*"
],
"js": [
"contentScript.js"
]
}
],
"author": "Alec.Ji"
}

应该只有permissionscontent_scripts 这两部分不是能直接感受,单独说下,其他都好理解。

index.html

index.html
1
2
3
4
5
<html>
<img src="images/trac128.png">
<p>By Alec.ji</p>
<img src="images/Wechat.png">
</html>

contentScript.js

1
2
3
4
5
6
var elements = document.getElementsByClassName("trac-disable-on-submit");
if (elements.length > 0) {
elements[0].disabled = false;
elements[0].value += "(Trac-NoPreview)";
console.log("Trac-NoPreview Success");
}

Install

  1. 用Chrome访问 chrome://extensions/ 或者用 Edge(chrome内核)访问 edge://extensions/
  2. 打开开发者模式
  3. 选择加载已解压的扩展程序,选择 Trac-NoPreview 文件夹,确认即可
  4. 打开一个Ticket的页面,看看效果。

IMG 懂我的意思吧 :smile: ,等我攒够了钱我就提交到chrome 商店(感谢 X,呼呼小笼包,R,一只鱼,Barry.shi 的打赏)。

Result

效果如图,已经好用了

IMG

还想要实现的

  • 支持登录,跟踪 Ticket

  • 提醒写日志

  • 批量处理ticket, 修改状态,owner

一点小感悟

经过自己学习开发才知道,chrome插件的强大。便利的同时,也感觉到了危险,如果给了足够的权限,插件能做的事情相当多,所以对于不确认安全的还是要慎用。

项目地址

github

REF

评论