runfast󰀦lynda

如何写一个 Chrome 扩展应用

动手之前的有用信息

Chrome 扩展应用由哪几部分组成?

Chrome 扩展应用本质上来说是一个 web 页面,扩展文件以 .crx 为后缀名,解压后的扩展应用都应该包含下面的文件:

扩展应用的界面

很多应用会以 browser action 或 page action 的形式在浏览器界面上展现出来。每个应用最多可以有一个 browser action 或 page action。当应用的图标是否显示出来是取决于单个的页面时,应当选择 page action;当其它情况时可以选择 browser action。 browser action page action

popup 属于 Browser Actions,当点击图标时出现这个窗口,可以放置任何 HTML 元素,它的宽度是自适应的。

如下图中是 Google 翻译的popup窗口:

Background Pages 后台页面

绝大多数应用都包含一个背景页面( background page ),用来执行应用的主要功能。但是这个窗口不会显示,它是扩展程序的后台服务,它会一直保持运行。比如在一些需要数据保存程序中,如果当前用户关闭popup,就需要 Background Pages 来进行相应的操作。

自己动手写一个 Chrome 扩展应用

第一步:建立 manifest.json 文件

manifest.json 是元数据文件,这里面包含着扩展应用的名称,描述,版本号等属性。例如:

{
"name": "My Extension",
"version": "2.1",
"description": "This is a test",
"browser_action": {
    "default_title": "test",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

其中 name 代表应用程序名,version 代表版本号,description 代表功能描述。browser_action 代表扩展图标段显示,它会定义图标地址(需要在文件夹中添加)、标题(也就是鼠标悬停提示)和默认的 popup 页面。我们这里定义的 popup 页面为 popup.html。

第二步:定义 popup.html

接下来开始定义 popup.html 显示,它不需要使用 html、head 和 body 标签,可以直接写上样式、脚本和 html。例如:

<style type="text/css">
*{
  margin:0;padding:0;
}
</style>
<div>test</div>

调试

第二步做完就是一个简单的 Chrome 扩展应用。此时,在 Chrome 中输入 chrome://settings/extensions 打开插件页,先勾选开发者模式,这样会出现一个载入插件的选项,如下图:

点击载入插件后,在路径中找到保存文件的文件夹然后打开就行了,如果顺利的打开,就说明你的插件没有任何问题,如果错误的话,他会提示你在哪里错了,然后按照他的提示修改就行了。

发布

制作好后,要想发布需要提交给 Google 进行审核,提交地址 注意要压缩成zip格式后提交,不要用.crx格式。上传后,填写相关信息,然后就是等待审核上线。

到此一个简单的 Chrome 扩展应用就完成了,当然它可以做的更多,其他的参数建议大家查看 Google 的官方文档。