Chrome Extension - 104 Ptt Comment

許銘仁
6 min readOct 1, 2020

--

之前在找工作時,為了快速方便的查詢公司評論,進而產生出這個簡單的 Chrome 擴充功能。

目錄

  1. 動機
  2. 目標
  3. 開發過程
  4. Demo
  5. GitHub
  6. 參考資料
  7. Google Chrome Extension 商店位置

動機

會做這個擴充功能,是因為在看到適合的職缺時,我都會去查看該公司在網路上面的資訊與評價等等…,然而查詢公司的評價相對可靠的資訊,通常會是可以匿名的平台,畢竟沒甚麼人敢公開評論自己的公司吧!?

所以我選擇匿名平台作為資料查詢的來源,PTT 與 天眼通,但無奈天眼通沒有提供串接 API 也禁止爬網,所以只能用 PTT 作為主要來源。

題外話:
天眼通也有開發自己的 chrome extension,但似乎沒在維護了,到 104 網頁上,即便有該公司的評論,天眼通的 chrome extension 也是空空如也~
個人私心建議:
不如把網站關掉,改將資料以 API 方式提供,讓更多開發者一起合作,能夠讓更多人看到這些資料,不然感覺擺著好浪費,雖然這流量感覺也是一筆不小的花費,哈哈

目標

根據動機與使用方便性,想出來以下三個項目:

1. 自動偵測並查詢目前公司名稱

能夠直接讀取網頁上的公司名稱,在頁面呈現時直接查詢相關 PTT 評論,方便使用者直接查看。

2. 針對名稱進行 PTT Crawler

透過爬 PTT 網頁,然後查詢 PTT 工作評論。

3. 移動式視窗

在特定的頁面顯示移動式視窗,方便使用者移動與查看。

開發過程

自動偵測並查詢目前公司名稱

針對此我們必須要獲得目前 104 網頁中頁面元素上的公司名稱,所以去查了一下 104 公司名稱,都是放在 h1 元素中,所以我們就只要指定 104 公司頁面的 h1,就能夠抓到公司名稱了。

再來說到 manifest.json 是每個 chrome extension 都必備的文件,透過該文件來給予 chrome extension 相對應的名稱、訪問權限、網頁資源等等…

對我來說我只需要抓去頁面內容的能力,這邊可以使用一個 chrome extension 提供的 chrome.tabs API,chrome.tabs 大部分的方法皆不需要再 permissions 部份加上 tabs 的權限。

首先我們透過 chrome.tabs.query 的方法去抓取目前的頁籤,再透過chrome.tabs.executeScript 執行抓取 h1 元素的動作,再將抓到的元素內容丟到 callback function 去搜尋 PTT 內容。

此外要再加入我們訪問頁面的權限(包括訪問 104 網站與爬 PTT 網站)

"permissions": ["https://*/"]

針對名稱進行 PTT Crawler

透過前面抓取方式,callback function 就會拿到 h1 元素的內容,也就是公司名稱,剩下就是簡單的爬蟲啦~~(目前預設搜尋為最新的20筆資料,使用者可以根據不同頁數進行搜尋),所以就不多作介紹了 (別在許多大神前面耍大刀 QQ)

這邊因為我比較屬於科技業,所以我只有挑選兩個 PTT 板來進行搜尋,分別是 Soft Job 與 Tech Job,如果未來有需求會再加入新的看板,哈哈。

此外我這邊有針對很多特別的詞語去做斷詞(Stop Word),因為基本上不會有人用全名去搜尋吧…(e.g. XXX股份有限公司)。

斷詞目錄,如下
--------------------------------------------
"科技", "股份", "公司", "有限", "企業","集團",
"國際", "家庭", "online", "網路","股", "資訊",
"服務", "社", "分公司", "台灣"
--------------------------------------------

所以我將一些比較常用的詞語剃除,才會去搜尋,除此之外也提供搜尋框,讓使用者可以自由輸入想要查詢的公司。

移動式視窗

這邊是一開始我遇到比較麻煩的地方,因為基本的教學都是需要使用者觸發,也就是點擊插件的圖案,與我想做的固定視窗有相當大的差別。

查許多網站資料,發現可以換個做法:在目前的頁面上建立一個新的節點(html element),然後透過 iframe 將自己做的網頁在嵌進來,方法如下:

首先,透過 Content Scripts 可以對訪問的網頁進行操作,針對目前的網頁內容 inject 自己寫的 js 與 css (也就是我們的 iframe),其中指定特定網址才進行 inject。

使用 Content Scripts,其聲明方式分為兩種 Inject Programmatically 與 Inject Declaratively,簡單來說就是寫 code 聲明或是寫在 manifest.json 中,我這邊是選擇寫在 manifest.json 中。

再來是如何將自己寫的 html input 到 iframe 中,這邊透過 chrome runtime getURL 將目錄中的 html 專案路徑寫到裡面,即可訪問該文件,如下:

因為是同源問題,iframe 要給予相關設定,否則無法存取,此外如果要訪問專案下的任何資源都需要在 manifest.json 中聲明。

上述的整體 manifest.json 如下:

到這邊基本上上述的三個項目都已經解決了。

題外話

開發問題都好解決,不過在發布時遇到最難的難題,他要有 icon 跟基本的宣傳圖,傻眼 =.=,對於我這個只會畫線條人的來說,根本超難,之後還被退件(上傳文件缺東缺西,還是其實醜到連 google 都看不下去,哈哈)

目前美化過的 v 1.1.0 已經上線了,終於不會像剛開發的時候那麼醜了~QAQ。

之後 v 1.1.1 版會加入頁數的搜尋,等審核通過後就會發布了。

Demo

GitHub

參考資料

Google Chrome Extension 商店位置

--

--