
大家是否有在使用瀏覽器『擴充套件』呢？筆者已經使用 [uBlock](https://github.com/gorhill/uBlock) 這款開源的廣告阻擋器多年囉，但是一直以來都不知道瀏覽器擴充套件是如何製作以及其可取用的 API 為何，前陣子花了點時間研究一下，才發現在 Chrome/Chromium 上開發擴充套件竟然是如此的簡單，而且可取用的 API 跟在 Web 上也完全不是同一個檔次，今天就來看看這些東西，順便找些場景來應用。

## 如何建立，並開始開發 chrome 擴充套件

首先去看了官方文件：[https://developer.chrome.com/extensions/getstarted](https://developer.chrome.com/extensions/getstarted)

請先建立一個空的資料夾作為擴充套件專案資料夾，接著在資料夾中建立 `manifest.json`，用來設定擴充套件的名字，敘述等：

```json
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}
```

接著打開 Chrome 瀏覽器到 `chrome://extensions/`（在網址列上直接輸入即可），右上角有個 `Developer mode` (開發模式)，把它打開：

![](https://i.imgur.com/Frw9ya4.png)

你會發現有幾個按鈕跑出來：

![](https://i.imgur.com/Rvlsf5x.png)

按下 `Load unpacked` 並且選取 `manifest.json` 所在的資料夾，接著可以看到擴充套件就這樣出現了：

![](https://i.imgur.com/SMMXxdu.png)

沒錯，就是這麼簡單，幾乎不用任何開發工具，就是 chrome 跟你最愛的編輯器即可；當然 `manifest.json` 還能放[其他欄位](https://developer.chrome.com/extensions/manifest)，例如加上 `icons`:

```json
{
  ...
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  ...
}
```

`icon.png` （或是其他檔名也可以）隨便找一張圖即可，就直接放在跟 `manifest.json` 同個資料夾下即可；在修改之後會需要來按下這邊的重整按鈕 **更新**擴充套件，這樣一來我們就可以測試剛改好的擴充套件是否如預期執行：

![](https://i.imgur.com/AwVCb3O.png)

## Chrome 擴充套件能做哪些事？

上面建立了一個 chrome 擴充套件，但是它什麼功能也沒有，毫無反應；官方文件有一頁概觀列出擴充套件上可以使用的功能：

[https://developer.chrome.com/extensions/devguide](https://developer.chrome.com/extensions/devguide)

這篇文章將以兩個情境來介紹筆者比較有興趣的幾個功能

## 情境 1: PTT 新文章提醒

其實就是文章**爬蟲**，只是透過 chrome 瀏覽器**定期**進行檢查，並且比對是否跟**上次**爬的資料一樣，不一樣的話**通知**使用者，這樣聽起來會需要幾個功能：

* 定期在背景執行程式
* 進行 http call 抓回網頁資料
* 資料儲存功能
* 通知功能

在[官方 get started](https://developer.chrome.com/extensions/getstarted) 建立擴充套件之後第一件事就是在 `manifest.json` 給一個 `background.js` 讓擴充套件有程式可以執行：

```json
{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

```

可以先在 `background.js` 寫上一個 `console.log('hello chrome extension!')` 測試一下，並請他在安裝好的時候執行：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  console.log('hello chrome extension!');
})
```

重整更新之後可以看到 `Inspect views background page` 出現了，點下去就是熟悉的 Chrome DevTools:

![](https://i.imgur.com/bMJfVqJ.png)

### 定期在背景執行程式

這個功能叫做 [alrams](https://developer.chrome.com/apps/alarms)，首先必須要在 `manifest.json` 加入權限：

```json
{
  ...
  "permissions": ["alarms"],
  ...
}
```

接著在安裝好擴充套件時加入 alarm，這邊請他每分鐘執行一次：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('check', { periodInMinutes: 1 })
})
```

> [官方文件上其他執行時機的選項 (alarmInfo)](https://developer.chrome.com/apps/alarms#method-create)

同時加上 alarm callback 作為定期執行的程式：

```javascript
chrome.alarms.onAlarm.addListener(alarm => {
  console.log("Got an alarm!", alarm);
});
```

一樣戳一下重整按鈕，一分鐘之後應該可以看到：

![](https://i.imgur.com/neroB2T.png)

### 進行 http call 抓回網頁資料

既然是在瀏覽器的 Javascript 環境，第一個想到的 API 就是 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 了，假設要來抓 [PTT mobilesales](https://www.ptt.cc/bbs/mobilesales/index.html):

```javascript
fetch('https://www.ptt.cc/bbs/mobilesales/index.html')
```

馬上就會看到錯誤發生，Chrome 也很好心地直接在擴充套件管理界面上讓你知道有事情不太對勁：

![](https://i.imgur.com/K142TGD.png)

![](https://i.imgur.com/Cusc460.png)

沒錯，[跨站存取問題](https://zh.wikipedia.org/wiki/%E8%B7%A8%E4%BE%86%E6%BA%90%E8%B3%87%E6%BA%90%E5%85%B1%E4%BA%AB)，不過我們可是擴充套件，只要在 `manifest.json` 的 `permission` 給上允許存取的 [URL pattern](https://developer.chrome.com/extensions/match_patterns) 即可，像是這樣就可全開：

```json
{
  ...
  "permissions": [..., "*://*/"]
  ...
}
```

那麼接下來的問題就是如何從 html 中找到要找的資料，筆者使用 [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)，接著就可以用 Web/DOM API 享受找元素的方便性（例如 `querySelector`），迅速找到 mobilesales 最新的文章標題。

### 資料儲存功能

Chrome 擴充套件提供了自己的 [storage API](https://developer.chrome.com/extensions/storage)，首先得上 `"storage"` 到 `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "storage"]
  ...
}
```

接著就可以透過這樣的語法進行讀寫，把 `fetch` 到的文章主題存起來：

```javascript
chrome.storage.local.set({ key: value }, callback)
chrome.storage.local.get('key', result => { console.log(result.key) })
```

這組 API 是非同步的，所以需要 callback 來接，筆者看到這就立刻用 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 包起來接下來就能用 async/await 寫更漂亮的語法。

### 通知功能

定期抓資料回來比對跟上次存起來的文章標題是否一樣，不一樣的時候就是有新文章，這時通知使用者，chrome 擴充套件也有 [notifications API](https://developer.chrome.com/apps/notifications)，第一件事情一樣是加上  `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "notifications"]
  ...
}
```

我們就可以呼叫 API 通知使用者：

```javascript
chrome.notifications.create('reminder', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'ptt mobilesales first post:',
  message: '[賣/台北/面交] iPhone ...', // fetch 到的最新文章主題
});
```

![](https://i.imgur.com/FHXOhfD.png)

接下來就是寫 Javascript 進行邏輯串接了，筆者也有進行一些改良，完整程式碼請見 Github repo: [https://github.com/pastleo/ptt-watcher-chromext](https://github.com/pastleo/ptt-watcher-chromext)

## 情境 2: 單字蒐集

這個就有趣了，使用者在**任何網頁上瀏覽時**，看到一個沒學過的單字想要**紀錄**下來，於是把文字選取起來，**按下隨即出現的 `Add` 按鈕**把文字加入複習清單內。點選 UI 上的擴充套件 icon 會有 **popup** 看到蒐集的單字數量；也可以打開一個**擴充套件頁面**來進行複習，這樣聽起來會需要幾個功能：

* 在瀏覽中的網頁上執行指定的 Javascript
  * 而且可以存取到頁面上的 BOM/DOM、擴充套件 API
* 點選擴充套件 icon 有個 popup
* 打開並顯示一個複習頁面

當然還是需要資料儲存功能，上面已經提過就不再提，這部份最有趣的部份就是 `在瀏覽中的網頁上執行指定的 Javascript`，也就是在別人的網站上執行自己寫的 Javascript。

### 在瀏覽中的網頁上執行指定的 Javascript

這個功能就是 [**`content_scripts`**](https://developer.chrome.com/extensions/content_scripts)，需要 [`activeTab`](https://developer.chrome.com/extensions/activeTab) permission，所以當然還是得先在 `manifest.json` 上寫好，同時也要告訴 chrome 你要執行的 Javascript 檔名跟執行的網頁 [URL pattern](https://developer.chrome.com/extensions/match_patterns):

```json
{
  ...
  "permissions": [..., "activeTab"],
  "content_scripts": [{
    "matches": ["https://*/*", "https://*/*"],
    "js": ["contentScript.js"]
  }]
  ...
}
```

照這樣設定，在瀏覽任何網頁時都會在上面執行 `contentScript.js`，我們就可以所有網站加上我們自己想要的行為。

#### 關於 `contentScript.js`

* 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#run_time)，`contentScript.js` 預設會在 `document_idle` 時執行，也就是說至少都已經 [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)
* `contentScript.js` 可以透過 `window`/`document` 操作網頁的 BOM/DOM
* 有趣的是，`contentScript.js` 同時還可以呼叫 `chrome.storage` 等擴充套件才有的 API

> 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#isolated_world)，`contentScript.js` 跟原本網頁是不同的 Javascript runtime 實體，經過測試確實是如此，使用 `window.testVar = 123` 在另外一邊是拿不到的，但是 BOM/DOM 操作對象是同一個

#### 文字選取偵測，偵測到時加上按鈕

策略很簡單，就是在整個 `document` 上監聽 `click` 事件，並使用 [`window.getSelection()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) 看是否有文字被選取，有的話就放上按鈕把選取的文字儲存起來：

```javascript
document.addEventListener('click', event => {
  const selected = window.getSelection().toString();
  if (!selected) return;

  button = document.createElement('button');
  button.textContent = 'Save this';
  // 設定 button.style 使得按鈕出現在滑鼠附近

  button.addEventListener('click', () => {
    // 透過 chrome.storage 把 selected 存起來
  });

  document.body.appendChild(button);
})
```

### Popup 以及複習頁面

* 點選擴充套件 icon 時的行為可以透過設定 [browserAction](https://developer.chrome.com/extensions/browserAction) 來決定，指定 `default_popup` 到一個 html 檔案即可
* 複習頁面的部份就建立一個 html 網頁
  * 同時我們來把這個複習頁面當成 [擴充套件選項頁（Options）](https://developer.chrome.com/extensions/options#full_page)

在 `manifest.json` 中指定這些 html 檔案：

```json
{
  ...
  "browser_action": {
    "default_popup": "popup.html"
  },
  "options_page": "review.html",
  ...
}
```

接下來內容排版、行為實做就是一般靜態網頁的開發，唯一的差別就是多了擴充套件 API 可以使用，像是上面提到的 [storage API](https://developer.chrome.com/extensions/storage)

擴充套件的所有資源都有一個特定的 URL 可以連到，透過 `chrome.runtime.getURL('review.html')` 得到擴充套件內 `review.html` 的 URL，然後在 popup html 內加入一個按鈕來開啟這個 URL。

> 想知道 `chrome.runtime` 還有什麼 API 可用？請參考[官方文件](https://developer.chrome.com/擴充套件s/runtime)

同樣地筆者也進行一些改良，簡易字卡蒐集小工具就這樣完成囉：

<amp-iframe width="560" height="315" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" src="https://www.youtube.com/embed/NL5ajwr88Yw" allowfullscreen >
</amp-iframe>

完整程式碼請見 Github repo: [https://github.com/pastleo/word-cards-chromext](https://github.com/pastleo/word-cards-chromext)

---

今天透過兩個場景介紹了幾個基礎的擴充套件 API，光是這些東西就已經足以做很多強大的功能了，而且還不只有這些，它甚至還可以操作[書籤](https://developer.chrome.com/extensions/bookmarks)、[Tabs](https://developer.chrome.com/extensions/tabs) 等，就算沒有要發布到 [Chrome web store](https://chrome.google.com/webstore)，用自己寫的程式解決日常使用 Chrome 瀏覽時遇到的問題也是很有趣的，接下來就讓各位讀者們自己去探索囉！

同時筆者會基於這篇『單字蒐集』的擴充套件進行加強，開設工作坊給大家一起學習體驗，有興趣的朋友請關注五倍粉絲團：[https://www.facebook.com/5xruby](https://www.facebook.com/5xruby)

> 本文同步發表在筆者的部落格：[https://pastleo.me/post/20200731-chromext-apis-word-cards](https://pastleo.me/post/20200731-chromext-apis-word-cards)

post-PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用


# 專案管理起步走：五件重要的小事

最近因為參加聚會聽到了在不同領域擔任專案管理的分享，談到專案管理過程中幾個共通的問題，剛好趁這個機會，想回顧一下，這兩年內學會了什麼，心態上又改變了什麼？於是整理出五件我覺得改變我工作方式的重要小事

1. 事情分輕重緩急，追蹤問題
2. 學習談判，細心與耐心
3. 專案的建議，但把選擇權交回客戶
4. 建立團隊從小原則開始
5. 抓好時間管理，讓客戶感受到被重視

### 1. 事情分輕重緩急，追蹤問題

> 剛開始做 PM 工作的第一個月，每一封信每一個對話我都回的戰戰兢兢，深怕遺漏掉任何事情，只要客戶一問「這東西進度怎麼樣啦？」我就會緊張的跑到工程師旁邊問他所以進度怎麼樣，弄的大家都很緊張...

雖然說工作上是以客為尊，快速的回應會讓顧客有好印象，但若只為了這樣而中斷自己甚至工程師的工作時，就可以停下來想一下客戶提出來的問題是不是真的這麼的迫切？

適時的讓客戶知道，我們已經收到你提出來的疑問了，並且會盡快為他處理這些問題
也因此 PM 身上也會一串長長的追蹤事項，每天固定找一個時間，重新檢視一次今天需要追蹤的問題，把處理掉的問題劃掉，

### 2. 學習談判，細心與耐心

PM 其中一個重要的工作在於如何溝通協調，對外我們要判斷需求，並適時的給予客戶專業建議、對內需要學著跟工程師協調任務的先後順序，這也是為什麼大家常說 PM 學著說不同的話，在面對不同領域的人有著不一樣的腦袋，如何聽懂對方的話、使彼此交流順常，找出最適的解決方案，溝通是專案管理最重要的軟實力。

關於協調與談判，我自己的心得是可以從耐心的傾聽以及換位思考開始練習，在 <卡內基溝通與人際關係：如何贏取友誼與影響他人> 書中，戴爾‧卡內基（Dale Carnegie）曾提到，假如你在職場上只學會一樣東西，就是能從自己與別人的角度思考、去看事情，那很有可能是你人生、事業成功的踏腳石。

### 3. 專案的建議，但把選擇權交回客戶

>「這樣不行，那樣不好，不然你告訴我你覺得怎麼樣才行？」

從第二點延伸，許多時候客戶會提出不太明確的需求或是天馬行空的想法，在我們傾聽完客戶的需求後，對於一些複雜的需求我們可能將需求帶回去在和工程師討論可行的方案，而最後我們可以怎麼呈現給客戶？

在想解決方案的過程中透過換位思考的方式，重新站在客戶考量他的需求，這裡的需求有時不單只是產品需求，還有成本、時間的考量也要加在這當中，透過提案的方式，列出可行的解決方案的優缺點後、需要開發的時間、成本後，將最後的選擇權交回給客戶。

透過良好的表達方式呈現我們解決問題的專業，同時也尊重客戶的選擇，除了能把問題解決之外最重要的是贏得客戶的信任。做 PM 給我一個很大的訓練是，我們得先聽懂並且了解對方的需求，在以專業的建議表達自己的需求，從中找尋交集的解決方式，就可以創造雙贏。

### 4.  建立團隊從小原則開始

理想上我們都希望能待在一個好的團隊，團隊裡的成員會自發性的去學習、並且積極地完成工作。但有時就算很幸運的遇上一群擁有很高熱忱的成員，若能有一些小的原則在這團隊當中發酵，更能將大家的力量凝結起來，發揮團隊最大的作用。

我覺得可以從每日的站立會議開始

站立會議其實是 Scrum（敏捷軟體開發過程）中的一部份，但我自己的心得是不一定只能用在 Scrum 的專案中 (畢竟不是每個專案都適合 scrum) ，每日的站立會議，能夠讓團隊成員有更多時間專注在工作上，同時也讓 PM 更輕鬆、即時地掌握實際情報

有效的站立會議我覺得有幾個要點：

  *  每天固定的時間
  *  會議時間不超過 15 分鐘
  *  一次只有一個人發言，並只針對三個重點說明，包括「昨天完成了哪些任務」、「今天的預計要執行的任務」、「碰到的問題」
  *  遠端的工程師可使用一些視訊軟體輔助，一樣可以參加站立會議

PM 在這當中有點像是引導者，透過發問的方式，讓團隊成員們慢慢的熟悉站立會議的模式，同時也讓自己更能掌握實際的狀況。

### 5. 要讓客戶感受到被重視

由於 PM 身上可能會不只處理一個專案，如何在不同專案之間做好顧客關係管理，我想很大一部分跟時間管理有關係。

在第一點時我提到了事情要分輕重緩急，分完後依序地處理每件事情之外，另外也可以透過一些工作摘要整理成進度跟客戶做回報，表現出主動追蹤處理問題的態度，重點式的回報進度給客戶，客戶在知道專案狀況後通常會比較放心。

許多時候 PM 除了專注於管理專案的進度之外，也需要服務客戶的心理狀態，讓客戶放心也感受到備受重視

### 最後，我對 PM 工作的想法

專案管理有趣卻也困難的是在於許多事情沒有完美或唯一正確的解答，只有能被大家接受的解決方法，當 PM 需要學會在這灰色地帶中透過有效的溝通作出決定，並學習接受現實世界中不可能滿足所有人的狀況下，如何使專案能夠向前推進。


五倍紅寶石・專業程式教育機構

全方位培訓營

ASTRO Camp

線上課程

短期課程

專欄文章

最新消息

PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

專案管理起步走：五件重要的小事

電話 | (02) 2331-5247

信箱 | course@5xcampus.com

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

全方位培訓營

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

部落格

專欄文章

最新消息

幫助與政策

常見問題

隱私權政策

服務條款