摘要：第三章目錄簡述右鍵菜單桌面提醒簡述這部分對于前端的人來說是基礎。已經將的權限開放了。制作實時查詢美元價格的擴展代碼部分部分查詢美元當日價格圖片請自行選用。

3.1 CSS簡述

3.2 Browser Actions

3.3 右鍵菜單

3.4 桌面提醒

3.5 omnibox

3.6 Page Actions

這部分對于前端的人來說是基礎。就不說了

chrome一般會選擇19像素的圖片顯示在工具欄，但若用戶使用視網膜屏幕的計算機，chrome則會選擇38像
素的圖片。兩種圖片并非都要指定，指定一個，瀏覽器頁會自動拉伸圖片適應顯示需要，但是可能會很難看。

  "browser_action": {
      "default_icon": {
          "19": "images/icon19_0.png",  //鍵值名19與38并不指代像素，只是作者自己為了標示
          "38": "images/icon38_0.png"   //chrome會自動識別像素，并予以選用
      }
    }

動態更改圖標的方法
chrome.browserAction.setIcon(details,callback)

details的類型為對象，可以包含以下三種屬性，分別是imagesData，path和tabId。

imagesData說明
imagesData的值既可以是imagesData也可以是對象。

{size:imagesData}
imagesData是指圖片的像素數據，可以通過HTML的canvas標簽獲取。

path說明
path的值既可以是字符串也可以是對象，如果是對象，結構為{size：imagePath}

tabId說明
tabId的值限定了圖標將在瀏覽哪個標簽頁時被更改。

callback回調函數沒有可接收的結果

當用戶點擊擴展圖標時，彈出的頁面被成為popup頁面。

popup頁面更多的用來展示結構，而并非處理數據。因為關閉popup頁面等于關閉了相應的標簽頁。頁面不會
繼續運行，等再次打開popup頁面時，所有的Dom與js空間遍歷都會重新創建。

如果需要實時處理數據，則需要創建一個在后端一直運行的頁面或者腳本(同時記得在manifest.json的
background域來聲明)

幾個注意項：

給出頁面尺寸

不要模仿Chrome的原生UI

使用帶有滾動條的DIV容器

設計一個更好的滾動條樣式

屏蔽右鍵菜單

使用外部引用腳本

不要在popup頁面的js空間變量中保存數據

將鼠標移至擴展圖片上，等待片刻就會顯示擴展的title。
設置方式如下

  "browser_action": {
      "default_title": "Turtle"
  },

動態設置方法

chrome.browserAction.setTitle({title: "This is a new title"});

badge常用來顯示我們未閱讀的數量等等，比如郵件，微博等。

設置方式

  chrome.browserAction.setBadgeBackgroundColor({color: "#0000ff"});
  chrome.browserAction.setBadgeText({text: "dog"});

注：背景顏色也可以用使用rgba。

首先，在manifest.json中的permissions域中聲明contextMenus權限。

  "permissions": [
    "contextMenus"
  ]

第二步，設置右鍵菜單項上顯示的擴展圖標

  "icon": {
    "16": "icon16.png"
  }

三種操作方法：

chrome.contextMenus.create()

chrome.contextMenus.update()

chrome.contextMenus.remove()
舉例如下:

  chrome.contextMenus.create({
    type: "normal",  //類型有normal,radio,checkbox,separator
    title: "menu A",
    id: "a", //標識每個選項
    parentId: "e",  //標示父級選項
    contexts: ["link"] //完整的取值還有all,page,frame,selection,link,editable,
                       //image,video,audio,launcher。表示右鍵菜單顯示的時機
    });

update可以動態更改菜單屬性，只需要指定需要更改的菜單id和所需要修改的屬性即可，remove方法可以刪
除指定的菜單欄選項。

  "permissions": [
    "notifications"
  ];//manifest.json中聲明
  "web_accessible_resources": [
  "icon48.png"
  ]  //對于桌面窗口中顯示的圖片，需要先行聲明

  var notification = webkitNotiofications.createNotiofication(
    "icon48.png",
    "Notiofication Demo",
    "Merry Christmas"
    ); //建立一個提醒
  notification.show();//創建之后不會立即顯示，需要調用show

ondisplay

onerror

onclose

onclick
除此之外，還可以通過notification.cancel()主動關閉提醒窗口

什么是omnibox呢，就是chrome 的地址欄，其實這是一個多功能輸入框，google稱之為omnibox。Google
已經將omnibox的權限開放了。

"omnibox": { "keyword": "hamster"} //首先在manifest.json聲明并指定keyword

omnibox有4種事件

chrome.omnibox.onInputStarted

chrome.omnibox.onInputChanged

chrome.omnibox.onInputEntered

chrome.omnibox.onInputCancelled

Page Actions 與BrowserAction非常相似，除了沒有badge意外，后者擁有的方法前者都有。另一個區別
在于，前者圖標并非一直顯示。所有前者可以自由控制顯示或者隱藏，如下。

  chrome.pageAction.show(tabId);
  chrome.pageAction.hide(tabId);

js代碼部分

  function httpRequest(url, callback){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
              callback(xhr.responseText);
          }
      }
      xhr.send();
  }

  function updateAmount(amount, exchange){
      amount = Number(amount);
      if(isNaN(amount) || !amount){
          exchange([{
              "content": "$1 = ￥"+price,
              "description": "$1 = ￥"+price
          },{
              "content": "￥1 = $"+(1/price).toFixed(6),
              "description": "￥1 = $"+(1/price).toFixed(6)
          }]);
      }
      else{
          exchange([{
              "content": "$"+amount+" = ￥"+(amount*price).toFixed(2),
              "description": "$"+amount+" = ￥"+(amount*price).toFixed(2)
          },{
              "content": "￥"+amount+" = $"+(amount/price).toFixed(6),
              "description": "￥"+amount+" = $"+(amount/price).toFixed(6)
          }]);
      }
  }

  function gotoYahoo(text, disposition){
      window.open("http://finance.yahoo.com/q?s=USDCNY=X");
  }

  var url = "http://query.yahooapis.com/v1/public/yql?q=select%20Rate%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDCNY%22)&env=store://datatables.org/alltableswithkeys&format=json";
  var price;

  httpRequest(url, function(r){
      price = JSON.parse(r);
      price = price.query.results.rate.Rate;
      price = Number(price);
  });

  chrome.omnibox.setDefaultSuggestion({"description":"Find current USD price."});

  chrome.omnibox.onInputChanged.addListener(updateAmount);

  chrome.omnibox.onInputEntered.addListener(gotoYahoo);

manifest部分

  {
      "manifest_version": 2,
      "name": "USD Price",
      "version": "1.0",
      "description": "查詢美元當日價格",
      "background": {
          "scripts": [
              "js/background.js"
          ]
      },
      "icons": {
          "16": "images/icon16.png"
      },
      "omnibox": {
          "keyword": "usd"
      },
      "permissions": [
          "*://query.yahooapis.com/*"
      ]
  }

圖片請自行選用。
擴展使用方法：載入擴展之后，在瀏覽器地址欄輸入"usd"，然后按空格鍵或者Tab鍵就可以使用了。