# 在油猴脚本中实现新增按钮和按钮的点击效果

- Link: https://www.ixiqin.com/2022/10/19/implement-new-in-a-grease-monkey-script-button-and-click-on-the-button-effect/
- Published: 2022-10-19T06:00:00+08:00
- Author: 白宦成

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

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

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

参考代码如下:

    ```javascript
    // ==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)
    ```