0. 话说
作为一名半步入管理的程序老猿，使用了多年的项目管理工具是集成的 Redmine[1]，虽然用的不是很精深，但对于经常使用的一般功能，都已习惯了，现在的团队中使用 Worktile[2]，迁移嘛就多少有点学习成本，这都没啥，但它的弹窗必须吐槽，实在不便。
（以上两管理工具简介就不多说了，想了解的，见文末脚注已附链接地址）
锤子在手，钉子到处都有
--码路工人
于是，为了方便大家，也顺便方便自己，做了一个极为简单的 Chrome 插件，顺手解决了这个弹出难用的问题。
1. 简介
本插件为 Chrome 浏览器插件，使用本插件能够将 worktile 中的弹窗变为全屏显示。
2. 开发背景
虽然很少使用 worktile ，但还是忍受不了：太难用了
改变不了要使用它的现状，那就改变一下它吧~
2.1 解决痛点：
弹窗尺寸小，内容展示不足
大部分时候 bug 都是贴几张图，弹窗里缩放了，需要点开放大了看
而关闭图片时，很容易造成连 bug 内容弹窗都被关掉点弹窗外部，会不小心关闭弹窗
当有在编辑评论时，关闭后编辑的内容就消失掉了，体验非常糟糕
2.2 原理：
写几个样式，使 worktile中的弹窗全屏化通过制作 Chrome 浏览器插件给 worktile网站插入自己想要的样式
3. 使用
3.1 加载插件
根据上图指示打开扩展程序页面，或者直接在 chrome 地址栏输入：
chrome://extensions/
点击【加载已解压的扩展程序】按钮，选择扩展程序目录文件夹，即下图中的：
worktile-fullscreen-crx
加载出来之后如下图：
不用的话可以点【移除】，也可以点开关，关闭即可停用。
3.2 使用效果
未使用插件前，原页面是这样的：
通知弹窗
使用插件后：
弹窗变全屏
仍可用 ESC 键关闭
通知弹窗 
包括以下的大部分弹窗都会被改全屏：
通知弹窗 通知弹窗内的任务通知弹窗 通知弹窗内的提测通知弹窗 任务页面内的所有弹窗
如果还有漏掉的场景，可自行修改
4. 源码
Gitee 地址：
worktile-fullscreen-crx[3]
源码实现非常简单，顺便简单介绍 Chrome 扩展程序（即浏览器插件）的基本知识。
实现过程
两个文件 配置文件：manifest.json （固定命名） 脚本文件：xxx.js (随意命名)
目录结构 |——worktile-fullscreen-crx
|——js
| |——inject.js
|——manifest.json文件内容
manifest.json
{
"name": "FullscreenWorktileDialog",
"manifest_version": 2,
"version": "1.0",
"description": "Make dialogs in worktile full-screen, for easier using.",
"page_action":{},
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": ["https://ptxd.worktile.com/*"],
"js": ["js/inject.js"],
"run_at":"document_end"
}
]
}
简要解释下，
manifest_version: 固定 2 content_scripts: 插入到页面里执行的脚本配置 matches：正则匹配地址栏里的 url js：要插入的 js 文件 run_at：实行时机（例子中为文档加载完成后）
inject.js
;(function () {
'use strict'
const overrideStyle = `
.modal-dialog {
margin: 0;
}
.modal-content,
.dialog-overlay-pane {
100vw !important;
min-height: 100vh !important;
}
.modal-detail-wrap {
height: 100vh;
}
`
const styleSheet = document.createElement('style');
styleSheet.innerHTML = overrideStyle;
document.head.appendChild(styleSheet);
})();
简单几句入门级代码，即可实现想要的效果。
这应该是最简单一个浏览器插件了。
使用过浏览器插件的人应该不在少数，程序员做开发也是经常用到插件工具，其实稍微了解一下 Chrome 插件开发，即可做个小工具满足日常生活中小需求，提升工作生活幸福感。
前一阵子，不刚就有一个抢茅台的插件火爆网络了嘛。
回到本文开头关于锤子的谚语，
原意是说学习掌握某项技能后，总想着使用套用，我把它曲解一下：
如果手上没有锤子（知识、技能、工具），当你遇到钉子（问题、需求）就会手足无措毫无办法； 如果手上有锤子钳子扳手卡钳螺丝刀等一整套完备的工具箱，那遇到什么样的问题，总能够迎刃而解。 知识储备量足够大，视野够开阔，解决问题的思路办法才能足够多。
所以，
多学习，勿自满，
保持空杯心态，学习使你快乐
别一个人闷头学，有时候，多交流下，相互学习不错的。
5. 末笔
虽然，这个简单的连玩具也算不上，我还是整理出这篇短文，也许就对某个读者在工作学习生活上有一丁点的启发呢。
鄙人不才没有太大的能力，还没有做出过产品级的个人项目，早年还造过一个个人用的插件，略微提一下献个丑。
背景：
内人去到一家小微公司，有一个系统，工作过程中需要用它查找一些历史数据复用，然后登记在新记录中（参考？）
可能用的某云最便宜的套餐，查询极慢，最卡的时候翻页甚至等10几秒
这样就会有一部分体力活非常耗费时间效率低下
其实很明显，他们没有源码，只是用还没人维护，如果有源码在工程里很容易实现根本不需要费劲做插件目标：
目标就是解放双手，让耗时费力的体力活自动化。
当时考虑过两个方向：通过测试工具（就是那种可以记录页面操作，自动化执行的），或者写浏览器插件，从实际角度触发选择了后者。算是一点难点吧：
针对每一页的数据做检索和提取 翻页中需要确保已正常加载的时点（每次翻页到加载完都要正确的监测到再继续任务，否则就出错了） 定位页内元素困难（框架生成的代码，基本没有id，类名都是加的数字顺序号不一定多少，需要找到相对稳定可靠的元素路径） 提交数据的时候，模拟点击事件没有作用（手动操作看起来点的那个元素，就模拟它click了，实际上并不能执行相关函数，而且只能通过触发框架里的函数来实现，而插件的脚本js因安全隔离并不能直接访问页面里的变量及函数，作用域并不打通 => 通过给页面里注入js来实现了内部调用解决了问题）
多年前写的了，大概也就记得这些，晚上熬夜写的，用上后内人省下的时间可以在家看娃，嗨皮。直到那套老旧系统退役，服务了两三年，超值了。
我是码路工人，锤过之后，看到钉子，就还想锤。
码路工人：
中年程序猿，原产地民办三本外语系，多年开发经验，曾就职于某日资外企，负责过桌面端与Web前后端开发，后在国内半互联网公司搞前端。
码路工人公众号原创作者。
参考资料
Redmine: 开源的、基于Web的项目管理和缺陷跟踪工具，http://www.redmine.org.cn/
[2]Worktile: 企业协作办公平台，https://worktile.com/
[3]worktile-fullscreen-crx: https://gitee.com/coder-monkey/worktile-fullscreen-crx.git