Bookmarkletを使ってWEBページをOGP画像付きでScrapboxにクリッピングする

最近Scrapboxを使い始めました ✨

そこで見ているページをScrapboxにクリップしたいなと思っていたところ、公式がBookmarkletとして用意してくれているようでした。

参考: http://hokoxjouhou.blog105.fc2.com/blog-entry-2222.html

ただし、公式のBookmarkletはOGP画像を取得してくれなかったので、OGP画像を取得し本文に表示するようにしてみました。
(あとページタイトルはdocument.titleで充分なのでそこも一旦そのまま)

(function () {
  var project = "tamanugi";
  var title = document.title;
  var lines = ["[" + window.location.href + " " + document.title + "]"];
  var ogImage = document.querySelector("meta[property='og:image']");
  if (ogImage) {
    lines.push("");
    lines.push("[" + ogImage.getAttribute("content") + "]");
  }
  var quote = window.getSelection().toString();
  if (quote.trim())
    lines = lines.concat(
      quote.split(/\n/g).map(function (line) {
        return " > " + line;
      })
    );
  lines.push("");
  var body = encodeURIComponent(lines.join("\n"));
  window.open(
    "https://scrapbox.io/" + project "/" +
      encodeURIComponent(title.trim()) +
      "?body=" +
      body
  );
})();

主に追加した部分は以下のところですね。単純にmetaタグから画像のURLを取得しているだけになります。

  var ogImage = document.querySelector("meta[property='og:image']");
  if (ogImage) {
    lines.push("");
    lines.push("[" + ogImage.getAttribute("content") + "]");
  }

上記のコードは整形していますが、Bookmarkletとして機能させる場合は1行にして、更にURLエンコードしておいたほうが無難です。

もし使われる場合は下記をご利用ください🙇‍♂️

javascript:%21function%28%29%7Bvar%20p%3D%22ここにプロジェクト名を入れる%22%2Ct%3Ddocument.title%2Ce%3D%5B%22%5B%22%2Bwindow.location.href%2B%22%20%22%2Bdocument.title%2B%22%5D%22%5D%2Co%3Ddocument.querySelector%28%22meta%5Bproperty%3D%27og%3Aimage%27%5D%22%29%3Bo%26%26%28e.push%28%22%22%29%2Ce.push%28%22%5B%22%2Bo.getAttribute%28%22content%22%29%2B%22%5D%22%29%29%3Bvar%20n%3Dwindow.getSelection%28%29.toString%28%29%3Bn.trim%28%29%26%26%28e%3De.concat%28n.split%28%2F%5Cn%2Fg%29.map%28function%28t%29%7Breturn%22%20%3E%20%22%2Bt%7D%29%29%29%2Ce.push%28%22%22%29%3Bvar%20r%3DencodeURIComponent%28e.join%28%22%5Cn%22%29%29%3Bwindow.open%28%22https%3A%2F%2Fscrapbox.io%2F%22%2Bp%2B%22%2F%22%2BencodeURIComponent%28t.trim%28%29%29%2B%22%3Fbody%3D%22%2Br%29%7D%28%29%3B