1.插件的环境
一开始做插件我也没懂,什么是background,什么是content_scripts,别着急,做着做着就知道了。
background就是背景,也就是只要你装了这个插件就会一直运行到浏览器关闭的一个脚本文件,通常很多操作都是由这个文件里面的js发起的。
内容脚本,直接插入到页面里的脚本,因为有很多敏感信息或者说危险操作,所以他的api是限定的,只能操作dom和部分chrome插件api。他可以访问dom但是不能访问该页面的其他js,相当于一个额外的沙箱。
打印一些属性就是这些chrome扩展可以用。
通常来讲很多功能你可能需要在右上角也就是地址栏右边的浏览器按钮图标里面进行,那这里面的页面需要在配置文件里加入default_popup的相关属性,然后加入页面制作。
那么问题来了,如果你插入的页面需要更多api如何?那么可以通过内容脚本插入一段iframe(配置文件里加入清单)这段iframe可以访问bookmarks,tabs这样的api。
2.应用间的通信
如果我要做一个右键菜单,通过背景告诉内容脚本 xxxxx?这该怎么做。这就需要页面之间的通信。
chrome.runtime.sendMessage({greeting: "您好"}, function(response) { console.log(response.farewell);});//如果从应用向内容脚本发信息那么要指定哪一个tabchrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "您好"}, function(response) { console.log(response.farewell); });});//接受端chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "来自内容脚本:" + sender.tab.url : "来自应用"); if (request.greeting == "您好") sendResponse({farewell: "再见"}); });
这是官方的例子,正常操作没问题。值得注意的是一个js里只能有一个runtime.onMessage,所以不能让他们有冲突,最好的选择是通过request里面的参数进行区分然后处理后续的操作,不就多写几个if else吗。如果响应是在一个异步操作里的做出的话那么发起端会收不到信息。例如setTimeout。我百度了一下,找到了解决方案,如果是有异步操作的响应那么在最后面加一个return true那么接受端就可以正常收到响应,否则是undefined。
3.插件的打包
插件的打包一开始遇到很多问题,比如我谷歌浏览器打包好的,在其他如2345,qq等浏览器里不能使用。但是如果是2345,qq浏览器之类打包的,他们自己可以用,但是谷歌浏览器不支持了。经过百度,原来是某个版本之后,谷歌对这方面加固了安全校验,一般来讲,直接的插件解压进来,他是会报红字,告诉你要去应用商店去用,不让你用这个插件,为了用户安全。所以必须现在的插件要经过谷歌的商店进行审核才能正式发布。
打包操作也不难,打开开发者模式,选择打包扩展程序,会有2个选项,一个是打包程序的根目录,还有一个是密钥文件,第一次打包不需要密钥文件。后续就需要了。打包完以后会在前一个目录里面出现crx和pem文件,如果要更新版本则把之前的crx文件删了,在打包操作中把根目录和pem文件都传进去,在谷歌商店上传的则是你的zip文件,用任意压缩软件都可以做到压缩。
4.插件的manifest
谷歌插件需要清单配置文件,如permissons比较重要,他可以告诉应用可以使用的网址还有开放哪些api。”web_accessible_resources",哪些资源可以加载,比如图片这种。
5.火狐插件兼容问题
插件要应用在多个浏览器的平台,那么在chrome系列之外的火狐也是一个大头。百度上有一个网址可以解析打包以后的crx文件,一般来讲会返回没问题。
然后我后来发现,在火狐的内容脚本里的iframe中的api也是受到限制了,只能把方法操作定义在background里,通过传递信息,让background来操作。这和谷歌还是有点区别的,不过想想也是,只要是插入在内容脚本中的任何东西,都应该收到相关的api限制。