Greasemonkeyでボタンを追加する！

こんにちは、lisです！

Webページに追加でjavascriptを実行することができる「Greasemonkey」。

Greasemonkeyでボタンを追加するスクリプトです！

ボタンを追加するメソッド

作成したボタンを追加するメソッドはこちら。

function add_button(appendParent, addEventFunction) {
  const zNode = document.createElement ("div");
  zNode.innerHTML = '<button id="myButton" type="button">click me!</button>';
  zNode.setAttribute ("id", "myContainer");
  appendParent.appendChild(zNode);
  document.getElementById("myButton").addEventListener("click", addEventFunction, false);
}

引数	内容
appendParent	ボタンを追加する親要素
addEventFunction	ボタンに設定するイベント

簡単な使い方:例1

ページの1番下にボタンを追加します。

このボタンを押すと、コンソールに「click!!」と表示されるだけです。

(function() {
  add_button(document.body, function (e) {
    console.log("click!!");
  });
})();

簡単な使い方:例2

#target_idの下にボタンを追加します。

このボタンを押すと、event()メソッドが呼ばれて、コンソールに「click!!」と表示されるだけです。

function event() {
  console.log("click!!");
}

(function() {
  const element = document.getElementById("target_id");
  add_button(element, event);
})();

参考

コチラを参考にしました。ありがとうございました！

https://living-sun.com/ja/javascript/410487-how-to-create-buttons-and-text-enters-with-javascript-in-scripts-tampermonkey-javascript-google-chrome.htmlliving-sun.com

あとがき

Greasemonkeyでボタンを追加するでした！