Databases
StackOverflow2013
Postsdbo
POHow can I display the output of my userscript in a floating box on the side of the page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I display the output of my userscript in a floating box on the side of the page?
    text
    copied!<p>I'm working on a userscript for <a href="http://unicreatures.com/" rel="nofollow">Unicreatures</a> that keeps track of events during exploration. It's working (well, it works but still needs some work lol) but I need a way to display the information I'm collecting that doesn't involve popup alerts for every step.</p> <h2>How can I create a box on the page and display stuff in it?</h2> <p>I'm looking to create a frame, window, whatever on the left side of the menu on this page, and write the values of various variables into it as my script runs. </p> <p>I'm collecting this data in localStorage, so my script will first update various localStorage properties and then display the results in this box somehow:</p> <pre><code>localStorage.steps = Number(localStorage.steps) + 1; displayValueInFloatingBox(localStorage.steps + ' in Sargasso' ); </code></pre> <p>I'd also like to add a button to this box to reset the values of these properties, so that I have a choice of keeping track forever or just for a session or two without having to edit the script every time (especially if I decide to share the script). I assume this would just set the variables to zero so I just need to know how to create the button and making it do something... This would probably use an eventListener somehow.</p> <p>Please stick to plain JavaScript, no jQuery... I'm still barely getting JavaScript at the moment. And please, explain answers so I understand how something works - I don't just want code snippets that leave me coming back with a similar question because I don't understand why a bit of code was used.</p> <h3>Appendix A: my current script</h3> <pre><code>// ==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 &lt; links.length; i++ ) { var link = links[i]; if ( /area=sea(?!\&amp;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")&gt; 0) { alert('Noble Egg Alert'); } if(y.indexOf("You find an Exalted")&gt; 0) { localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1; alert('Exalted Egg Alert '+localStorage.exaltedEggCount); } if(y.indexOf("egg nearby!")&gt; 0) { localStorage.eggCount=Number(localStorage.eggCount)+1; alert('Egg Alert '+localStorage.eggCount); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload