Hide Locked Problem In LeetCode Chrome插件 开发总结

在公司的黑客松放弃治疗之后，好久没有看我的 GitHub 了，于是更新了一下自己的其中一个万年大坑。

项目地址：https://github.com/csvwolf/hide-locked-problem-in-leetcode

这里推荐一下一个汉化版的开发手册：https://crxdoc-zh.appspot.com/extensions/

在上一版中简单的做了一个click触发的插件，不是我理想中的效果，于是研究了一下如何对页面加载做监听，甚至是监听指定的 DOM 载入。

监听指定 DOM 加载本来我是没想过的，毕竟似乎不记得有这个功能，但在 Selenium 中用了一下觉得非常爽，没有不太科学，于是就找到了MutationEvent，不过遗憾地是，这是一个被弃用的设定，只是因为暂时还能用（查了一下也没查到替代的）：

https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent

我们依旧把执行脚本分为两部分，能够在leetcode中执行的content-script.js和对Chrome做监听和操作的event.js（死于文件命名）。

对于content-script.js，我们在监听了DOMNodeInserted变动之后，发现这个事件触发的很频繁，为了让程序更有效率，我们使用之前讲的 Debouncing ：JavaScript Debouncing与Throttling。

之后执行这个脚本就能监听表格的变更，根据lock标志来决定是否需要隐藏该条目。

之后我们要做的更关键的部分就是event.js中，我们需要检测是否打开了leetcode（在manifest中我们已经做好了白名单，仅限 LeetCode 下的页面使用），在 Chrome 中，标签一共有四个生命周期（https://crxdoc-zh.appspot.com/extensions/webNavigation）

我们对生命周期进行监听并执行content-script.js即可：

chrome.webNavigation.onCompleted.addListener(function(data) {
  chrome.tabs.executeScript(data.tabId, {file: "./content_script.js"});
});

值得一提的是，对于这类插件似乎在新窗口中才生效，一开始我试了半天都没有生效还以为是自己写错了，结果在新窗口中就有效了（迷……）。

最后再吐槽一句：Chrome 提供的 API 真是品种齐全价格丰富……眼花缭乱