JavaScript Tool Window

Creating a Small Tool Window with JavaScript

Creating a small tool window-like element with JavaScript. If you add this to userscripts or similar, you can create a small window in the top right. By pressing buttons, you can execute defined functions and more.

Shou Arisaka
1 min read
Oct 11, 2025

Creating a small tool window-like element with JavaScript.

If you add this to userscripts or similar, you can create a small window in the top right. By pressing buttons, you can execute defined functions and more.


var toolwindow = document.createElement("div");
toolwindow.id = "toolwindow";
toolwindow.innerHTML = [
'<button type="button" style="width: 100%;" name="myFunction" onclick="myFunction()">myFunction</button>',
'<div id="hidetoolwindow" onclick="hidetoolwindow()">hidetoolwindow</div>',
].join("");
document.body.appendChild(toolwindow);

var toolwindowStyle = document.createElement("style");
toolwindowStyle.type = "text/css";
toolwindowStyle.innerHTML = [
"#toolwindow {",
"    position: fixed;",
"    color: #f8f8f8;",
"    z-index: 100000;",
"    top: 10px;",
"    right: 10px;",
"    margin-left: auto;",
"    margin-right: auto;",
"    display: block;",
"    background-color: black;",
"    height: 100px;",
"    width: 200px;",
"    opacity: 0.7;",
"    padding: 10px;",
"}",
"#toolwindow * {",
"font-size: 16px;",
"}",
"#hidetoolwindow {",
"padding-top: 60px;",
"}",
].join("");
document.body.appendChild(toolwindowStyle);

function myFunction(){alert('y')}

Share this article

Shou Arisaka Oct 11, 2025

๐Ÿ”— Copy Links