如何在页面一侧的浮动框中显示用户脚本的输出

How can I display the output of my userscript in a floating box on the side of the page?

本文关键字：显示 用户 输出 脚本      更新时间：2023-09-26

我正在为Unireatures开发一个用户脚本，用于跟踪探索过程中的事件。它正在工作（好吧，它工作，但仍然需要一些工作哈哈），但我需要一种方式来显示我正在收集的信息，而不是每一步都有弹出警报。

如何在页面上创建一个框并在其中显示内容

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

我正在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);
}

这里有一种在页面左上角添加框的简单方法。首先，我们需要创建一个div元素作为盒子。（其他HTML元素也可以工作，但div是一个不错的选择，因为它没有特殊意义，只是一个简单的容器。）

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

我们会给我们的盒子一个ID，这样我们以后就可以用document.getElementsById()找到它，也可以用CSS:对它进行样式设置

box.id = 'myAlertBox';

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

GM_addStyle( 
    ' #myAlertBox {             ' +
    '    background: white;     ' +
    '    border: 2px solid red; ' +
    '    padding: 4px;          ' +
    '    position: absolute;    ' +
    '    top: 8px; left: 8px;   ' +
    '    max-width: 400px;      ' +
    ' } '
);

请注意在JavaScript中包含多行字符串的语法有点尴尬。（还有其他方法可以设计盒子的样式，在GreaseMonkey之外也可以。我将在下面展示其中的一些。）

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

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

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

box.textContent = "Here's some text! This is not HTML, so <3 is not a tag.";

或者我们可以使用HTML:

box.innerHTML = "This <i>is</i> HTML, so &lt;3 needs to be escaped.";

最后，我们需要将框添加到页面中，使其显示出来：

document.body.appendChild( box );

给你！页面上的一个框。

好吧，但我们该如何摆脱它呢？好吧，最简单的方法就是让它在点击时消失：

box.addEventListener( 'click', function () {
    box.parentNode.removeChild( box );
}, true );

或者，我们可以为盒子创建一个单独的关闭按钮，并仅为此设置点击处理程序：

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 );

在框中的任何其他内容之前插入关闭按钮，并赋予其样式float: right，使其浮动到右上角，并使文本在其周围流动。cursor: pointer规则使鼠标光标在按钮上看起来像一只手，表明它是可点击的。

您也可以以相同的方式将其他按钮添加到框中（或页面上的其他位置）。我给按钮起了一个类名，而不是ID，这样，如果你愿意，你可以给所有按钮起相同的类，它们的风格也会相同。

也可以将按钮的HTML代码放在box.innerHTML中，找到结果元素（例如box.getElementById()），并以这种方式添加它们的单击处理程序。

我说过我会提到其他造型元素的方式。一种简单的方法是直接将CSS规则写入其style属性：

box.style.cssText =
    ' background: white;     ' +
    ' border: 2px solid red; ' +
    ' padding: 4px;          ' +
    ' position: absolute;    ' +
    ' top: 8px; left: 8px;   ' +
    ' max-width: 400px;      ' ;

（这样，我们甚至不需要给盒子一个ID。）也可以一次设置（和读取）一个样式：

box.style.background = 'white';
box.style.border = '2px solid red';
box.style.padding = '4px';
box.style.position = 'absolute';
box.style.top = '8px';
box.style.left = '8px';
box.style.maxWidth = '400px';

你会注意到有些名字是不同的；例如，max-width将不是有效的JavaScript属性名称，因此它将变为maxWidth。同样的规则适用于其他带有连字符的CSS属性名。

不过，我更喜欢GM_addStyle，因为它更灵活。例如，如果你想让盒子里的所有链接都变成红色，你可以这样做：

GM_addStyle( 
    ' #myAlertBox a {  ' +
    '    color: red;   ' +
    ' } '
);

顺便说一句，这里有一个巧妙的技巧：如果用position: fixed替换position: absolute，那么框将不会随页面滚动—相反，即使向下滚动，它也会固定在浏览器的一角。

另一个提示：如果你还没有Firebug，请安装它。它将使检查页面内容和调试JavaScript变得更加容易。

相关文章：