给老爸开发一个 Chrome 插件 - 网上订烟助手

2018-05-11

背景：
爸妈在老家经营小商店，平时需要在网上订购香烟。
因为二老文化水平低，再加上订烟系统的用户体验差劲，无法自学使用。
老版本的订烟系统手把手教过我爸使用了，可是丫的中烟最近系统更新了，与其说更新，不如说是降级，垃圾的用户体验比上一版更差劲。
爸妈不会订了，只能每次 call 我远程订烟。
两百多种香烟中只有 20 多种是可订购的，然而官方没有过滤功能，也没有显示哪些可订，每次只能每一条记录点一下才能触发请求可订购量，再将可订购的加入购入车。
我忍不住去用户反馈中心吐槽，写了半天的建议，居然提交不了，提交不了..（黑人问号脸 what ？？？）

忍无可忍，无需再忍
自己写一个插件优化用户体验

>>> 插件首页 <<<

1 分析

首先分析了一下这个订烟系统，有两种方法可以触发请求可购量。
第一种，将鼠标移到某一条记录的 “+” 号上面，点一下，再离开，可以触发。
第二种，用鼠标选中订购量，输入大于 0 的数，再点一下其他地方，也可以触发。

我选择了第二种方法，写了一个脚本，自动请求可订购量，并将可订购量为 0 的那些条目全部隐藏。

(function reqLimitAndHide0() {
  var lmtInputs = document.querySelectorAll('input[name=req_qty]');
  lmtInputs.forEach(ipt => {
    $(ipt).val(1).focus().blur().val(0).focus().blur();
  });
  setTimeout(() => {
    document.querySelectorAll('.cgt-col-qtl-lmt').forEach(el => {
      if (el.innerHTML  ===  '0') {
        el.parentNode.style.display  =  'none';
      }
    });
  }, 2000);
})()

故事到这里本可以告一段落了，以后爸妈来电话要订烟的时候我只要执行这个脚本就可以省去点 200 多次鼠标的烦恼，也不用再从 200 多条记录中找到可购记录了。但是这不完美，爸妈还是不会用，还是需要委托我来帮他们操作。嗯，我应该把这个功能做成 Chrome 插件，这样他们自己也会用了。

2 Chrome 插件开发

终于进入正题了
Chrome 插件开发文档参见 → https://developer.chrome.com/extensions

2.1 创建 manifest.json 文件

{
  "name": "新商盟助手",
  "description" : "新商盟订烟小助手",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "xsm_favicon.png"
  },
  "permissions": [
    "tabs"
  ]
}

2.2 加载我们的插件

打开 chrome://extensions/
打开 “开发者模式”
点击 “加载已解压的扩展程序”，选中我们的开发目录
完成

2.3 编写气泡 HTML & CSS

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="xsm">
    <h2 class="title">新商盟非官方助手</h2>
    <a href="#" class="homepage" id="btnOpen">打开主页</a>
    <div id="xsmCtrl" class="xsm-ctrl">
      <input type="checkbox" id="chkShowCanBuyOnly">只显示可购买的卷烟
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>

html {
  font-size: 16px;
  padding-bottom: 8px;
}
.title {
  margin: 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed #EEE;
  line-height: 2;
  word-break: keep-all;
}

.homepage {
  display: block;
  margin: 5px auto;
  text-align: center;
  font-size: 1rem;
  color: #136ec2;
  text-decoration: none;
  outline: none;
}

.xsm-ctrl {
  display: none;
}
.xsm-ctrl > * {
  cursor: pointer;
}


var btnOpen = document.getElementById('btnOpen');
var xsmCtrl = document.getElementById('xsmCtrl');

btnOpen.onclick = function () {
  // 打开链接 并切换标签页
  chrome.tabs.create({
    url: 'http://www.xinshangmeng.com/',
    active: true
  });
}

// show all
function showAll(tab) {
  chrome.tabs.executeScript(
    tab.id,
    {
      code: `
        var rows = document.querySelectorAll('.cgt-col-qtl-lmt');
        rows.forEach(el => el.parentNode.style.display  =  'block');
      `
    }
  );
}

// request buy limits
// then hide all unavailable rows
function reqLimitAndHide(tab) {
  chrome.tabs.executeScript(
    tab.id,
    {
      // 执行脚本，请求每种卷烟的可订购量
      // 2 秒后，隐藏所有可订购量为 0 的卷烟
      code: `
        'hello';
        (function reqLimitAndHide0() {
          var lmtInputs = document.querySelectorAll('input[name=req_qty]');
          lmtInputs.forEach(ipt => {
            $(ipt).val(1).focus().blur().val(0).focus().blur();
          });
          setTimeout(() => {
            document.querySelectorAll('.cgt-col-qtl-lmt').forEach(el => {
              if (el.innerHTML  ===  '0') {
                el.parentNode.style.display  =  'none';
              }
            });
          }, 2000);
        })();
      `
    }
  );
}

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tab = tab[0];
  // 如果当前页面是 “新商盟” 页面
  if (tab.url.match(/xinshangmeng\.com/gi)) {
    // 显示 CheckBox
    xsmCtrl.style.display = 'block';

    // 监听 CheckBox
    var chkShowCanBuyOnly = document.getElementById('chkShowCanBuyOnly');
    chkShowCanBuyOnly.onchange = function () {
      if (chkShowCanBuyOnly.value == 0) {
        showAll(tab);
        return;
      }
      reqLimitAndHide(tab);
    }
  }
});

JS 的代码会在插件图片被点击时执行，主要任务是：
1 监听 “打开主页” 按钮。【注意：这里直接在 popup.html a.href 设置是无效的】
2 我们通过当前 url 和新商盟匹配，如果是新商盟页面则显示筛选按钮
【这里用到了 tab.url , 所以我们在最开始的 manifest 文件中声明了 tabs 权限，详情文档】

这里的 JS 只用了 popup.js，是通过 HTML script 标签引入的，每次点击执行。
谷歌插件还有另外两种角色的 JS 文件，background.js 和 contentScript.js。
background.js 是在插件被安装的时候就执行的，可以在后台一直监听浏览器行为，相当于一个后台服务。
contentScript.js 是运行在页面的上下文环境下的脚本，可以直接操作页面的 DOM。

最后

目录结构

最终效果

很强大很有意思的谷歌插件。

那么问题来了，我要如何帮老爸安装插件~

参考

Chrome 插件开发文档

1 分析

2 Chrome 插件开发

2.1 创建 manifest.json 文件

2.2 加载我们的插件

2.3 编写气泡 HTML & CSS

2.4 编写交互逻辑 popup.js

最后

参考