* 通過content scripts，可以實現Google Chrome擴展與用戶打開的Web頁面之間的交互。 * 通過跨域的 XMLHttpRequest，可以實現Google Chrome擴展與其他服務器之間的交互。 content scripts是一組JavaScript文件，運行在瀏覽器當前打開的頁面的上下文中，可以讀取并修改當前打開的頁面DOM結構。事實上，content scripts可以被看作是當前打開的頁面的組成部分。 所謂[content-scripts](https://developer.chrome.com/extensions/content_scripts)，其實就是Chrome插件中向頁面注入腳本的一種形式（雖然名為script，其實還可以包括css的），借助`content-scripts`我們可以實現通過配置的方式輕松向指定頁面注入JS和CSS（如果需要動態注入，可以參考下文），最常見的比如：廣告屏蔽、頁面CSS定制，等等。 `content-scripts`和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個JS變量），只能通過`injected js`來實現。`content-scripts`不能訪問絕大部分`chrome.xxx.api`，除了下面這4種： * chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) * chrome.i18n * chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage) * chrome.storage 非要調用其它API的話，你還可以通過通信來實現讓background來幫你調用 **示例配置：** ~~~ { // 需要直接注入頁面的JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // 多個JS按順序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全局樣式 "css": ["css/custom.css"], // 代碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最后一個表示頁面空閑時，默認document_idle "run_at": "document_start" } ], } ~~~ >[danger]特別注意，如果沒有主動指定`run_at`為`document_start`（默認為`document_idle`），下面這種代碼是不會生效的： ~~~ document.addEventListener('DOMContentLoaded', function() { console.log('我被執行了！'); }); ~~~