Google Chrome扩展与Web页面/服务器之间的交互 · PHP学习

# 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来帮你调用 **示例配置：** ``` <pre class="calibre10">``` { // 需要直接注入页面的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" } ], } ``` ``` > 特别注意，如果没有主动指定`run_at`为`document_start`（默认为`document_idle`），下面这种代码是不会生效的： ``` <pre class="calibre17">``` document.addEventListener('DOMContentLoaded', function() { console.log('我被执行了！'); }); ``` ```