貼り付けたURLにページのサムネイルを追加する
DEMO
https://gyazo.com/11e9c9e27d7eeb7e77045e04c68fcb6b
自分のプロジェクトへの導入方法
下記のコードを自分のページのcode:script.jsにコピペしてリロード
code:script.js
scrapbox.PopupMenu.addButton({
title: 'Add thumb',
onClick: text =>{
let tabs = text.match("(\t+)");
let match = text.match(".?(http.+).?")1; match = match.replace("]","");
if (tabs == null){
}
else if (tabs1.length == 1){ const tab = tabs1.replace("\t",""); }
else {
const tab = tabs1.replace("\t",""); }
return text;
}
})
リロードしたらページ上部に出てくる表示のLoad new UserScriptをクリックする
https://s.wordpress.com/mshots/v1/https://scrapbox.io/help-jp/%E8%87%AA%E5%88%86%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A8%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3?&.png
使い方
適当なWebページのリンクを貼り付ける
URLを含む行を選択して右クリック -> Add Thumb
行の右側の余白をトリプルクリックするといいかも
URLの真下にページのスクショが追加される
タイトル付きのURL表記[タイトル URL]でもOK
https://s.wordpress.com/mshots/v1/https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length?&.png
追加された画像が下みたいな表示になっている場合
https://gyazo.com/6db6f29c4b5b57930434809c4406e934
数秒待ってリロードすると表示される
command + shift + Rでキャッシュ消去リロードしたほうがいいかも
スクリプトの流れ
選択されたテキストのURL部分を抽出する
wordpressの機能のURLからページのスクショを生成するAPIで画像URLを作る
'https://s.wordpress.com/mshots/v1/' + match + '?&.png]\n'
?&.pngはscrapboxに画像URLであることを認識させるために追加したもの
選択されたテキストの次の行に生成した画像URLを追加する
箇条書きでtabが使われている場合はその真下に来る様にtabの数を調整した
Issue
日本語のページがたまに文字化けする
https://s.wordpress.com/mshots/v1/https://qiita.com/Aries1A/items/7702455b1c5b32a66761?&.png
ページを開いた時にアニメーションが開始するページはサムネがアニメーション開始前になる
https://s.wordpress.com/mshots/v1/https://emarf.co?&.png