Chrome插件开发笔记

###说明
最近Chrome又进行了升级,发现 有道词典 For Chrome 居然不能取词了,找了一下Google的商店,发现有人实现了划词翻译功能,之前就一直想了解一下 Chrome Extensions 开发,正好趁这个机会接触一下,就拿取词来练手一下吧,这篇文章估计会有点长,尽可能把我遇到的情况都写出来,希望能帮助同样想要入门的朋友。

###准备
首先要装Chrome,当然这是必须的,另外你还要有 Javascripthtmlcss 的基础,因为 Chrome Extensions 是用javascript写的。剩下的还要有一款可以编辑以上语言的编辑器,我这里就用了 Sublime Text

###开始
1、首先你要在任意路径(最好是英文)建立一个文件夹用来存放插件的文件,然后我们在这个文件夹里面新建一个文件 manifest.json,这个文件是开发Chrome最核心的文件了,下面我们看配置:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
{
"name": "WMTranslate", // 应用名称
"version": "1.0", // 应用版本号
"description" : "描述", // 应用描述
"manifest_version": 2, // 指定清单文件格式的版本,在Chrome18之后,
// 权限声明
"permissions": [
"tabs", // 可以使用Tabs权限
"http://*/*", // 可以访问所有http的协议网站
"https://*/*", // 可以访问所有的https协议网站
"notifications", // 可以使用系统通知
"audio" // 可以使用音频
],
// 图标
"icons":
{
"48": "icon.png"
},
"permissions": ["contextMenus","tabs","<all_urls>"], // 允许使用右键菜单
"background": {
"scripts": ["jquery-2.1.0.min.js", "background.js"]
},
"browser_action":
{
"default_icon": "icon.png" ,
"default_title": "Chrome Translate",
"default_popup": "popup.html"
},
//
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css" : ["cluetip.css"],
"js": ["jquery-2.1.0.min.js", "Translate.js"]
}
],
"update_url": "" // 插件更新地址
}

名词解释

  • background:我们的插件有可能会监听用户行为或者做一些逻辑处理,那么我们就要把代码写到这里,它可以是一个html,也可以是一个js文件,不过大多数人都习惯用js文件。(当然你可以使用jQuery,但是需要引入jQuery的库文件)
  • options_page:这个是插件的设置页面,并不是必须的。

    1
    2
    3
    4
    5
    $(document).ready(function () {
    $("#btnOpenSetting").click(function () {
    OpenSetting();
    });
    });
  • browser_action(扩展图标):可以设置在插件栏插件所显示的图标和点击后的处理。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
    "name": "My extension",
    ...
    "browser_action": {
    "default_icon": { // optional
    "19": "images/icon19.png", // optional
    "38": "images/icon38.png" // optional
    },
    "default_title": "Google Mail", // optional; shown in tooltip
    "default_popup": "popup.html" // optional
    },
    ...
    }
  • update_url:这个是插件的更新地址,如果是通过Google官方发布的,那么则不需要,否则就需要设置这个地址来跟新你的插件。

    1
    2
    3
    4
    5
    6
    <?xml version='1.0' encoding='UTF-8'?>
    <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
    <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
    <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
    </app>
    </gupdate>
  • Page Actions(地址栏图标):是在地址栏右侧显示的图标,Page Actions并不能在所有页面都可以显示出来。

2、我们把书写的文件放进Chrome里面进行调试。

首先我们打开 chrome://extensions/ ,然后在右侧的 开发者模式 上面打勾,然后点击左侧的 加载正在开发的扩展程序 ,选择我们插件所在的文件夹,这样就可以把插件导入进来了。

我的插件已经放到Github上面了,虽然不完善,但是也可以正常运行,给大家一个参考。

WMTranslate