探索中のイベントを追跡するUnicreaturesのユーザースクリプトに取り組んでいます。それは機能しています（まあ、それは機能しますが、それでもいくつかの作業が必要です笑）が、すべてのステップのポップアップアラートを含まない、収集している情報を表示する方法が必要です。
ページ上にボックスを作成して、その中にコンテンツを表示するにはどうすればよいですか？
このページのメニューの左側にあるフレームやウィンドウなどを作成し、スクリプトの実行時にさまざまな変数の値を書き込みたいと考えています。
このデータをlocalStorageに収集しているので、スクリプトは最初にさまざまなlocalStorageプロパティを更新してから、このボックスに結果を表示します。
localStorage.steps = Number(localStorage.steps) + 1;
displayValueInFloatingBox(localStorage.steps + ' in Sargasso' );
また、このボックスにボタンを追加して、これらのプロパティの値をリセットします。これにより、スクリプトを毎回編集することなく、永久に追跡するか、セッションを1、2回だけ追跡するかを選択できます（特に、スクリプトを共有するため）。これは変数をゼロに設定するだけだと思うので、ボタンを作成して何かを実行する方法を知る必要があります...これはおそらく何らかの形でeventListenerを使用します。
jQueryではなくプレーンJavaScriptに固執してください...私はまだ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);
}