2013/12/25

Google Chrome Extensions API 第一次的Chrome extensions

想整理一下書籤，但不喜歡Chrome書籤管理方式，所以就自己寫一個了！
擴充套件主要有以下幾種：

  1. 一個配置檔
  2. N個網頁檔
  3. N個JavaScript
  4. N個檔案

架構有以下三種：

  1. 背景頁面
    • 瀏覽器動作
    • 頁面動作
  2. 使用者介面
  3. 內容腳本



首先，複製Sample的JSON


Manifest_Version：是針對Chrome版本去修改
Version：數字可以由0~65535，最多有四組號碼
Description：可以提供套件一些描述，最多132字元
Icons：提供三種大小，16*16和48*48以及128*128，格式支援PNG,BMP, GIF, ICO, and JPEG，首選是PNG
Permissions：使用某些元件可能需要加入指定權限
BrowserAction：Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.

以下是我的擴充套件程式碼：

Manifest.JSON：
{
  "name": "My Extension",
  "manifest_version": 2,
  "version": "1",
  "description": "First Demo",
  "icons": { "128": "icon.png" },
  "browser_action": {
    "default_title": "Title",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}


HTML：
<!DOCTYPE html>
<html>
<head>
 <title>Title</title>
</head>
<body>
 Google
</body>
</html>


開啟開發人員模式

載入擴充套件


載入後，如果沒有錯誤，就可以看得到自己的套件了！


結果就如下圖：




參考資料：
http://developer.chrome.com/extensions/overview.html

圖片來源：
http://icons.iconarchive.com/icons/everaldo/crystal-clear/128/Mimetype-html-icon.png
By at
標籤: