ScrapJupyter
ScrapJupyter
コードブロックのjsを実行するUserScript
toggleできる機能要らない気がしてきた
常にonでいい
code:js
hoge = 244
code:js
console.log(hoge)
code:js
alert(hoge)
code:script.js
const title = 'ScrapJupyter'
let isEnable = false;
const toggle = (setEnable) => {
console.log("scrapJupyter", setEnable)
isEnable = (setEnable !== undefined) ? setEnable : !isEnable
$(.page-menu-extension #${title} img).attr('src', isEnable ? on : off);
if(isEnable) _enable()
else _disable()
}
function loadScript() {
console.log('loadScript')
scrapbox.PageMenu.addMenu({
title,
image: off,
onClick: () => toggle()
})
toggle(true)
const currentProject = scrapbox.Project.name
scrapbox.on('project:changed', () => {
if (scrapbox.Project.name !== currentProject) toggle(false)
else toggle(true)
})
}
function getCodeBlocks() {
const lines = scrapbox.Page.lines ?? [];
const codeBlocks = lines.reduce( (acc,line) => {
if(line?.codeBlock?.lang !== "js") return acc
if(line?.codeBlock?.start)
if(line?.codeBlock) {
}
return acc;
},[])
return codeBlocks
}
const buttons = new Map();
const createButton = () => {
const r = $('<div>').css("position","absolute")
r.width(30)
r.height(30)
r.append("▶")
return r
}
const removeAllButtons = () => buttons.forEach( b => b.remove())
function appendButton() {
removeAllButtons()
getCodeBlocks().forEach( block => {
const id = block.line.id
if(!buttons.get(id)) buttons.set(id, createButton());
const b = buttons.get(id)
b.off()
const {left, top} = $([id=L${block.line.id}]).position()
b.css({left: left - 25,top, 'z-index': 900})
b.click(function() {
const block = getCodeBlocks().find( b => b.line.id === id);
(1,eval)(block.content)
})
$('.lines').append(b)
})
}
function _enable() {
scrapbox.on('lines:changed', appendButton)
appendButton()
}
function _disable() {
removeAllButtons()
scrapbox.off('lines:changed', appendButton)
}
loadScript()
get code blocksじゃなくて、指定行からコードブロックを1つ作る感じのほうが読みやすそう?
名前がなかったら単一実行、名前があったらfetchして実行
にするとよさそう
azu(@azu_re)
evalするときにModuleとして実行する方法。
evalだとModuleじゃないのでTop-Level awaitが利用できない
await import( data:text/javascript;charset=utf-8, ${encodeURIComponent(src)} )
これならModuleとしてevalでできるっぽい。
code:js
const src = String.raw`
console.log("hello")
`;
const mod = await import(data:text/javascript;charaset=utf-8, ${encodeURIComponent(src)})
console.log(mod)
code:js
// require Module Context for top-level await
const src = `
confetti.default();
`;
// eval as Module
import(data:text/javascript;charset=utf-8, ${encodeURIComponent(src)}).then(mod => {
console.log(mod);
});
だめだった
CSPに引っかかるらしいけど、どこに書いてあるんだろう
エラー見ても分からん
https://gyazo.com/3173513922e2f1e6d74286c787824075