Scrapboxで文字数を数えるUserScript

　書いた。こうすると綺麗だよって思ったらそうしてください。
　文字数(改行除く)と行数の2種類を出します。

　Scrapbox における UserScript の導入は以下をご参照ください。

scrapbox.io

[追記(2017/07/08 21:31)]Scrapbox内でページ遷移したときの挙動を全く考えていなくて、ブラウザ再読込をしないと多分思った動作をしません。(やるとすればMutationObserverとかになるかなとは思っている)

本文

 // 文字数表示用エレメントを追加(各ページのときのみ)
 if (window.location.href.match(/https:\/\/scrapbox\.io\/[^/]+\/.+/)) {
   const pageInfo = document.getElementsByClassName('page-info')[0]
   let charWithoutBr = document.createElement('div'),
       brOnly = document.createElement('div')
   charWithoutBr.setAttribute('id', 'char-without-br')
   brOnly.setAttribute('id', 'br-only')
   charWithoutBr.innerHTML = brOnly.innerHTML = '0'
   pageInfo.appendChild(charWithoutBr)
   pageInfo.appendChild(brOnly)
   
   // 文字数を数える(改行を除く)
   var getCharCount = () => {
     return Array.from(
         document.getElementById('editor').getElementsByTagName('span')
       ).filter(v => {
         const className = v.getAttribute('class')
         return (!!className) &&
           (className.match(/c-[0-9]+/)) &&
           (v.getElementsByTagName('br').length == 0)
       })
       .length
   }
   
   // 行数を数える
   var lineCount = () => {
     return document.getElementById('editor')
       .getElementsByClassName('lines')[0]
       .getElementsByClassName('line')
       .length
   }
   
   // 文字数/行数を数えて表示を更新
   var updateCharCount = () => {
     document.getElementById('char-without-br').innerHTML = getCharCount()
     document.getElementById('br-only').innerHTML = lineCount()
   }
   updateCharCount()
   
   // キー押下で文字数を数えて表示を更新
   document.addEventListener('keydown', updateCharCount)
 }