在油猴脚本中，有些时候，我们需要在界面当中添加一个新的按钮。这个时候我们可以使用 document.getElementById("id").innerHTML=xxx 来指定某个元素中的内容是特定的 HTML，从而实现添加一个新的按钮。

但在这个按钮上绑定事件则不是通过简单的指定 button 的 onclick 来完成的。核心原因是默认情况下，你在油猴脚本中所写的函数只运行在油猴脚本中的 Scope ，而 button 则是运行在 Document 的 Scope 下。直接绑定事件在触发时会无法找到对应的函数。

一个好的办法是为你新增的 Button 带上 ID，并通过 ID 找到对应的 Element 并添加事件绑定来实现。

参考代码如下:

// ==UserScript==
// @name         示例代码
// @namespace    https://www.ixiqin.com
// @version      0.0.1
// @description  示例代码
// @author       bestony
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  window.addEventListener('load', function () {
    function viewAuthor() {
      // button click event
    }

    var targetElement =document.getElementById("xxx")

    targetElement[0].innerHTML = targetElement[0].innerHTML + ` &nbsp;<a id="view-author">查看作者</a>`

    var link = document.getElementById("view-author");
    if (link) {
      link.addEventListener("click", viewAuthor, false);
    }
  }, false);
})();
Code language: JavaScript (javascript)

最近在写一个油猴脚本时，因为懒得写 DOM 处理函数，我试图在油猴脚本当中引入 Zepto.js， 用于实现 DOM 操作。

但在引入 Zepto 之后，发现即使是空白的脚本文件，在网页加载时依然会报错。经过排查发现，是我引入的 Zepto 文件导致的，进一步研究后发现，之所以有这个问题，是目前油猴脚本仍不支持 Modules ，因此，我引入 Zepto 就会报错。

想要解决这个问题倒是也简单，将 Zepto 替换为 JQuery 即可。本来想着用 Zepto 会轻量一点， 最后发现还是要上 JQuery。好在是目前 JQuery 提供了不含 Ajax 和 Effect 的 Slim 版本，倒是也不用担心引入的依赖文件特别的大。