一个计算机技术爱好者与学习者

0%

Chrome插件开发基础

1. 前言

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

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

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

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

2. 官方入门demo

2.1. 目录结构

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

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

2.2. 启用插件

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

2.3. 试用

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

郝同学满怀期待打开YouTube,结果是这样的:

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

3. 查询公网IP

3.1. manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"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是允许跨域的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(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);
}
});

});

3.3. 效果

4. 发布

插件的发布非常简单,上传项目的zip压缩包之后,填写一些信息即可。但是,想要获得发布插件的权限,非常麻烦,具体我会在后记部分吐槽。

5. 本地插件安装

假设电脑被墙,又需要安装Chrome插件,那么下载crx文件,然后在Chrome地址栏输入chrome://extensions/,并将下载的crx拖入该页面即可。

6. 后记

谷歌,你妹!这特么歧视也太明显了吧!大陆开发者,无法发布应用。要想发布,只能使用除了中国大陆外的信用卡支付!我*&……%¥#@!

历经波折,终于拿到一张全球付的卡。然而由于激动,进错了页面,到了Google Play的支付页面,填写信息时居然有中国的选项,理所当然选了中国,填了真实信息。

后来,发现进错页面,回到开发者信息中心,却再也无法点出付款的页面!!!

当我转到google payment center,却提示遇到了一个问题!What the fuck!这是摆明了不给修改的机会哇!

万般无奈,注册了小号,才支付成功。
最后,附上插件链接:
https://chrome.google.com/webstore/detail/public-ip/cdpgbfmmhnbmkdnhlgjpbjdgblggnhck

7. 书签

Getting Started: Building a Chrome Extension
https://developer.chrome.com/extensions/getstarted

360极速浏览器应用开放平台
http://open.chrome.360.cn/extension_dev/overview.html

Chrome扩展技术手册
http://crxdoczh.readthedocs.io/en/latest/

Chrome扩展及应用开发(首发版)
http://www.ituring.com.cn/book/1421

如何从零开始写一个 Chrome 扩展?
https://www.zhihu.com/question/20179805

2016年最实用的七款chrome浏览器“神器”级别插件
http://mt.sohu.com/20160621/n455512782.shtml

如何发布一款Chrome App
https://segmentfault.com/a/1190000000354014

发布了几个自己制作的Chrome插件
http://www.jianshu.com/p/NpjteJ

Chrome插件(Extensions)开发攻略
http://www.cnblogs.com/guogangj/p/3235703.html

Google Play Developer Console
https://play.google.com/apps/publish/signup/

开发者信息中心
https://chrome.google.com/webstore/developer/dashboard/

Google payment center
https://payments.google.com/payments/home#settings

全球付 -国际购物-在线消费新体验
https://www.globalcash.hk/index-welcome.do