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

3.1 CSS簡述

3.2 Browser Actions

3.3 右鍵菜單

3.4 桌面提醒

3.5 omnibox

3.6 Page Actions

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

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

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

動態(tài)更改圖標(biāo)的方法
chrome.browserAction.setIcon(details,callback)

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

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

{size:imagesData}
imagesData是指圖片的像素數(shù)據(jù)，可以通過HTML的canvas標(biāo)簽獲取。

path說明
path的值既可以是字符串也可以是對象，如果是對象，結(jié)構(gòu)為{size：imagePath}

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

callback回調(diào)函數(shù)沒有可接收的結(jié)果

當(dāng)用戶點擊擴展圖標(biāo)時，彈出的頁面被成為popup頁面。

popup頁面更多的用來展示結(jié)構(gòu)，而并非處理數(shù)據(jù)。因為關(guān)閉popup頁面等于關(guān)閉了相應(yīng)的標(biāo)簽頁。頁面不會
繼續(xù)運行，等再次打開popup頁面時，所有的Dom與js空間遍歷都會重新創(chuàng)建。

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

幾個注意項：

給出頁面尺寸

不要模仿Chrome的原生UI

使用帶有滾動條的DIV容器

設(shè)計一個更好的滾動條樣式

屏蔽右鍵菜單

使用外部引用腳本

不要在popup頁面的js空間變量中保存數(shù)據(jù)

將鼠標(biāo)移至擴展圖片上，等待片刻就會顯示擴展的title。
設(shè)置方式如下

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

動態(tài)設(shè)置方法

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

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

設(shè)置方式

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

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

首先，在manifest.json中的permissions域中聲明contextMenus權(quán)限。

  "permissions": [
    "contextMenus"
  ]

第二步，設(shè)置右鍵菜單項上顯示的擴展圖標(biāo)

  "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", //標(biāo)識每個選項
    parentId: "e",  //標(biāo)示父級選項
    contexts: ["link"] //完整的取值還有all,page,frame,selection,link,editable,
                       //image,video,audio,launcher。表示右鍵菜單顯示的時機
    });

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

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

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

ondisplay

onerror

onclose

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

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

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

omnibox有4種事件

chrome.omnibox.onInputStarted

chrome.omnibox.onInputChanged

chrome.omnibox.onInputEntered

chrome.omnibox.onInputCancelled

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

  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": "查詢美元當(dāng)日價格",
      "background": {
          "scripts": [
              "js/background.js"
          ]
      },
      "icons": {
          "16": "images/icon16.png"
      },
      "omnibox": {
          "keyword": "usd"
      },
      "permissions": [
          "*://query.yahooapis.com/*"
      ]
  }

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