chrome插件中遇到的坑（一）

简单说，懂chrome插件开发的人都知道，chrome插件主要有三层（姑且这么称谓）。这三层经纬可谓明确，可以从功能和权限的角度去理解他们：

1、background层，chrome插件底层，控制整个chrome插件的大脑，具有最高权限；

2、content层，content-script脚本工作平台，本质上是chrome插件脚本注入层，权限最低只能影响页面DOM，不能跨域操作，但是可以通过chrome.runtime.sendMessage与background层交互；

3、popup/option层，UI交互层，权限中等，可以直接使用background的实例对象，也可以通过消息与content层交互。

 

实际开发中，经常会遇到在content层获取数据，提交到后台server的情况，后台server与content页面存在跨域问题。

chrome插件中解决跨域问题是比较简单，当然，可以直接在content脚本中使用jsonp的方式跨域，也可以将需要提交的数据发送给background层，由background提交后台服务。

我采取的方式是后者，通过消息与background通信，坑儿也是在发送消息的时候碰到的。

发送消息：

chrome.runtime.sendMessage({data: "hello world!"}, function(response) {
　　console.log(response);
});

坑儿：总是报错Uncaught Error: chrome.runtime.connect() called from a webpage must specify an Extension ID (string) for its first argument

后来，通过测试发现是我调用chrome.runtime.sendMessage的时机问题，不要在content脚本注入的时候就调用该函数，换句话说就是：要在页面加载完毕时调用该方法：

$(function(){

　　chrome.runtime.sendMessage({data: "hello world!"}, function(response) {
　　　　console.log(response);
　　});

});

 

这是搞原型测试时，发现的坑，一些函数的调用（时机）没有结合业务，所以，实际结合业务开发中可能自然就越过了该坑儿，但是，还是留个印记吧。