ページのサイドに画像を置いておくUserScript

https://gyazo.com/2cc976508a20107b14ebcf8c7a9f03a3

ページの脇に小さく画像を置いておくUserScriptおよびUserCSS

検索バーにドラッグしてURLをコピペして、すぐページに貼り付けたりできる

複数種類のページにそれぞれ画像を貼ってゆく作業を気まぐれにしたいとき、使えたりするかも

（URLをユーザー辞書登録したほうが早いと思うけど……）

code:script.js

// エディターの左サイドの空間の要素を取得

const side = document.querySelector('.col-page-side');

// 画像のURLを配列に入れる

const imgList = [

]

if(!side.querySelector('img')) { // この条件を付けないと画像が増殖するかも？

imgList.forEach(img => {

// img要素を作る。スタイルはCSSで設定する

const n = document.createElement('img');

n.setAttribute('src',img);

// サイドにimg要素を追加

side.append(n)

})

}

// 別なプロジェクトに移動したらDOM掃除する

scrapbox.on('project:changed', ()=>{

const nodes = side.querySelectorAll('img');

// img要素をサイドから取り除く

nodes.forEach(n => n.remove())

})

code:style.css

/* サイドに並べる画像の設定 */

.col-page-side {

display: block;

}

.col-page-side img {

height: 20px;

width: 20px;

margin: 5px;

}