/customize/re-scrap - Scrapbox Reader

generated at 11/17/2024, 10:01:51 AM
re-scrap

/rac10/re-scrapをUserScriptとして実装してみた progfay.icon
ScrapboxのPage Menu

シンプル版
事前に PROJECT_NAME に指定しておいたプロジェクトに飛ぶ
simple.jsconst 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機能あり (あまり賢くはない)
script.jsconst 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('ul[aria-labelledby="re-scrap"].dropdown-menu')
    rescrapProjectFilterInput.value = ''
    ul.prepend(rescrapProjectFilterInput)
    rescrapProjectFilterInput.focus()
  }
})

絞り込み中にスタイルが崩れるので、気になる人はお好みで
style.cssul[aria-labelledby="re-scrap"].dropdown-menu>li>a {
	width: 300px;
    text-overflow: ellipsis;
    display: list-item;
}

jsimport '/api/code/customize/re-scrap/script.js'
css@import "/api/code/customize/re-scrap/style.css";