谷歌瀏覽器擴展開發筆記

1，參考https://www.cnblogs.com/ligerleng/p/gmail_assist_1.html

2，知識點：
page_action": 與之平級的還有另外一個字段"browser_action"，你的manifest中最多出現兩者之一。直觀地來講，這倆屬性分別指明你的擴展在特定網頁中才能用，仍是打開瀏覽器後一直能用。更直觀的就是，你的擴展的圖標出現的位置不一樣，以下圖。

"background": 你的擴展若是須要什麼在後臺持續運行的部分，就能夠經過這個字段來指出。不只是js，你還能夠指定一個本身編寫的html，像這樣：

"background": {
    "page": "background.html",
    "scripts": ["background.js"],
    "persistent": false
}

　　若是僅僅指定js，chrome會本身生成一個html來在後臺跑你指定的腳本；固然若是指定了你本身寫的html，它也不會顯示出來。
"persistent"值默認爲true。爲true時，你在background字段中指出的js腳本（注意格式是數組，於是能夠有多個腳本）將持續運行在後臺，而若persistent爲false，則這些腳本將只在事件活動時運行，事件不活動時就會釋放其佔有的內存等資源。

那麼在Chrome擴展中運行的腳本有哪些呢？個人理解是大體有這麼四類：background、popup頁面內的js、content script、injected js。

injected:

這種腳本，和原網頁自帶的腳本，就徹底是一路貨了。

var s = document.createElement('script');
s.src = chrome.extension.getURL('tableInited.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head || document.documentElement).appendChild(s);

要注入的inject.js須要在manifest中的web_accessible_resources字段裏進行聲明。

"web_accessible_resources" : [
        "oauth2/oauth2.html",
        "js/tableInited.js",
        "css/style.css",
        "js/table_sort_script.js",
        "images/sort.gif",
  ]

只有網頁通用的API是可用的，而chrome爲擴展提供的API（chrome.*），這種徹底注入到用戶瀏覽的頁面中的腳本都不能訪問。

• 什麼時候使用

　　個人建議是，僅當你須要獲取被瀏覽頁面中原有js中的變量時，才把你的腳本inject到用戶瀏覽的頁面中，而後經過接下來例子裏這種方式，把它傳到content script中。固然了，有一些單純地操縱DOM元素而不須要它們再返回什麼數據的腳本，也能夠直接inject到頁面裏

2.content script

而是運行在一個單獨的被隔離的環境中。它的生存週期也就是跟瀏覽的網頁同樣，最遲到網頁加載徹底完成時，content script就開始跑了，直到用戶當前瀏覽的網頁被關閉。每次刷新時將從新載入。

• 網頁通用的API，跨域xhr請求，以及chrome爲擴展程序提供的API中的一部分
• 什麼時候使用

• 須要操縱頁面DOM時，須要與具體頁面匹配時，須要接受injected js傳出來的數據時，以及每次刷新網頁都須要從新載入的腳本，就能夠做爲content script來寫。

• 例子

• 向gmail服務器發xhr請求數據、操縱gmail頁面的DOM，把返回的數據顯示出來。

3.popup

• 可用API範圍

這類腳本和下一類（background），我都稱爲「徹底屬於擴展程序的腳本」。它們不只能夠訪問普通網頁API、能夠發起跨域xhr請求，並且能夠訪問chrome爲擴展程序專門提供的API（即chrome.*）中的所有。

 

4.跑在後臺（background）頁面中的腳本

　所謂的後臺腳本，在chrome擴展中又分爲兩類，分別運行於後臺頁面（background page）和事件頁面（event page）中。二者區別在於，前者（後臺頁面）持續運行，生存週期和瀏覽器相同，即從打開瀏覽器到關閉瀏覽器期間，後臺腳本一直在運行，一直佔據着內存等系統資源；然後者（事件頁面）只在須要活動時活動，在徹底不活動的狀態持續幾秒後，chrome將會終止其運行，從而釋放其佔據的系統資源，而在再次有事件須要後臺腳原本處理時，從新載入它。這兩類咋區分呢？經過你在manifest中的聲明：

"background": {
    "scripts": ["background.js"],
    "persistent": false
},

　　正如上一節說過的，這裏persistent的值默認是true，此時這個js就是運行在後臺頁面的（持續的）；若這個值爲false，那就是事件頁面（非持續的）了。

• 什麼時候使用

　　須要持續運行在後臺的，確定就選這種了，並且要把persistent置爲true。須要在後臺處理些事件啊之類的，包括要用到content script沒法訪問的擴展程序專用API們時，也應該用這種，不過只要你不是須要它必須持續運行的，就把它設置成事件頁面，從而提升性能。