chrome拓展 跨站_Google Chrome扩展与Web页面/服务器之间的交互

* 通过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://*/*"],

// "" 表示匹配所有地址

"matches": [""],

// 多个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('我被执行了！');

});

~~~