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;