iT邦幫忙

DAY 1
7

Chrome Extension 開發筆記系列 第 1

Chrome Extension 筆記(01)概述

  • 分享至 

  • xImage
  •  

Chrome 的套件能分成應用程式、擴充功能及主題三大類,
而擴充功能又能分成頁面按鈕(page action)及瀏覽器按鈕(browser action),
以下簡單的說明各種套件的差異以及應用場景(不包含主題)。
一、應用程式(Gmail 離線版FeedlyCacoo)
適合在原有網站的服務上做些做些加強,
例如 Gmail 離線版主要是加上了 unlimitedStorage 權限, 來取得無限的空間儲存。

以下的例子能製作一個最基本的 Chrome 應用程式:
在新目錄下產生一個manifest.json檔案,

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",
   "app": {
      "launch": {
         "web_url": "http://ithelp.ithome.com.tw/ironman6"
      }
   }
}

接著在擴充功能頁面使用"載入未封裝擴充功能", 就能在新分頁的應用程式那看到成果。

二、擴充功能
1.頁面按鈕(page action)(RSS 訂閱擴充功能)
頁面按鈕可以根據條件,在不同網頁下隱藏或顯示,
適合那些必須符合條件才能發揮作用的網頁,
例如用來擋廣告的 AdBlock、自動載入下一頁的 AutoPagerize

2.瀏覽器按鈕(browser action)
瀏覽器按鈕就和頁面按鈕正好相反,
會呈現一個按鈕在網址列右方,
除了可以對當前的網頁進行操作外(Clearly),
也能彈出一個專屬的視窗(Evernote Web Clipper)來進行操作,
甚至直接在一個新分頁上來執行整個程式(IE Tab、Tonberry for Chrome)

以下的例子能製作一個最基本的 Chrome 擴充功能:
在新目錄下產生一個manifest.json檔案,

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.1",
   "browser_action": {
      "default_popup": "manifest.json"
   }
}

接著在擴充功能頁面使用"載入未封裝擴充功能", 就能在網址列右邊看到成果。

下一篇將介紹為什麼這些範例只有一個 manifest.json 檔也能 Run ?
以及 manifest.json 裡各個參數所代表的用途.


下一篇
Chrome Extension 筆記(02)入門
系列文
Chrome Extension 開發筆記27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
sheephead081
iT邦新手 4 級 ‧ 2013-09-23 13:49:45

good article, please keep going
want to see more!開心

我要留言

立即登入留言