当扩展需要执行一些与用户当前浏览的页面相关的逻辑时,最好的办法是使用content script。
manifest.xml使用Content Script需要在manifest.xml中加入对应的区段
- <extension>
- ...
- <content_scripts>
- <content_script core_type="trident">
- <match>http://*.baidu.com/*</match>
- <match>http://*.google.com.hk/*</match>
- <match>http://10.12.9.184/*</match>
- <css>content_style.css</css>
- <js>content_script.js</js>
- </content_script>
- <content_script>
- <match>http://10.12.9.184/*</match>
- <css>content_style.css</css>
- <js>content_script.js</js>
- </content_script>
- <content_script all_frames="true">
- <match>http://*/*</match>
- <js>content_script2.js</js>
- </content_script>
- </content_scripts>
- ...
- </extension>
可以看到content_scripts标签中可以包含多个content_script标签。每个content_script标签可以包含一个或多个match标签,表示只对匹配的url加入content_script,具体的匹配规则,请见matchPatterns。js标签表示插入页面的js代码,css标签表示插入的css代码。content_script标签的all_frames属性,默认为false,当all_frames=true时,表示对网页内所有的frame(iframe)都插入contentScript。core_type="trident"时表示只对IE核插入代码,相对的,core_type="webkit"时表示只对webkit核有效
在ContentScript中,如果想引用扩展中的资源的话,请使用sogouExplorer.extension.getURL(relativePath) api获取资源的完整路径,再使用完整路径引用资源。例如
- var img = document.createElement('img');
- var src = sogouExplorer.extension.getURL('images/icon.png');
- img.setAttribute('src', src);
!!!注意,请勿在ContentScript中注入jQuery!!! 原因如下,ContentScript在Webkit内核中,和页面的javascript可以做到运行在不同的运行环境中,而不会互相干扰。但是在IE核中无法做到,IE核中,所有的代码运行在同一个运行环境中,也就是说,你注入的代码的全局变量会覆盖页面中的全局变量,而jQuery中对window.$进行了复值。也就是说,你注入的jQuery会覆盖页面的jQuery,可能造成无法预计的后果。!!!注意,在ContentScript中加载服务器js代码时需要注意!!! 如果是以动态生成script标签的方式加载服务器js的方法,需要注意,由于webkit内核中,contentScript的js环境和页面的js环境是在不同的运行空间中运行的,之间互相无法访问,而这种方法注入的js是在页面的运行空间中运行的。因此,你可能无法访问注入的js中的任何变量。请注意这是否是你想要的情况(绝大多数情况下不是)