[Tampermonkey] 等待指定元素出现后的处理方法

概览

我们在编写 Tampermonkey 脚本的时候，经常会碰到需要在指定元素存在时再执行脚本的情况。

此时，我们可以使用 @Brock 提供的 waitForKeyElements 方法来监听指定元素的出现。

如何使用

使用前，我们需要在顶部加载 jQuery 与 waitForKeyElements 脚本。

这边，我们使用了 jsDelivr 分发的 jQuery。

// @require      https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js

并且我们通过 配置注释 指定全局变量，以便适配 ESLint 的规则。

/* global $, waitForKeyElements */

配置完毕后我们就可以在脚本任意处使用 waitForKeyElements 方法了。

举一个使用的 🌰：页面上会在用户经过一系列操作之后显示 .example 元素，我们需要在 .example 元素显示之后做一些处理。此时，我们可以这么写

(function () {
  waitForKeyElements('.example', ($content) => {
    // _(:з」∠)_ 处理代码
  });
})();