BBSJS 原型概念版

BBSJS 是由 BBSLua 啟發，在用測覽器上 ptt 時，執行 ptt 文章內 javascript 的計劃。

使用方法

在文章內按 J 即可執行文內的 bbsjs；如果是用小書籤，就是直接在文章內點擊小書籤執行。目前可以在 ptt chrome、term.ptt.cc 或其它類似介面下使用， ptt 網頁版也可以動。

使用 ptt chrome、term.ptt.cc 等，建議在 ptt chrome 內右鍵，開啟選項內的好讀模式，讓 bbsjs 就算超過一頁，也能一次全部載入執行。

安裝

目前發布小書籤 bookmarklet 和 Greasemonkey 腳本二種執行方法。 grease monkey 是一種簡易的瀏覽器腳本，安裝後在特定的網域執行。小書籤則是類似書籤，只是點擊時不是前往該網站，而是在現在頁面下執行程式。

grease monkey

需安裝 grease monkey，chrome 下可以試 Tampermonkey， user script 拖管在 github 上，在 github 上點擊 raw 可以安裝。

小書籤 bookmarklet

請在下文的 bbs 小書籤超連結上按右鍵加入書籤，或是用拖曳的方式將超連結放到書籤列中：

bbsjs 小書籤超連結

bbsjs api

bbsjs 會抓取文章內第一個 script 或 html 標籤，整個寫入到 iframe 中，如同把 script 存成 html 檔後開啟，並在網頁裡執行 script 內容。

裡面可以用 document.write、alert confirm prompt，甚至操作 dom，與使用者互動。

<script> 
/* javascript */
alert('hello world!')
var username = prompt('what is your name?')
document.write('good bye ' + username)
</script>

如果是 <html> 可以直接寫 html 元素，甚至用 <script src="https://some.script"> 引入其它 javascript，就和平常寫網頁一樣。

<html>
<meta charset="utf-8">

<pre id="markdown-raw">
# write your markdown here
this **markdown** is power by [gholk/marked] .

[gholk/marked]: http://github.com/gholk/marked/
</pre>

<div id="markdown-html"></div>

<script src="https://gholk.github.io/marked/marked.min.js"></script>
<script>
  const raw = document.querySelector('#markdown-raw').textContent
  const html = marked(raw)
  document.querySelector('#markdown-html').innerHTML = html
</script>
</html>

要用 ajax 的話要設好 cors，在 iframe 的 context 裡沒有任何網址是 same origin。（自己 document.write(location.href) 就知道了。）要注意是網址不要簡寫成 src="//some.script" ，因為該 iframe scheme 是在 blob: ，要寫 https:// 。

範例程式

在 PttWeb 板的介紹文兼簡單的程式
ptt 測試板 test 裡有幾篇，搜 bbsjs 就有了。但一周後會被清掉，就不放網址了。
個人站 http://clam.ml 的 test 板裡有幾篇示範程式，被 m 了應該不會被清。 -->

版本歷程

以下各標題為版本名，版本從新排到舊排列。

目前版本都沒有和 ptt chrome 互動，是直接從 html 裡抓出文章內的 script，再用 css 把執行結果放在頁面中央。未來期望可以整合進 ptt chrome，把 script 執行結果直接插到 ptt chrome 的好讀版內。

jquery bye

移除 jquery 直接使用 document.querySelector ， greasemonkey 使用頁面內自帶的 jquery 的話好像有 scope 問題，移除就沒問題了。

blob url mime type

chrome 不會把沒指定 content-type 的內容當成 html，所以改用 File api，並設定型別為 text/html 。

原型說明頁

在一開始的 iframe 加入首頁也就是說明頁面，還加了一個會在 iframe 內開啟的說明頁的超連結。

iframe 原型

bbsjs 正式發布友善可用的原型了！把 bbsjs 在原分頁內用 iframe 載入，並有按鈕開啟、收合 iframe。

把和有的沒的元素 style 都放在 body > div#bbsjs-container 內，用了很多 jquery。

目前是用 URL.createObjectURL 和 iframe.src 載入腳本，因為 grease monkey 的 script 不能寫入 iframe.contentDocument ，二者被判為不同 origin，只好用這種奇怪的方法。

分頁原型

bbsjs 會在新開的頁面載入。這本的 user.js 不能用，後來發現是下一版 iframe 原型那個 same origin 的雷， *.user.js 和原本頁面不是 same origin。

BBSLua

以前 ptt 有一個在文章內嵌入 lua 程式，讓使用者可以執行 lua 互動。目前在 ptt2 可以使用 bbslua，但因為 lua 還是要在 ptt 伺服器上執行，考量效能 ptt1 負載已經很重，就沒有引進到 ptt1。

如果是 javascirpt 就能在瀏覽器上執行，不會再增加 ptt 負擔。而且現在用瀏覽器上 ptt 的人數也增加了，像 BBSFOX 或 ptt chrome，甚至 ptt 官方也開放用 websocket 從 https://term.ptt.cc/ 上 ptt。安裝 bbsjs 後，就能直接在瀏覽器上執行 bbsjs。

問題回報與討論

如果要報 bug 或提功能建議，可以在本文下面的 discus 留言板討論， disqus 如果不想註冊，可以匿名評論。或是在 bbsjs 的 github repository 開 issue、發 pull request。