UserScript版アイコンボタン
script.js$('#editor').click(async e => {
const t = e.target;
if (!(t.tagName === 'IMG' && t.classList.contains('icon') && t.title.endsWith('-button')))return;
e.preventDefault();
e.stopImmediatePropagation();
const title = encodeURIComponent(t.title);
let res = await fetch(`/api/code/${scrapbox.Project.name}/${title}/button.js`);
if (!res.ok) return;
eval(await res.text());
});


JavaScriptのトリガーとなるアイコンをどこでも置けるということなのかな?
eval
は非推奨なので動的importを使って書き換えました
button2.js
内で execute
という関数をexportして下さい
script2.jsconst buttonFileName = 'button2.js';
document.getElementById('editor').addEventListener('click', e => {
const t = e.target;
if (!(t.tagName === 'IMG' && t.classList.contains('icon') && t.title.endsWith('-button')))return;
e.preventDefault();
e.stopImmediatePropagation();
const title = encodeURIComponent(t.title);
//console.log(`Start loading the script from /api/code/${scrapbox.Project.name}/${title}/${buttonFileName}`);
import(`/api/code/${scrapbox.Project.name}/${title}/${buttonFileName}`)
.then(({execute}) => {
//console.log('Succeeded in loading the script.');
execute();
})
.catch(error => console.error(error));
});