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

Question

So I have a button that I added through GreaseMonkey:

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

This button worked fine when I added it to the page using this:

document.body.appendChild(input);

However, I wanted to position my button in a non-moving box on the page, instead of just appending it to the end (this is my real concern, the following is just how I applied it, so if you know a better way I would be happy to hear)

I found a solution that used AJAX. I added these to my script:

// @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>\
' );

To add the button to this new <div> I created, I got the element and called it box_element, and used this line:

box_element.appendChild(input);

instead of the previous:

document.body.appendChild(input);

This works sort-of perfectly. The box is added to my <div> , I didnt paste this in the question but I used some CSS with GM_addStyle, and it all got applied to my <div> . Everything looks beautiful, but the button doesn't do anything.

Why? I can have it do a console.log('test'); which works fine, but when I try to use functions from my Greasemonkey script, nothing happens?

Answer 1

In case anyone was curious, I figured out the error. It was actually related to introducing the @grant into my script. My function turnTheWheelsofTime used javascript functions from the page, and apparently using @grant sandboxes everything. The sandboxing from the @grant is actually what broke the function