2016-10-19

Chrome插件开发基础

文章目录

1. 前言
2. 官方入门demo
3. 查询公网IP
4. 发布
5. 本地插件安装
6. 后记
7. 书签

前言

前些天，小伙伴问我会不会开发chrome插件。突然意识到，这是个有趣的事情，那就搞一搞。

最开始想做一个批量下载图片插件，很快找到一个fatkun。做一个视频广告屏蔽插件？太难，放弃。要不做一个翻墙插件？更难，放弃。做一个划词翻译插件怎么样？已经有了Google翻译和划词翻译。做一个页面截图插件？已经有了捕捉网页截图 - FireShot的。做一个markdown编辑器？已经有了Markdown Here。

果然是前人种树，后人没地种哇！后来想做一个柯林斯词典翻译，然而没有平台提供这个词典的接口，唯一的办法是抓取百度翻译的页面，然后截取结果。太麻烦，还要搭个服务器。

最终，决定做一个获取公网IP的插件。
开发工具：sublime；
开发语言：html+css+js。

官方入门demo

目录结构

chrome-extention-start
|-icon.png
|-manifest.json
|-popup.html
|-popup.js

其中，icon.png是插件的图标；manifest.json是插件的配置文件；popup.html是单击插件图标后弹出的页面；popup.js是业务处理的js。

启用插件

访问chrome://extensions，勾选开发者模式，加载已解压的扩展程序，选择chrome-extention-start文件夹。

试用

官方给出的效果是这样的：

小编满怀期待打开YouTube，结果是这样的：

不要在意这些细节，至少第一个插件已经跑起来了！

查询公网IP

manifest.json

{
  "manifest_version": 2,

  "name": "Public IP",
  "description": "This extension shows your public IP",
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "64": "icon_64.png",
    "128": "icon_128.png"
  },
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon_19.png",
    "default_title": "查看公网IP",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://ip.chinaz.com/getip.aspx"
  ]
}

需要注意的是，permissions中的url是允许跨域的。

$(function(){
  String.prototype.replaceAll  = function(s1,s2){     
    return this.replace(new RegExp(s1,"gm"),s2);     
  }

  $.ajax({
    url: 'http://ip.chinaz.com/getip.aspx',
    type: 'GET',
    data: {},
    success: function(data){
      console.log(data);
      data = data.replace("ip","'ip'");
      data = data.replace("address","'address'");
      data = data.replaceAll("\'","\"");
      console.log(data);
      var dataJson = JSON.parse(data);
      $('#ip').val(dataJson.ip);
      $('#address').val(dataJson.address);
    },
    error: function(xhr){
      console.log(xhr);
    }
  });
  
});