ScrapboxでコードブロックごとにJavaScriptを実行するUserScript
https://www.youtube.com/watch?v=JyEaccqgtPw&feature=youtu.be
元ネタ
グローバル変数を使うとコードブロック間で変数を渡せる
const とかをグローバル領域に書くと再実行すると怒られる
それはそうけしごむ.icon
ページ再読み込みをしないといけない
コードブロックに一意な名前を付ける必要がある
ScrapboxのAPIでコードブロックの内容を取得している
うーんけしごむ.icon
code:script.js
scrapbox.PageMenu.addItem({
title: 'js notebook',
onClick: loadCodeBlockButton
})
export function loadCodeBlockButton() {
const getScript = (source, callback) => {
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')0; script.async = 1;
script.onload = script.onreadystatechange = function( _, isAbort ) {
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort) { if(callback) callback(); }
}
};
script.src = source;
prior.parentNode.insertBefore(script, prior);
}
const createButton = () => {
const r = document.createElement("a");
r.style = "top:2px;left: -24px;position: absolute;z-index: 1000;font-size:32px;color:limegreen;text-decoration:none;";
r.append("▶");
return r
}
const buttonGroup = new Array();
const applyButton = () =>{
buttonGroup.forEach(e =>{
e.remove();
});
let codeBlocks = document.getElementsByClassName("code-block-start");
codeBlocks.forEach(e => {
const codeType = e.childNodes0 if(codeType.title === "javascript"){
const codeURL = codeType.childNodes0.getAttribute('href'); if(codeURL){
const btn = createButton();
btn.addEventListener('click',() =>{getScript(codeURL)});
buttonGroup.push(e.appendChild(btn));
// getScript(codeURL);
}
}
});
}
applyButton();
const debounce = (func, interval) => {
let timerID;
return function() {
clearTimeout(timerID);
const context = this;
const args = arguments;
inDebounce = setTimeout(() => func.apply(context, args), interval);
}
}
$("#editor").keydown(debounce(applyButton, 100));
}
code:js
function getScript(source, callback) {
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')0; script.async = 1;
script.onload = script.onreadystatechange = function( _, isAbort ) {
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort) { if(callback) callback(); }
}
};
script.src = source;
prior.parentNode.insertBefore(script, prior);
}
テスト用
code:1.js
alert("hoge");
()=>{let b = 0;}
a = 7;
code:2.js
alert(++a);
参考