Chrome 插件开发: 获取当前tab的url

最近晚上抽空学习coffeescript, 同时也在学习chrome插件的开发, 发现还是比较容易上手的. google给出的开发资料相当充足的, 可以点这里查看.

虽说上手很容易, 但是要按照自己的想法真正实现一个还是相当不容易的: 一是里面的api比较多, 有比较多的概念; 二是自己基本不懂js开发. 所以实现一个点击插件图标获取当前tab的url都特别费劲. 这里简单纪录下自己的实现历程;)

有关Chrome插件

要上手开发Chrome插件可以先读一下google官方的这篇Getting Start和这篇Overview. 这里再推荐一下其他开发者的相关心得:

  1. oschina上的心得分享
  2. 国外的一篇介绍用coffeescript来介绍开发chrome extension的博文

我在开发过程中主要参考google官网的文档和实例, 然后遇到问题就上stackoverflow上搜索下. 其实这里还有另外一个快速开发的办法: 直接阅读现成插件的源码, 具体请看国外的这篇文章, 介绍的比较详细. 简单总结下就是直接进入chrome插件的安装目录查看(Mac下插件安装的路径为Library/Application Support/Google/Chrome). 这样可以更加迅速地上手;)

实现

好, 看上去现在已经有足够多资料去实现我想实现的功能了. 需要解决的最核心的问题是: 如何在当前插件中当前的tab信息.

起初参照的是google官方的live-headers例子: 一个实时获取页面http头的插件. 它使用的方法是通过browserAction.click事件获取当前的tab, 然后新创建一个window, 并以tabid作为一个参数传到这个window中. 很遗憾, 模仿失败. 因为发现自己无论怎么搞, 不同tab获取的tabid都是一样的….. 于是放弃

后来直接参考了HTTP Headers这款插件的源码, 找到了这么一段代码:

http headers
1
2
3
4
5
6
7
8
9
chrome.windows.getCurrent(function(w) {
    wid = w.id;
    chrome.tabs.getSelected(wid, function(t) {
        if (t.url.substr(0, 7) == 'http://' || t.url.substr(0, 8) == 'https://') {
            document.getElementById('url').value = t.url;
            getHeaders();
        }
    });
});

嗯, 貌似是通过chrome.tabs.getSelected这个调用来搞定, 不过现在这个函数已经被废弃了. 几经搜索在google论坛的这里找到了答案: 可以通过chrome.tabs.query来代替.

一段完整的coffeescript代码如下:

coffee test.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener 'load', ->
  container = document.getElementById 'container'
  pNode = document.createElement 'p'

  chrome.windows.getCurrent (window) ->
    wid = window.id

    chrome.tabs.query {
        active: true,
        windowId: wid
    }, (tabs) ->
      tab = tabs[0]
      textNode = document.createTextNode tab.url
      container.appendChild (pNode.appendChild textNode)

太好了, 终于成功了.

PPPPSSSS

Fedora19始终无法搞定输入法:

  1. ibus和scim服务正常起来, 但是调不出来输入法(说是gnome3.8把ibus集成进去了, 然后按键冲突)
  2. fcitx在设置时报错, 貌似是进程老是挂?
  3. 现在连Settings都没法打开了

郁闷, 可能还是升级出问题了…. 我只是想用个中文输入法啊

Comments