四步开发V2EX的Chrome插件

icecity1306 2015-01-04

展开全文

5 · 第三步：定义AJAX获取v2ex信息

前言

无意中发现chrome插件开发挺有趣。

插件组成

chrome插件基本组成有4个文件：

manifest.json - 插件的配置文件，可看作插件的“入口”。
icon.png - 小图标
popup.html - 插件主页面。
popup.js - 页面所引用的javascript文件。

第一步：设置配置文件

{
  "name": "V2EX",
  "description": "V2EX",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "V2EX",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2
}

permissions定义插件的权限

第二步：创建主页面

<head>
    <title>V2EX</title>
     <script src="jquery.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div class="main">
        <ul class="header">         
            <li class="hot current">最热主题</li>
            <li class="new">最新主题</li>
            <li class="logo"><a href="http://"><img src="logo.png"></img></a></li>
        </ul> 
        <ul class="content">
        </ul> 
    </div>
  </body>

第三步：定义AJAX获取v2ex信息

document.addEventListener('DOMContentLoaded', function () { 
//获取json信息                        htmlobj=$.ajax({url:"https://www./api/topics/hot.json",dataType:"json",async:false});
        change(htmlobj,".hot"); 
  var json=JSON.parse(htmlobj.responseText); 
//append要主页面
    for(var i=0;i<json.length;i++){
        $("body .content").append("<li><small>"+transfer(json[i].created)+"</small><a href='"+json[i].url+"'>"+json[i].title+"</a>("+json[i].replies+")</li>");
    }
//使用新tab打开链接
    $("body a").click(function(){
        chrome.tabs.create({ url: $(this).attr("href") });
    }); 
   
});