Javascript 如何在页面侧面的浮动框中显示userscript的输出？

我正在开发一个用户脚本，用于跟踪探索期间的事件。这是工作（好吧，它的工作，但仍然需要一些工作lol），但我需要一种方式来显示我收集的信息，不涉及弹出警报的每一步

如何在页面上创建一个框并显示其中的内容？ 我希望在这个页面的菜单左侧创建一个框架、窗口，并在脚本运行时将各种变量的值写入其中

我正在localStorage中收集这些数据，因此我的脚本将首先更新各种localStorage属性，然后以某种方式在此框中显示结果：

localStorage.steps = Number(localStorage.steps) + 1;
displayValueInFloatingBox(localStorage.steps + ' in Sargasso' );

我还想在此框中添加一个按钮来重置这些属性的值，这样我就可以选择永远跟踪，或者只跟踪一两个会话，而不必每次都编辑脚本（特别是如果我决定共享脚本）。我假设这只是将变量设置为零，所以我只需要知道如何创建按钮并使其执行某些操作。。。这可能会以某种方式使用eventListener

请坚持使用纯JavaScript，不使用jQuery。。。我现在还几乎不懂JavaScript。请解释一下答案，让我明白一些东西是如何工作的——我不想只看到代码片段，因为我不明白为什么要使用一些代码，所以我会带着类似的问题回来

附录A：我当前的脚本

/==UserScript==
//@name unicreates蛋弹出窗口
//@namespace unicreates蛋弹出窗口
//@description unicreates鸡蛋弹出窗口
//@包括http://unicreatures.com/explore.php*
//@包括http://www.unicreatures.com/explore.php*
//==/UserScript==
var regexp=/是否找到一个？（尊贵）？（*）附近的蛋/；
var match=regexp.exec（document.body.innerHTML）；
如果（匹配）{
if（匹配[1]）{
警惕（“发现高贵的蛋：+匹配[2]）；
}否则{
警报（“发现正常鸡蛋：+匹配[2]）；
}
}
var y=document.body.innerHTML；
var links=document.getElementsByTagName（'a'）；
对于（变量i=0；i0）
{
警报（“高贵蛋警报”）；
}
如果（y.indexOf（“你发现一个高尚的人”）>0）
{
localStorage.elevatedegcount=Number（localStorage.elevatedegcount）+1；
警报（“提升蛋警报”+本地存储。提升蛋计数）；
}
如果（y.indexOf（“鸡蛋附近！”）>0）
{
localStorage.eggCount=Number（localStorage.eggCount）+1；
警报（“鸡蛋警报”+localStorage.eggCount）；
}

这里有一种简单的方法可以在页面的左上角添加一个框。首先，我们需要创建一个

div

元素作为框。（其他HTML元素也可以工作，但是

div

是一个不错的选择，因为它没有特殊意义，只是一个简单的容器。）

var-box=document.createElement（'div'）；

我们将为框提供一个ID，以便稍后使用

document.getElementsById（）

找到它，这样我们可以：

box.id='myAlertBox'；

现在我们需要设计盒子的样式。由于我们使用的是GreaseMonkey，因此可以使用将CSS样式规则添加到文档中：

GM_addStyle（
“#myAlertBox{”+
'背景：白色；'+
'边框：2倍纯红；'+
'填充：4px；'+
'位置：绝对；'+
'顶部：8px；左侧：8px；'+
'最大宽度：400px；'+
' } '
);

请注意，在JavaScript中包含a的语法很笨拙。（还有其他的方法来设计这个盒子，在GreaseMonkey之外也同样适用。我将在下面展示其中的一些方法。）

看看CSS样式规则本身，前三行只是说我们的框应该有一个白色背景和一个两像素宽的红色边框，边框和内容之间应该有四个像素的填充。所有这些只是一个典型的简单警报框

下面的一行表示我们的框应该在页面上——也就是说，无论页面上还有什么，框都应该位于固定位置——下面的一行指定了我们要给它的位置：这里，距页面左上角四个像素。最后一行只是说，无论我们往盒子里塞进多少内容，盒子的宽度都不应该超过400像素

说到这里，我们当然也需要添加一些内容。我们可以使用纯文本：

---

box.textContent=“这里有一些文本！这不是HTML，所以90%的事情都是通过GreaseMonkey（或UserScript）完成的与制作在页面上运行的普通Javascript程序完全相同。我们StackOverflow的大多数人都不介意帮助已经付出努力的人，但我们通常不愿意只交代码块。请返回您尝试过的具体示例。我将从普通Javascript开始在普通页面上。更容易测试。之后将其转换为用户脚本通常是相当容易的。如果你仔细阅读我的问题，你会发现我不仅仅想要一块代码。我是在寻求帮助以找到答案，或者如果给了代码，我想知道是什么使它工作，以便我知道如何在其他地方执行它……这真的有那么大的问题吗一段代码只是为了在页面上放一个小边栏？而一个按钮的代码考虑到我所需要的就是知道如何基本上把按钮放在那里，以及在代码中把我的指令放在哪里？我没有意识到仅仅用一个按钮和一个复选框来制作一个空的边栏就需要那么多代码，这样我就可以看到它是如何完成的了不要在阿尔接受那么多代码
// ==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);
}