目录

前言

无意中发现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://v2ex.com"><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.v2ex.com/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") });
    }); 
   
});

第四步:打包应用

使用chrome浏览器打包插件:

tar.png

插件下载

下载地址

源码

Git OSC: v2ex_chrome_extension

效果

hot.png

lastest.jpg