chrome 瀏覽器擴展（1）

基本概念

HTML、css、js、圖片、其它 => 壓縮文件

本質：web頁面、全部瀏覽器提供的api

擴展與web頁面交互

擴展與服務器交互

content script

cross-origin

xmlhttprequests

擴展訪問瀏覽器提供的內部功能：標籤、書籤

擴展界面

browser action

page action

content script（注入到頁面內執行的腳本）

經過其它方式提供界面：

加入到上下文菜單

提供一個選項頁面

用一個content script 改變頁面的顯示

webApp界面

文件

manifest

html

js

其它、圖片

以上文件都放在同一目錄下

發佈打包爲 .crx

使用Chrome Developer Dashboard,上傳應用（擴展）-> 會自動生成 .crx文件

引用文件

<img src="images/myimage.png">
複製代碼

chrome-extension://<extensionID>/<pathToFile>
複製代碼

chrome://extensions
複製代碼

{
    "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"
    }
}
複製代碼

基本架構

background page

頁面

browser action

popup

Content script

Content script腳本是指可以在瀏覽器已經加載的頁面內部運行的javascript腳本

能夠將content script看做是網頁的一部分，而不是它所在的應用（擴展）的一部分。

Content script能夠得到瀏覽器所訪問的web頁面的詳細信息，並能夠對頁面作出修改。

一個content script能夠讀取並修改當前頁面的DOM樹。

它並不能修改它所在應用（擴展）的背景頁面的DOM樹

Content script與它所在的應用（擴展）並非徹底沒有聯繫。一個content script腳本能夠與所在的應用（擴展）交換消息

例如，當一個content script從頁面中發現一個RSS種子時，它能夠發送一條消息。或者由背景頁面發送一條消息，要求content script修改一個網頁的內容。

頁面間通訊

一個應用（擴展）中的HTML頁面間常常須要互相通訊

一個應用（擴展）的全部頁面是在同一個進程的同一個線程中運行的

所以它們之間能夠直接互相調用各自的函數。

能夠使用chrome.extension中的方法來獲取應用（擴展）中的頁面，例如getViews()和getBackgroundPage()。一旦一個頁面獲得了對應用（擴展）中其它頁面的引用，它就能夠調用被引用頁面中的函數，並操做被引用頁面的DOM樹。

保存數據、隱身模式

web Storage API localStorage

向服務器發送請求