QiitaにはてなブックマークとPocketボタンを設置するためのスクリプトを作成してみた

Qiitaの記事にもはてなブックマークとPocketのボタンが欲しいですよね。
そこで、それらのボタンと同じ機能を持つリンクを生成するためのJavaScriptスクリプトを書きました。
Qiitaの記事編集画面で開発者用ツールを開き、以下のJavaScriptをコピペして実行して下さい。
実行すると結果がクリップボードにコピーされます。

Chromeコンソールバージョン

snippet.js

const userId = Qiita.user.url_name
const itemId = window.location.href.split('/').splice(-2,1)[0]
const hatebuURL = `//b.hatena.ne.jp/add?mode=confirm&url=https://qiita.com/${userId}/items/${itemId}`
const pocketURL = `//getpocket.com/edit?url=https://qiita.com/${userId}/items/${itemId}`
const  htmlToElement = (html)=> {
  var template = document.createElement('template');
  html = html.trim(); // Never return a text node of whitespace as the result
  template.innerHTML = html;
  return template.content.firstChild;
}
copy(`## はてなブックマーク・Pocketはこちらから
[はてなブックマークに追加](${hatebuURL})
[Pocketに追加](${pocketURL})`)
alert('コピーしました。')

全ブラウザ対応バージョン

snippet.js

const userId = Qiita.user.url_name
const itemId = window.location.href.split('/').splice(-2,1)[0]
const hatebuURL = `//b.hatena.ne.jp/add?mode=confirm&url=https://qiita.com/${userId}/items/${itemId}`
const pocketURL = `//getpocket.com/edit?url=https://qiita.com/${userId}/items/${itemId}`
const  htmlToElement = (html)=> {
  var template = document.createElement('template');
  html = html.trim(); // Never return a text node of whitespace as the result
  template.innerHTML = html;
  return template.content.firstChild;
}
const copyToClipboard = str => {
    if(!str || typeof(str) != "string") {
      return "";
    }
    //elmはtextareaノード
    var elm =htmlToElement("<textarea id=\"tmp_copy\" style=\"position:fixed;right:100vw;font-size:16px;\" readonly=\"readonly\">" + str + "</textarea>")
    //strを含んだtextareaをbodyタグの末尾に設置
    document.body.appendChild(elm);
    //select()でtextarea内の文字を選択
    elm.select();
    //rangeでtextarea内の文字を選択
    var range = document.createRange();
    range.selectNodeContents(elm);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    elm.setSelectionRange(0, 999999);
    //execCommandを実施
    document.execCommand("copy");
    //textareaを削除
    document.body.removeChild(elm);
  };

copyToClipboard(`## はてなブックマーク・Pocketはこちらから
[はてなブックマークに追加](${hatebuURL})
[Pocketに追加](${pocketURL})`)
alert('コピーしました。')

コピーされた内容をQiitaのエディターの一番下に貼り付けて下さい。
このようになります。

はてなブックマーク・Pocketはこちらから

はてなブックマークに追加
Pocketに追加

##　最後に
いかがでしたか？
どなたかこのコードを元にしてChrome拡張を作って頂けると泣いて喜びます。
さて、今後はこのリンクを記事の一番下に掲載しておくことにします。ありがとうございました。

終わりに

私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話