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

3.1 CSS簡(jiǎn)述

3.2 Browser Actions

3.3 右鍵菜單

3.4 桌面提醒

3.5 omnibox

3.6 Page Actions

這部分對(duì)于前端的人來(lái)說(shuō)是基礎(chǔ)。就不說(shuō)了

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

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

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

details的類(lèi)型為對(duì)象，可以包含以下三種屬性，分別是imagesData，path和tabId。

imagesData說(shuō)明
imagesData的值既可以是imagesData也可以是對(duì)象。

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

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

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

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

當(dāng)用戶點(diǎn)擊擴(kuò)展圖標(biāo)時(shí)，彈出的頁(yè)面被成為popup頁(yè)面。

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

如果需要實(shí)時(shí)處理數(shù)據(jù)，則需要?jiǎng)?chuàng)建一個(gè)在后端一直運(yùn)行的頁(yè)面或者腳本(同時(shí)記得在manifest.json的
background域來(lái)聲明)

幾個(gè)注意項(xiàng)：

給出頁(yè)面尺寸

不要模仿Chrome的原生UI

使用帶有滾動(dòng)條的DIV容器

設(shè)計(jì)一個(gè)更好的滾動(dòng)條樣式

屏蔽右鍵菜單

使用外部引用腳本

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

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

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

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

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

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

設(shè)置方式

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

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

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

  "permissions": [
    "contextMenus"
  ]

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

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

三種操作方法：

chrome.contextMenus.create()

chrome.contextMenus.update()

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

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

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

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

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

ondisplay

onerror

onclose

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

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

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

omnibox有4種事件

chrome.omnibox.onInputStarted

chrome.omnibox.onInputChanged

chrome.omnibox.onInputEntered

chrome.omnibox.onInputCancelled

Page Actions 與BrowserAction非常相似，除了沒(méi)有badge意外，后者擁有的方法前者都有。另一個(gè)區(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)日價(jià)格",
      "background": {
          "scripts": [
              "js/background.js"
          ]
      },
      "icons": {
          "16": "images/icon16.png"
      },
      "omnibox": {
          "keyword": "usd"
      },
      "permissions": [
          "*://query.yahooapis.com/*"
      ]
  }

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