Greasemonkey：在框中显示突出显示的文本

如何解决Greasemonkey：在框中显示突出显示的文本

我从 How can I display the output of my userscript in a floating box on the side of the page? 获得此代码以在页面上获得一个框，但在保存脚本后我无法获得一个框。请帮我解决这个问题。我还有另一个脚本，它通过单击按钮突出显示页面中的一些预定义单词。发布我需要在框中显示突出显示的单词。请帮助我创建一个框并在其中获取页面上突出显示的文本，因为我是 JavaScript 的新手。提前致谢。

// ==UserScript==
// @name     display
// @version  1
// @match        http://*/*
// @grant    none
// @run-at      document-end
// ==/UserScript==

var Box = document.createElement( 'div' );

Box.id = 'myAlertBox';

GM_addStyle(
    ' #myAlertBox {             ' +
    '    background: white;     ' +
    '    border: 2px solid red; ' +
    '    padding: 4px;          ' +
    '    position: absolute;    ' +
    '    top: 8px; left: 8px;   ' +
    '    max-width: 400px;      ' +
    ' } '
);
Box.innerHTML = "This <i>is</i> HTML,so &lt;3 needs to be escaped.";
document.body.appendChild( Box );

var closeButton = document.createElement( 'div' );
closeButton.className = 'myCloseButton';
closeButton.textContent = 'X';

GM_addStyle(
    ' .myCloseButton {           ' +
    '    background: #aaa;       ' +
    '    border: 1px solid #777; ' +
    '    padding: 1px;           ' +
    '    margin-left: 8px;       ' +
    '    float: right;           ' +
    '    cursor: pointer;        ' +
    ' } '
);

Box.insertBefore( closeButton,Box.firstChild );
closeButton.addEventListener( 'click',function () {
    Box.parentNode.removeChild( Box );
},true );