发表更新Chrome Extensions6 分钟读完 (大约866个字)

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
36
{
  "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"
}

应该只有permissions ，content_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

Trac-NoPreview Chrome Extension

https://blog.jichao.top/2019/05/07/Chrome-Extensions/

作者

Alec.ji

发布于

2019-05-07

更新于

2021-11-01

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

最新文章

×