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 真是品种齐全价格丰富……眼花缭乱

标签: 源码, 知识, 代码段, Chrome插件

已有 2 条评论

  1. Carter

    MutationObserver

添加新评论