woktile中弹窗全屏化插件

0. 话说

作为一名半步入管理的程序老猿，使用了多年的项目管理工具是集成的 Redmine[1]，虽然用的不是很精深，但对于经常使用的一般功能，都已习惯了，现在的团队中使用 Worktile[2]，迁移嘛就多少有点学习成本，这都没啥，但它的弹窗必须吐槽，实在不便。
（以上两管理工具简介就不多说了，想了解的，见文末脚注已附链接地址）

锤子在手，钉子到处都有

--码路工人

于是，为了方便大家，也顺便方便自己，做了一个极为简单的 Chrome 插件，顺手解决了这个弹出难用的问题。

1. 简介

本插件为 Chrome 浏览器插件，使用本插件能够将 worktile 中的弹窗变为全屏显示。

2. 开发背景

虽然很少使用 worktile ，但还是忍受不了：太难用了
改变不了要使用它的现状，那就改变一下它吧~

2.1 解决痛点：

  • 弹窗尺寸小，内容展示不足
    大部分时候 bug 都是贴几张图，弹窗里缩放了，需要点开放大了看
    而关闭图片时，很容易造成连 bug 内容弹窗都被关掉

  • 点弹窗外部，会不小心关闭弹窗
    当有在编辑评论时，关闭后编辑的内容就消失掉了，体验非常糟糕

2.2 原理：

  • 写几个样式，使 worktile 中的弹窗全屏化
  • 通过制作 Chrome 浏览器插件给 worktile 网站插入自己想要的样式

3. 使用

3.1 加载插件

image.png
根据上图指示打开扩展程序页面，或者直接在 chrome 地址栏输入：

chrome://extensions/


点击【加载已解压的扩展程序】按钮，选择扩展程序目录文件夹，即下图中的：

worktile-fullscreen-crx

image.png

加载出来之后如下图：
image.png

不用的话可以点【移除】，也可以点开关，关闭即可停用。

3.2 使用效果

未使用插件前，原页面是这样的：

  • 通知弹窗
    image.png

使用插件后：

弹窗变全屏
仍可用 ESC 键关闭

  • 通知弹窗 image.png

包括以下的大部分弹窗都会被改全屏：

  • 通知弹窗
  • 通知弹窗内的任务通知弹窗
  • 通知弹窗内的提测通知弹窗
  • 任务页面内的所有弹窗

如果还有漏掉的场景，可自行修改

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 {
        width: 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来实现了内部调用解决了问题）

多年前写的了，大概也就记得这些，晚上熬夜写的，用上后内人省下的时间可以在家看娃，嗨皮。直到那套老旧系统退役，服务了两三年，超值了。

我是码路工人，锤过之后，看到钉子，就还想锤。

--END--
关 于

码路工人：

中年程序猿，原产地民办三本外语系，多年开发经验，曾就职于某日资外企，负责过桌面端与Web前后端开发，后在国内半互联网公司搞前端。
码路工人公众号原创作者。

码路工人公众号
码路工人公众号

参考资料

[1]

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
欢迎交流斧正点赞转发

posted on 2021-01-24 02:28  CoderMonkey  阅读(238)  评论(0)  编辑  收藏  举报

导航