re-scrap
/rac10/re-scrapをUserScriptとして実装してみた progfay.icon
ScrapboxのPage Menu
シンプル版
事前にPROJECT_NAMEに指定しておいたプロジェクトに飛ぶ
code:simple.js
const PROJECT_NAME = 'mano'
scrapbox.PageMenu.addMenu({
title: 're-scrap',
image: 'https://gyazo.com/024fe39c0328fabb99566c6ad743ee54/raw',
onClick: () => {
const { title, lines } = scrapbox.Page
const body = lines.reduce((acc, { text }) => ${acc}\n${text}, '').trim() + \n\nfrom [/${scrapbox.Project.name}/${title}]\n
const link = https://scrapbox.io/${encodeURIComponent(PROJECT_NAME)}/new?body=${encodeURIComponent(body)}
window.open(link, '_blank', 'noopener')
}
})
高機能版
rescrapするプロジェクトを選択可能
filtering機能あり (あまり賢くはない)
code:script.js
const projects = new Promise((resolve, reject) => {
fetch('https://scrapbox.io/api/projects')
.then(response => response.json())
.then(json => json.projects)
.then(resolve)
.catch(reject)
})
const rescrap = project => {
const { title, lines } = scrapbox.Page
const body = lines.reduce((acc, { text }) => ${acc}\n${text}, '').trim() + \n\nfrom [/${scrapbox.Project.name}/${title}]\n
const link = https://scrapbox.io/${encodeURIComponent(project)}/new?body=${encodeURIComponent(body)}
window.open(link, '_blank', 'noopener')
}
const rescrapProjectFilterInput = document.createElement('input')
rescrapProjectFilterInput.type = 'text'
rescrapProjectFilterInput.id = 'rescrap-filtering-input'
rescrapProjectFilterInput.addEventListener('input', async e => {
scrapbox.PageMenu('re-scrap').removeAllItems()
const query = rescrapProjectFilterInput.value.toLowerCase()
for (const { name, displayName } of await projects) {
if (!name.toLowerCase().includes(query) && !displayName.toLowerCase().includes(query)) continue
scrapbox.PageMenu('re-scrap').addItem({
title: displayName,
onClick: () => { rescrap(name) }
})
}
})
scrapbox.PageMenu.addMenu({
title: 're-scrap',
image: 'https://gyazo.com/024fe39c0328fabb99566c6ad743ee54/raw',
onClick: async () => {
scrapbox.PageMenu('re-scrap').addItem({ title: 'Now loading...', onClick: () => null })
await projects
scrapbox.PageMenu('re-scrap').removeAllItems()
for (const { name, displayName } of await projects) {
scrapbox.PageMenu('re-scrap').addItem({
title: displayName,
onClick: () => { rescrap(name) }
})
}
const ul = document.querySelector('ularia-labelledby="re-scrap".dropdown-menu')
rescrapProjectFilterInput.value = ''
ul.prepend(rescrapProjectFilterInput)
rescrapProjectFilterInput.focus()
}
})
絞り込み中にスタイルが崩れるので、気になる人はお好みで
code:style.css
ularia-labelledby="re-scrap".dropdown-menu>li>a {
width: 300px;
text-overflow: ellipsis;
display: list-item;
}
code:js
import '/api/code/customize/re-scrap/script.js'
code:css
@import "/api/code/customize/re-scrap/style.css";
UserScript.icon