Greasemonkey-按钮已添加到 <div> 我添加了，而不是调用我的oilmonkey函数

Question

因此，我有一个通过GreaseMonkey添加的按钮：

var input = document.createElement('input');
input.type = 'button';
input.value = 'Off';
input.onclick = turnTheWheelsofTime;

当我使用此按钮将其添加到页面时，此按钮可以正常工作：

document.body.appendChild(input);

但是，我想将按钮放置在页面上的固定框中，而不是仅将其附加到末尾（这是我真正关心的问题，下面就是我的应用方式，因此，如果您知道一种更好的方法，会很高兴听到）

我找到了使用AJAX的解决方案。 我将这些添加到脚本中：

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
 // @grant       GM_addStyle`<br><br>
$("body").append ( '\
    <div id="displayBox">\
    <p id="displayBoxText">Test</p>\
    <button id="gmCloseDlgBtn" type="button">Close popup</button>\
    </div>\
' );

要将按钮添加到我创建的这个新的<div> ，我获得了元素并将其命名为box_element，并使用了以下这一行：

box_element.appendChild(input);

而不是以前的：

document.body.appendChild(input);

这工作得很完美。 该框已添加到我的<div> ，我没有将其粘贴到问题中，但是我将一些CSS与GM_addStyle一起使用，并且所有内容均已应用于我的<div> 。 一切看起来都很漂亮，但是按钮没有任何作用。

为什么？ 我可以让它做一个console.log('test'); 哪个工作正常，但是当我尝试使用Greasemonkey脚本中的函数时，什么都没发生？

Answer 1

万一有人好奇，我找出错误。 它实际上与将@grant引入我的脚本有关。 我的函数turnTheWheelsofTime使用了页面中的javascript函数，并且显然使用@grant沙箱将所有内容都使用了。 @grant的沙箱实际上是破坏功能的原因