# 綜述 當讀完了這個綜述和入門之后，就可以開始創建應用（擴展）和WebApp了。 注意：WebApp是通過應用（擴展）的方式實現的，所以除非特別聲明，本頁所有內容都適用于WebApp。 ## 基本概念 一個應用（擴展）其實是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。 應用（擴展）本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。 應用（擴展）可以與Web頁面交互，或者通過content script或cross-origin XMLHttpRequests與服務器交互。應用（擴展）還可以訪問瀏覽器提供的內部功能，例如標簽或書簽等。 ## 應用（擴展）的界面 很多應用（不包括WebApp）會以browser action或page action的形式在瀏覽器界面上展現出來。每個應用（擴展）最多可以有一個browser action或page action。當應用（擴展）的圖標是否顯示出來是取決于單個的頁面時，應當選擇page action；當其它情況時可以選擇browser action。  這個gmail提醒應用使用了browser action，它在工具欄上增加一個圖標  這個新聞閱讀應用也使用了browser action，當點擊時會彈出一個氣泡窗口  這個地圖應用使用了page action和content script（注入到頁面內執行的腳本） 應用也可以通過其它方式提供界面，比如加入到上下文菜單，提供一個選項頁面或者用一個content script改變頁面的顯示等。可以在"開發指南"中找到應用（擴展）特性的完整列表以及實現的細節。 ## WebApp界面 一個WebApp通常會打包一個包含了主要功能的html頁面進來。例如下圖中這個WebApp在HTML頁面中顯示了一個flash文件。  更多信息，查看 [Packaged Apps](http://code.google.com/chrome/extensions/apps.html) 。 ## 文件 每個應用（擴展）都應該包含下面的文件： * 一個manifest文件 * 一個或多個html文件（除非這個應用是一個皮膚） * 可選的一個或多個javascript文件 * 可選的任何需要的其他文件，例如圖片 在開發應用（擴展）時，需要把這些文件都放到同一個目錄下。發布應用（擴展）時，這個目錄全部打包到一個應用（擴展）名是.crx的壓縮文件中。如果使用[Chrome Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard),上傳應用（擴展），可以自動生成.crx文件。 ## 引用文件 任何需要的文件都可以放到應用（擴展）中，但是怎么使用它們呢？一般的說，可以像在普通的HTML文件中那樣使用相對地址來引用一個文件。下面的例子演示了如何引用images子目錄下的文件myimage.png ``` <img **src="images/myimage.png"**> ``` 如果使用360極速版內置的調試器（開發人員工具），可以看到每一個應用（擴展）中的文件也可以用一個絕對路徑來表示： &gt; **chrome-extension://**_&lt;extensionID&gt;_**/**_&lt;pathToFile&gt;_ 在這個URL中，&lt;extensionid&gt;是為每一個應用（擴展）生成的唯一ID。從chrome://extensions頁面中可以看到已經安裝的所有應用（擴展）的唯一ID。&lt;pathtofile&gt;是文件在應用（擴展）目錄下的路徑，也就是它的相對路徑。&lt;/pathtofile&gt;&lt;/extensionid&gt; 在這個URL中，&lt;extensionid&gt;名為manifest.json的文件包含了應用（擴展）的基本信息，例如最重要的文件列表，應用（擴展）所需要的權限等。下面是一個典型的應用（擴展），使用了browser action并訪問google.com &lt;/extensionid&gt; { "name": "My Extension", "version": "2.1", "description": "Gets information from Google.", "icons": { "128": "icon_128.png" }, "background_page": "bg.html", "permissions": ["http://*.google.com/", "https://*.google.com/"], "browser_action": { "default_title": "", "default_icon": "icon_19.png", "default_popup": "popup.html" } } 詳細信息，參考 [Manifest Files](manifest.html) 。 ## 基本架構 絕大多數應用（擴展）都包含一個背景頁面(background page)，用來執行應用（擴展）的主要功能。  上圖顯示了安裝了兩個應用（擴展）的瀏覽器。兩個應用（擴展）分別是黃色圖標代表的browser action和藍色圖標代表的page action。在background.html文件里定義了browser action和javascript代碼。在兩個窗口里browser action都可以工作。 ## 頁面 背景頁面并不是應用（擴展）中唯一的頁面。例如，一個browser action可以包含一個彈窗(popup)，而彈窗就是用html頁面實現的。應用（擴展）還可以使用chrome.tabs.create()或者window.open()來顯示內部的HTML文件。 應用（擴展）里面的HTML頁面可以互相訪問各自DOM樹中的全部元素，或者互相調用其中的函數。 下圖顯示了一個browser action的彈窗的架構。彈窗的內容是由HTML文件（popup.html）定義的web頁面。它不必復制背景頁面(background.html)里的代碼,因為它可以直接調用背景頁面中的函數。  更多細節可以參考 [Browser Actions](browserAction.html) 和 [頁面間的通信](#pageComm) 。 ## &lt;a name="contentScripts" style="color: #6B6B6B;"&gt;Content scripts&lt;/a&gt; 如果一個應用（擴展）需要與web頁面交互，那么就需要使用一個content script。Content script腳本是指能夠在瀏覽器已經加載的頁面內部運行的javascript腳本。可以將content script看作是網頁的一部分，而不是它所在的應用（擴展）的一部分。 Content script可以獲得瀏覽器所訪問的web頁面的詳細信息，并可以對頁面做出修改。下圖顯示了一個content script可以讀取并修改當前頁面的DOM樹。但是它并不能修改它所在應用（擴展）的背景頁面的DOM樹。  Content script與它所在的應用（擴展）并不是完全沒有聯系。一個content script腳本可以與所在的應用（擴展）交換消息，如下圖所示。例如，當一個content script從頁面中發現一個RSS種子時，它可以發送一條消息。或者由背景頁面發送一條消息，要求content script修改一個網頁的內容。  更多的信息可以查看 [Content Scripts](content_scripts.html) 。 ## &lt;a name="pageComm" style="color: #6B6B6B;"&gt;頁面間的通信&lt;/a&gt; 一個應用（擴展）中的HTML頁面間經常需要互相通信。由于一個應用（擴展）的所有頁面是在同一個進程的同一個線程中運行的，因此它們之間可以直接互相調用各自的函數。 可以使用[`chrome.extension`](extension.html)中的方法來獲取應用（擴展）中的頁面，例如getViews()和getBackgroundPage()。一旦一個頁面得到了對應用（擴展）中其它頁面的引用，它就可以調用被引用頁面中的函數，并操作被引用頁面的DOM樹。 ## 保存數據和隱身模式 應用（擴展）可以使用HTML5的 [Web Storage API](http://dev.w3.org/html5/webstorage/)（例如localStorage）來保存數據，或者向服務器發出請求來保存數據。當需要保存數據的時候，首先需要確定是否從隱身模式窗口中發出的請求。缺省情況下，應用（擴展）是不會運行在隱身模式下的，而webapp是會的。需要明確用戶在隱身模式下究竟需要應用（擴展）或webapp做什么。 隱身模式保證在該窗口下瀏覽不會留下痕跡。當處理隱身窗口的數據時，一定要遵循這個前提。例如，如果一個的應用（擴展）的功能是將瀏覽歷史保存在云端（服務器），那么不要保存隱身模式下的瀏覽歷史。另一方面，任何窗口下都可以保存應用（擴展）的數據，不論是否隱身。 重要規則：如果一條數據可能表明用戶在網上看了什么或做了什么，不要在隱身模式下保存它。 要檢查窗口是否在隱身模式下，檢查Tab或Window對象的incognito屬性。例如： var bgPage = chrome.extension.getBackgroundPage(); function saveTabData(tab, data) { if (tab.incognito) { bgPage[tab.url] = data; // Persist data ONLY in memory } else { localStorage[tab.url] = data; // OK to store data } ## 后續 現在應用（擴展）的基本知識已經介紹完了，可以開始寫自己的應用（擴展）了。更多的信息可以參考： * [入門指南](getstarted.html) * [調試指南](tut_debugging.html) * [開發指南](devguide.html) * [代碼例子](samples.html)