iT邦幫忙

DAY 2
5

Chrome Extension 開發筆記系列 第 2

Chrome Extension 筆記(02)入門

  • 分享至 

  • xImage
  •  

上一篇提到了利用 manifest.json 來建立一個簡單的程式雛型,
這篇開始介紹 manifest.json 檔裡的属性及對應的用途.
在 manifest.json 裡有許多属性並不是那麼常用到,
因此這次我會先介紹在開發上最常用到的幾個屬性,
其餘的屬性之後如果有用到, 會再做補充說明

下面是以瀏覽器按鈕(browser_action)為例

{
	// 必填
	"manifest_version": 2,		// 文件清單版本, 目前固定為 2
	"name": "ironman6",			// 不超過 45 字元的名稱
	"version": "1.0",

	// 瀏覽器按鈕
	"browser_action": {
		"default_icon":  "icon.png",
		"default_title": "ironman6",
		"default_popup": "popup.html"},

	// 可選
	"description": "參賽即是勇者,完賽就是英雄",
	"icons": {
		"16":  "icon16.png",
		"48":  "icon48.png",
		"128": "icon128.png" },
	"permissions": [
		"tabs",
		"storage",
		"notifications",
		"unlimitedStorage",
		"http://*/*"
	],
	"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}

可以注意到 default_popup 裡的值是 popup.html,
他會指向同目錄下的 popup.html 檔,
(chrome-extension://<extension_id>/<path>)
而前一篇為了簡化, 所以才指向 manifest.json 自己.
(補充資料:browserAction)

接著 permissions 是裡面重要的屬性之一,
要寫出功能豐富的 Chrome Extension 不能沒有它,
這裡設定的 tabsstoragenotificationsunlimitedStoragehttp://*/*
分別代表
tabs : 能新增、修改、讀取分頁
storage : 和 HTML5 的 localStorage API 類似, 但功能更齊全
notifications : 讓擴充功能也能有桌面通知
unlimitedStorage : 取得無限的儲存空間(Chrome預設似乎是 5 M)
http://*/* : 要讓 AJAX 能夠跨網域訪問就靠它了
(補充資料:關於聲明權限)

最後則是 content_security_policy,
沒記錯的話這屬性是在 文件清單版本2 才加入的,
主要是因為 Chrome Extension 的内容安全策略(CSP)預設不允許存取外部資源,
因此像 Google Analytics 這樣有嵌入外部 js 的需求,
就必須透過這屬性將它設置成白名單.
(補充資料:内容安全策略(CSP)


上一篇
Chrome Extension 筆記(01)概述
下一篇
Chrome Extension 筆記(03)安全策略
系列文
Chrome Extension 開發筆記27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

我要留言

立即登入留言