Skip to content
2010年10月4日 / island205

关于我的Chrome插件豆瓣电台

我和小吴说,使用者超过一千的话我就写点关于它的东西,现在就写吧。

 

为什么做了这个插件?

我是豆瓣的忠实用户,平时也常常听听豆瓣电台。但觉得每次都要登录豆瓣,点击顶部的电台(当时豆瓣是这样的)才能收听豆瓣电台,颇感麻烦,当时又在DIY Chrome插件,也受到一个Gtalk插件的启发(但是没看过它的源码),

捕获

于是想做一个电台的插件,目的是一次点击就可以方便的打开收听豆瓣电台。

想法是这样的——

其实上面的那个Gtalk插件没什么很强的编程技巧,就是在用户点击ICON的时候在简单的新窗口中打开了http://talkgadget.google.com/talkgadget/popout链接而已。因为它直接调用了Google做好的Gtalk小工具。

所以我同样的方法打开http://douban.fm/radio这个flash版的豆瓣电台就好了……

如何实现?

代码如下:

   1:     var fm_window = null; //fm窗口对象
   2:     
   3:      //设置打开状态
   4:      function setOn() {
   5:          chrome.browserAction.setBadgeText({ text: "ON" });
   6:      }
   7:      //设置关闭状态
   8:      function setOff() {
   9:          chrome.browserAction.setBadgeText({ text: "" });
  10:      }
  11:      //设置Badage的背景颜色
  12:      function setBadgeBackground() {
  13:          chrome.browserAction.setBadgeBackgroundColor({ color: [0, 150, 0, 255] });
  14:      }
  15:      //绑定ICON点击响应函数
  16:      chrome.browserAction.onClicked.addListener(function() {
  17:          if (!fm_window || fm_window.closed) {
  18:              fm_window = window.open
  19:   
  20:  ("http://douban.fm/radio","popup","width=420,height=186,resizable=no,titlebar=no,toolbar=no,
  21:   
  22:  depended=yes");
  23:              setOn(); //设置状态打开
  24:          } else {
  25:              fm_window.close();
  26:          }
  27:      })
  28:      //调用设置Badage颜色
  29:      setBadgeBackground();
  30:   
  31:      //检测fm窗口状态
  32:      setInterval(function() {
  33:          if (fm_window.closed) {
  34:              setOff();//设置状态关闭
  35:          }
  36:      }, 100);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

除去去多余的函数声明,关键代码不超过十行。

关键点:

  1. window.open()代替Chrome提供的窗口打开API函数,也有试过,但是窗口打开来还有标签栏、工具栏等,寻找去除它们的参数设置,未果,所以用了window.open()函数。
  2. 对于fm窗口状态的检测我使用了setInterval函数,原因是我对BOM不熟,不知道如何根据fm_window的状态来调用父窗口的函数,当然我也有绑定过fm.window窗口的unonload动作来试图改变ICON的Badge状态,但是未果。

可扩展?

大家也可以将上面的代码重构封装下,就可以写出很多类似的功能的插件来了,希望大家做出更多的好用的插件出来。

推荐

有人让我开发出类似于ExtensionFM界面的豆瓣电台来,实话确实力不从心,但是给大家推荐一个非常不错的豆瓣插件,https://chrome.google.com/extensions/detail/dofcilnakjpenampigbefbbeekanbfgl 功能已经很全了,包括类似的那种FM。

打算

虽然现在还不一定做得出来,虽然强人已经做出来了一个很不错的豆瓣扩展,但是我还是想继续做一个自己扩展,下面是效果图

捕获

不断学习,加油……

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: