节点 | GM 增强()函数

简介

在使用 Tampermonkey/Greasemonkey 进行油猴脚本开发时，经常会用到 GM 函数族。GM 函数族提供了许多实用的 API，以辅佐开发者实现更好的用户脚本。其中，GM 增强() 函数又是什么呢？

GM 增强() 函数是 Tampermonkey/Greasemonkey 提供的一组增强函数，它们可以更方便、更简单地在用户脚本中操作 DOM 节点、CSS 样式和事件，简化开发流程。

用法

GM 增强() 函数一共提供了 6 个子函数，分别是：

• GM_query(selector[, callback]): 查询符合选择器的一个节点
• GM_queryAll(selector[, callback]): 查询符合选择器的所有节点
• GM_addStyle(css[, id]): 添加 CSS 样式
• GM_removeStyle(id): 移除 CSS 样式
• GM_click(node[, callback]): 模拟点击节点
• GM_watch(node, events, handler): 监听节点的事件

GM_query()

GM_query(selector[, callback]) 的作用是查询符合选择器的节点，可以是任意 HTML 元素、类、ID、属性等。

GM_query(".btn", function(btn) {
  btn.style.backgroundColor = "red";
});

这个例子通过 GM_query() 查询一个按钮节点，将其背景颜色设置为红色。

GM_queryAll()

GM_queryAll(selector[, callback]) 的作用是查询所有符合选择器的节点，可以是任意 HTML 元素、类、ID、属性等。

GM_queryAll(".link", function(links) {
  for (let link of links) {
    link.style.color = "blue";
  }
});

这个例子通过 GM_queryAll() 查询所有链接节点，将它们的文字颜色设置为蓝色。

GM_addStyle()

GM_addStyle(css[, id]) 的作用是添加 CSS 样式，可以在 Tampermonkey 插件的样式编辑器中设置。

GM_addStyle(`
  .btn {
    border: 1px solid red;
  }
`);

这个例子给所有按钮节点添加了一个红色边框。

GM_removeStyle()

GM_removeStyle(id) 的作用是移除指定的 CSS 样式。

GM_removeStyle("btn");

这个例子移除了 ID 为 btn 的样式。

GM_click()

GM_click(node[, callback]) 的作用是模拟点击节点。

GM_click(document.querySelector(".btn"));

这个例子模拟点击了一个按钮节点。

GM_watch()

GM_watch(node, events, handler) 的作用是监听节点的事件，当事件发生时，调用 handler 处理事件。

GM_watch(document.querySelector(".input"), "change", function(event) {
  console.log(event.target.value);
});

这个例子监听一个输入框节点，当输入框内容发生变化时，输出其值。

结语

GM 增强() 函数为 Tampermonkey/Greasemonkey 的用户脚本开发提供了便捷、快速的操作 DOM 节点、CSS 样式和事件的方法。它们简化了开发流程，增强了用户脚本的功能。