zhengrenzhe's blog   About

chrome extensions开发-3

继续上一篇,这篇主要介绍下 chrome 的 API。

API

目前chrome提供的api分为4类(以当前版本为基准,时间:2014/8/24):

从名字看来当然是 Stable APIs 最稳妥,不过我们绝大多数使用的api都是 Stable APIs ,所以不存在什么大问题。先上一张api列表截图:

chrome-extensions

上面是一张目前最新的api列表截图,从这里可以看到每个api的名称,描述,自哪个chrome版本后生效,可以看出*browserAction*是最元老级的api之一了。 就拿这个api举例,进入他的详细页面。这个api比较特殊,如果你的extensions的类型是browserAction的话那他也要同时出现在*Manifest.json*里。在Manifest.json他的作用是定义一些browserAction的一些必要信息,比如default_icon,default_popup等,不过他们都是描述性的,不是我们此次讨论的重点。下面的*Summary*才是最重要的。

Summary

上图显示了browserAction这个api的所有方法和事件,可以看出这些api的参数都是object details或者 function callback。一个个来说,这个object details是什么呢? 以setTitle来说,他的作用是设置在鼠标移到browser_action的图标上时显示的文字 settitle他的参数只有object details,也就是说参数是一个对象。看参数的详细说明,就是要以对象的形式传参,对象的key是title,value是tabId。也就是这样

chrome.browserAction.setTitle({'title':tabId})

,同时要注意他们的类型,一个是string,另一个是integer。这个tabId怎么获取呢?后面再说。

再举个参数为function callback的例子,以onClicked为例吧,其触发事件是鼠标点击browser_action的图标,他的参数只有function callback。

onclick

此处注意,api都是以异步方式执行的,当事件完成后就会触发回调函数执行。在使用onClicked时还要添加一个监听器,来监听点击,实际调用就是这样:

chrome.browserAction.onClicked.addListener(function(){...});

来实验一下,我们设置当点击时

alert('success clicked');

还是用我们上一篇的test项目,在popup.html里链入popup.js:

popup.html

下面是我们的popup.js代码:

chrome.browserAction.onClicked.addListener(test());
function test(){
  alert('success clicked');
};

从这个可以看出chrome api是与js混用的,你可以在js文件里随时调用api,而不是把api单独放在哪里处理。点击图标, {<5>}success 成功了,说明我们调用是正确的。现在大家应该明白api是怎样调用的了吧。参数基本就两种:object和function,也就把api当函数用吧。

调用API

开发chrome extensions最重要的就是使用chrome提供的api了,通过api可以让你的extension有无限种可能,下面我来以一些代码来具体讲解api的使用。

获取tabs信息

在很多api的参数里都有tabId这个东西,他是每个标签页唯一的id,通过这个id你可以辨识,操作每个tab,前提是你已经在*Manifest.json中声明了“tabs”*这个权限。所有tabs信息是通过chrome.tabs这个api获取的。这个api有很多方法和事件,基本上与用户交互的动作api都涵盖了。这里就不上图了,有兴趣可以点这里看看。我们的tabs信息是通过query这个Methods来获取的,看下这个api的详细信息,它提供了object和function这两个参数,在实际使用时这两个参数缺一不可。object用来限定要查找的tabs信息的条件,而function需要有一个参数,用来接收api传来的信息。这样说可能还有点不明白,上代码来看看,还是刚才那个js文件来改一改:

chrome.browserAction.onClicked.addListener(getinfor());
function getinfor(){
  chrome.tabs.query({},function(tabs){
    console.log(tabs)
  })
};

这里我们传了一个空对象,不设置对象内容也就意味着不按条件筛选tabs,直接返回所有tabs信息,而function里的tabs参数就是为了接收api传来的信息而设的,当然名字你可以自定。这样的话这段代码的作用就是当图标被点击后console.log出所有标签页的信息。我们点击后打开console(注意:这里打开的是这个extension的console,而不是当前页面的console。),可以看见以下输出信息:

queru

当前我开了7个标签页,这7个标签页的信息也就以数组的形式输出了。随便点开一个:

tabs,里面有这个

标签页的信息,而里面的*id*就是前面说的*tabId*,这是全局唯一的,通过它来辨识tab,有了*tabId*,你就可以随心所欲的访问,控制所有tab了。 当前我们并没有加限定条件,所以返回的就是所有tab的信息,当然你也可以加一些限定条件,比如:title,url,highlighted。这些可以帮助你快速找到想要的tab。比如想找到url为”http://www.baidu.com" 的tab,那就可以这么写:{“url”:“http://www.baidu.com"}。

操作tabs

当我们获取了*tabId*,就可以通过它来选择tab并操作。现在我想设置在点击图标后把最左边的tab reload一遍,成功后alert(‘success’)。这里需要知道,tabs.query()返回的数组顺序是按照tabs的从左到右来的,也就是说数组的第一项就是最左边的tab,现在通过*reload*这个method就可以完成了:

chrome.browserAction.onClicked.addListener(reload_left());
function reload_left(){
  chrome.tabs.query({},function(tabs){
    chrome.tabs.reload(tabs[0].id,function(){
      alert('success');
    })
  })
};

又成功了,这次就不上图了。虽然这个tab的操作很简单,但以小见大,复杂的操作也是基于此的。

总结与注意

暂时就想到了这么多,其实看明白了api形式调用其实很简单,推荐阅读chrome官方的指南而不是360翻译的,360那版年代比较久远,而且翻译让人看不明白。。。 好了,我要睡觉了。

← Chrome extensions开发-2  Mac下安装Nginx并开启https →