Chrome Extension Basic

介紹

官方文件

API

基本外掛

一開始要做一個簡單的外掛，建立一個按鈕在 Chrome 旁邊

要做一個按鈕會使用到 chrome.browserAction，如下圖所示

panel

當然還有其他類型的按鈕，例如pageAction，下圖橘色 RSS 按鈕

panel

不過為什麼不命名為browserButton這就不清楚了

再來看一下 API 頁面的介紹，基本上 API 介紹不外乎下面幾個重點

1
2
3
4
5
描述功能 : 就是描述功能
Manifest : 如何寫(裡面出現 optional 代表可寫可不寫)
小提示   : 告訴你可以用在什麼情境或是要注意的一些事情
範例     : 提供 Google 寫的範例原始碼
API      : 此元件可用的 API，例如 browserAction 可以用 setTitle 這個方法

開始撰寫

一開始撰寫Manifest，他就是一個 json 格式的檔案，裡面描述此外掛的訊息

當然內容也是有標準規定

Manifest 內容類別有分為 4 種

1
2
3
4
Required           : 一定要寫
Recommended        : 建議要寫
Pick one (or none) : 擇一或不選
Optional           : 可選可不選

以下為其中一部分範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false
  },
  ......
}

目前我們要使用browserAction，所以Manifest內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "manifest_version": 2,
    "name": "基本範例",
    "version": "1.0",

    "description": "第一個外掛",
    
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },    
    
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]    
}

這邊比較重要的就是permissions

如果你要取得使用者的資料(例如他目前在看什麼網頁)，就需要用特定的permissions

當然使用者使用時會根據你要求的permissions來決定要不要使用此外掛

第一個activeTab的用途在你可以暫時的取得使用者目前在看的網頁網址、網站標題、等等

第二個是一個網址，此欄位稱為Match patterns

例如你可以取得此網址的資源，或是只有瀏覽到此網址才會運作你的外掛

把以下 3 個檔案下載放同一個目錄

icon.png

popup.html

popup.js

browser_action裡面定義按鈕圖案，以及按下去之後會打開什麼頁面(popup.html)

先將popup.html改成以下內容，載入外掛後按下按鈕就會出現 Hello

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>
  </head>
  <body>
    Hello
  </body>
</html>
2016-10-28_173627.png

如果成功出現 Hello 則把 popup.html 改為以下內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    Hello
    <div id="status"></div>
    <img id="image-result" hidden>
  </body>
</html>

唯一要注意的是，js 檔案要和 html 分開，不能將 javascript 放在 html 裡面

1
2
JavaScript and HTML must be in separate files: 
see our Content Security Policy documentation[1] for details and explanation.

首先一樣將 popup.js 改為以下內容

改完之後在按鈕上按右鍵，選擇檢查彈出式視窗，就會出現Press Button!

1
2
3
document.addEventListener('DOMContentLoaded', function() {
     console.log("Press Button!");
});

這樣寫代表加入一個事件監聽器，監聽 DOMContentLoaded 事件是否被呼叫

簡單的說，只要一發生 DOMContentLoaded 事件，就去呼叫後面那個 function

而 DOMContentLoaded 事件發生代表當 DOM 加載完成(不包括樣式表、圖片等)

另一種寫法如下，把 function 分開比較容易看懂

1
2
3
4
function pressBtn() {
    console.log("Press Button!");
}
document.addEventListener("DOMContentLoaded", pressBtn);

接下來看這個 API chrome.tabs.query(object queryInfo, function callback)

queryInfo是你自訂的一個物件，此物件裡面有許多參數可以使用

例如你可以這樣寫來建立一個物件

1
2
3
4
var queryInfo = {
  active          : true,  // 取得目前的 TAB 頁面
  currentWindow   : true   // 取得目前的 Window 頁面
};

Window表示目前使用的 Chrome，因為你可以開多個 Chrome

所以你要指定目前使用的Chrome，以及目前使用的頁面，所以把程式改寫為

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function currentTabInfo(tabs) {
    var tab = tabs[0];
    var url = tab.url;
    console.assert(typeof url == 'string', 'tab.url should be a string');
    console.log("Current Tab Url = "+url);
}

function getCurrentTabUrl() {
    var queryInfo = {
        active          : true,
        currentWindow   : true
    };
    chrome.tabs.query(queryInfo, currentTabInfo);
}

function pressBtn() {
    getCurrentTabUrl();    
}
document.addEventListener("DOMContentLoaded", pressBtn);

以上就是基本的外掛流程

作品

在研究 API 一陣子後，完成了一個簡單的作品

此外掛可以下載 FB 相簿，其中包含 FB API 的使用以及 javascript 的爬蟲

你可以到 Google store 下載試試看

JC Facebook Album Download