Chrome瀏覽器擴充套件開發系列之十二：Content Scripts

Content Scripts是執行在Web頁面的上下文的JavaScript檔案。通過標準的DOM，Content Scripts

可以操作（讀取並修改）瀏覽器當前訪問的Web頁面的內容。

Content Scripts通常用於如下場景：

找到Web頁面中的無效連結並修復
增大字型以突出顯示
查詢並處理DOM中的microformat

Content Scripts的使用限制條件：

不能訪問如下chrome.* API
- chrome.extension API
- chrome.i18n API
- chrome.runtime API
- chrome.storage API
不能訪問Chrome擴充套件頁面中定義的JavaScript變數和函式
不能訪問Web頁面或其他Content Scripts中定義的JavaScript變數和函式

乍一看，Content Scripts似乎無法與Chrome擴充套件的其他部分進行任何互動，但是通過Chrome的訊息傳遞機制，Content Scripts可以間接地呼叫chrome.* API，訪問Chrome擴充套件的資料，呼叫Chrome擴充套件的方法等，詳見Chrome的訊息傳遞部分。

此外，Content Scripts還可以通過“跨域XMLHttpRequest物件”訪問Chrome擴充套件的其他部分。Content Scripts還可以與Web頁面通過共享DOM進行通訊。

在Chrome瀏覽器擴充套件中使用Content Scripts有兩種方式。一種是在Chrome瀏覽器擴充套件中一直存在的Content Scripts，這需要在manifest.json檔案中宣告content_scripts如下：

1 {
2   "content_scripts": [
3     {
4       "matches": ["http://www.google.com/*"], 
5       "css": ["mystyles.css"],
6       "js": ["jquery.js", "myscript.js"]
7     }
8   ],
9 }

這種方式非常靈活，可以為Web頁面注入多個JavaScript檔案和CSS檔案。

content_scripts中的屬性說明如下：

名稱	型別	必選/可選	說明
matches	string陣列	必選	Content Script注入的Web頁面
exclude_matches	string陣列	可選	Content Script不注入的Web頁面
include_globs	string陣列	可選	對於matches匹配的Web頁面，進一步限定URL
exclude_globs	string陣列	可選	對於matches匹配的Web頁面，進一步排除URL
match_about_blank	boolean	可選	是否注入Content Script到about:blank和about:srcdoc頁面，預設false
css	string陣列	可選	注入到匹配的Web頁面中的CSS檔案，順序相關
js	string陣列	可選	注入到匹配的Web頁面中的JS檔案，順序相關
run_at	string	可選	控制JS檔案注入的時機，如"document_start", "document_end", "document_idle"。預設"document_idle" "document_start"表示在CSS檔案之後，DOM構建或其他指令碼執行之前，注入JS檔案。 "document_end",表示在DOM構建結束之後，圖片或框架載入之前，注入JS檔案。 "document_idle"表示在"document_end"與觸發window.onload事件之間的某個時間，注入JS檔案，具體時間可以根據頁面的內容和載入的進度優化。
all_frames	boolean	可選	控制JS檔案是否在匹配的Web頁面中的所有框架中執行。預設false表示只在頂層框架中執行

另一種是隻在需要的時候（某事件發生）通過程式設計注入的Content Scripts，這需要在manifest.json檔案中宣告permissions如下：

1 {
2   "permissions": [
3     "tabs", 
4     "http://www.google.com/*" //要注入Content Scripts的Web頁面所在的域
5   ],
6 }

這種方式能夠針對個別Web頁面有條件地注入Content Scripts。

宣告必要的許可權後，就可以在發生某些事件的時候動態注入必要的Content Scripts，示例如下：

1 chrome.browserAction.onClicked.addListener(
2   function(tab) { //tab物件表示當前（使用者點選browser action的時候）處於活動狀態的tab
3     chrome.tabs.executeScript({
4       //設定活動狀態的tab顯示的頁面的document物件的屬性
5       code: 'document.body.style.backgroundColor="red"'//通過JS程式碼
6     });
7     chrome.tabs.executeScript({file: "content_script.js"});//通過JS檔案
8 });

Content Scripts的執行位於一個特殊的環境，我們稱為isolated world。在這個環境中，Content Scripts能夠訪問當前Web頁面的DOM，但是Content Scripts與當前Web頁面自帶的JavaScript變數和函式是不能直接互相訪問的。而且被注入的每個Content Script之間也彼此獨立，互不干擾。此外，對於一些共享的JavaScript物件，如window.onload事件物件，也都是彼此獨立互不干擾的。

雖然Content Scripts與Web頁面的JavaScript彼此獨立，但是他們都能夠訪問Web頁面的DOM，因此通過共享的DOM和訊息機制，Content Scripts可以與Web頁面的JavaScript進行通訊。

另外，Content Scripts中要考慮安全問題，特別是Content Scripts通過跨域XMLHttpRequest物件獲取的第三方結果，在作用於當前Web頁面的時候要注意指令碼注入攻擊。

Content Scripts可以通過如下方式訪問擴充套件中的其他檔案：

1 //顯示圖片<extensionDir>/images/myimage.png
2 var imgURL = chrome.extension.getURL("images/myimage.png");
3 document.getElementById("someImage").src = imgURL;

Chrome瀏覽器擴充套件開發系列之十二：Content Scripts

相關文章