JavaScriptで小さいツールウィンドウを作成

JavaScriptで小さいツールウィンドウみていなものを作ります。

これをユーザースクリプトなどに追加すれば、右上に小さなウィンドウが作れます。ボタンを押すことで、定義された関数を実行したりなどが可能です。


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')}