我正在为Unicreatures 编写一个用户脚本，用于在探索期间跟踪事件。它正在工作（好吧，它可以工作，但仍然需要一些工作，哈哈），但我需要一种方法来显示我正在收集的信息，而不涉及每个步骤的弹出警报。
如何在页面上创建一个框并在其中显示内容？
我希望在此页面的菜单左侧创建一个框架、窗口等任何内容，并在我的脚本运行时将各种变量的值写入其中。
我在 localStorage 中收集这些数据，所以我的脚本将首先更新各种 localStorage 属性，然后以某种方式在此框中显示结果：
localStorage.steps = Number(localStorage.steps) + 1;
displayValueInFloatingBox(localStorage.steps + ' in Sargasso' );
我还想在这个框中添加一个按钮来重置这些属性的值，这样我就可以选择永远跟踪还是只跟踪一两个会话，而不必每次都编辑脚本（特别是如果我决定分享脚本）。我假设这只会将变量设置为零，所以我只需要知道如何创建按钮并让它做某事......这可能会以某种方式使用 eventListener。
请坚持使用纯 JavaScript，不要使用 jQuery ......我现在仍然几乎没有得到 JavaScript。并且请解释答案，以便我了解某些东西是如何工作的——我不只是想要让我回到类似问题的代码片段，因为我不明白为什么使用了一些代码。
附录 A：我当前的脚本
// ==UserScript==
// @name Unicreatures Egg pop-up
// @namespace Unicreatures Egg pop-up
// @description Unicreatures Egg pop-up
// @include http://unicreatures.com/explore.php*
// @include http://www.unicreatures.com/explore.php*
// ==/UserScript==
var regexp = /You find an? (Exalted )?(.*?) egg nearby/;
var match = regexp.exec( document.body.innerHTML );
if ( match ) {
if ( match[1] ) {
alert( "Exalted egg found: " + match[2] );
} else {
alert( "Normal egg found: " + match[2] );
}
}
var y = document.body.innerHTML;
var links = document.getElementsByTagName( 'a' );
for ( var i = 0; i < links.length; i++ ) {
var link = links[i];
if ( /area=sea(?!\&gather)/.test( link.href )) {
link.addEventListener( 'click', function () {
localStorage.steps=Number(localStorage.steps)+1
// alert(localStorage.steps + ' in Sargasso' );
}, true );
}
}
//document.addEventListener('click', function(){alert('page clicked')}, true);
if(y.indexOf("You find a Noble")> 0)
{
alert('Noble Egg Alert');
}
if(y.indexOf("You find an Exalted")> 0)
{
localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1;
alert('Exalted Egg Alert '+localStorage.exaltedEggCount);
}
if(y.indexOf("egg nearby!")> 0)
{
localStorage.eggCount=Number(localStorage.eggCount)+1;
alert('Egg Alert '+localStorage.eggCount);
}