Userscript：用 React 升級你的 Dcard，喜歡圖片蓋樓文的有福了

dcard-images 讓你一次瀏覽文章內所有樓層的圖片

5 min readJan 10, 2020

最近趁著想到要修一下 dcard-images 的 bug 時順便加了功能改了架構，從原本用 VanillaJS 框架換成 React/Babel/webpack 以及初嚐了一下 Storybook。至於什麼是 Userscript，可以參考先前這篇說明

功能介紹

不囉唆，先來看看成果

可以看到安裝後在文章標題後面會多了一個按鈕可以開啟圖片庫，裡面收錄了文章與所有留言內的圖片，並且能以 Carousel 形式單張瀏覽

有鑒於在 Dcard 上有些看板的文章通常都會帶有多張圖片或根本圖片才是重點，甚至是圖片蓋樓的文章，從本文到留言都會充滿了同一系列或主題的圖片，充滿好奇的你就會想打開所有留言看看有沒有漏掉的美圖，但當無意義的留言量過多時就令人十分困擾了

今後，有了這樣的功能，只喜歡欣賞圖片的你就再也不用辛苦地捲完上百上千則留言，甚至浪費了一堆時間展開所有留言才發現圖片沒幾張

安裝

hmm.. 直接參考這裡

技術部份

其實就是把原本用 native JavaScript 來操作 DOM 的方式改成基本的 React app 並 render 到文章標題

事前準備

1.UI 設計
使用情境是先有個按鈕 > 打開圖庫 > 單張瀏覽，所以會有三個主要的 components

2.Data 來源
需要文章的圖片跟留言的圖片，所以要先去拿文章資料再去爬過所有留言
要拿文章可以透過 GET /_api/posts/{POST_ID}

{
  "id": 232859939,
  "title": "",
  "content": "",
  "createdAt": "",
  "commentCount": 172,
  "likeCount": 3945,
  "school": "",
  "gender": "F",
  "media": [],
  "mediaMeta": [],
  ...
}

然後再拿留言 GET /_api/posts/{POST_ID}/comments?after={FLOOR}

[
  {
    "id": "",
    "anonymous": true,
    "createdAt": "",
    "floor": 141,
    "content": "",
    "likeCount": 5,
    "gender": "M",
    "school": "",
    "host": false,
    ...
  },
  ...
]

3.Render 行為
因為 Dcard 是 SPA 所以 Userscript 在只有在進到第一個頁面的時候會執行，因此需要去監聽換頁/文章讓我可以正確地把開啟圖庫的按鈕塞到標題後方，這邊可以去聽 URL 或 canonical

開工

刻 component
Render 到文章標題

document.querySelector('article h1').innerHTML +=
  '<span id="dcard-images-root"></span>'ReactDOM.render(
  <App />,
  document.getElementById('dcard-images-root')
)

3. Bundle 成一支 JS，即最終的 Userscript 本體