![我是如何开发和部署一个Chrome扩展程序的](https://static001.infoq.cn/resource/image/17/3a/1730835efa1c19a131f506416df42e3a.jpg)
毫无疑问,Chrome 是世界上使用范围最广的浏览器。它以出色的性能、实用的开发工具和丰富的扩展而闻名。
当前,Chrome Web 商店中有 14 万个扩展,其中许多已经为开发人员带来了可观的收入。
虽然开发和部署自己的扩展可能听上去比较麻烦,但我将向你展示那有多么简单。
本文将介绍我自己创建和推出第一个 Chrome 扩展的整个过程。
只要你对 HTML、JavaScript 有一些基本的了解,就可以按本文介绍的内容进行操作,因为我会介绍这个过程的每个细节。
让我们开始吧!
提出一个创意
要创建扩展,第一个重要的步骤是提出一个创意。
我的创意是创建一个扩展,利用谷歌搜索技巧帮助人们更轻松地在谷歌上查找信息。
例如,你可以使用关键字site
指定查询结果的来源站点。
![](https://static001.geekbang.org/infoq/27/27bd6790e268fb7e0d72de778e01fcc8.png)
如你所见,当我在搜索关键词中加入site:medium.com
时,所有的结果都来自 Medium。我的扩展将提供一个输入界面,省去记忆这些关键字的麻烦。
剧透预警!以下是我的扩展提供的界面:
![](https://static001.geekbang.org/infoq/7b/7b0207e734a60d012af36a7ed0dfdca2.png)
在输入所需字段并点击“搜索”后,它将打开一个新页签,而搜索查询会包含所有关键字。
这就是我的创意。现在,让我们继续看下技术实现。
创建 Manifest.json 文件
Manifest.json
是扩展最重要的部分。它把有关扩展功能和元数据的信息提供给浏览器。
因此,提供正确的manifest.json
文件数据至关重要,否则,浏览器将无法得知扩展如何工作。
manifest.json
文件中有许多字段,但只有manifest_version
、name
、version
是必须的。这里有一个 manifest 文件,感兴趣的读者可以看一下。
下面是我的manifest.json
文件:
![](https://static001.geekbang.org/infoq/44/445d6682751fe9ba59920cba8268fa50.png)
以下是每个属性的简单介绍:
manifest_version
:扩展的 manifest 版本。我建议使用版本 3,因为版本 2 谷歌很快就不支持了。name
:扩展名称。description
:扩展介绍。version
:扩展版本。谷歌建议初始发布时使用一个小点的版本号,并随着时间推移逐步增大。action/default_popup
:定义点击扩展时将打开哪个模态窗口。在这个例子中,我创建了一个popup.html
文件作为默认模态窗口(稍后会有详细介绍)。icons
:扩展的图标。 谷歌建议使用 3 种图标尺寸,用于在不同的场景下显示扩展:16x16 用于收藏夹、48x48 用于扩展管理页、128x128 用于 Chrome Web 商店。
![](https://static001.geekbang.org/infoq/04/04511f9c9019e79696775fddf861ccd9.png)
我为扩展制作的图标
根据项目,manifest.json
文件可能会复杂得多。不过,对于我的扩展,这就够了。尽量简单!
将扩展加载到浏览器
在创建好manifest.json
文件后,下一步是将扩展连接到浏览器。
进入扩展管理页->保证已开启开发者模式->点击“加载已解压的扩展程序”。
![](https://static001.geekbang.org/infoq/1a/1a2d34ff1999aabcff7079db82b26938.png)
然后,选择包含manifest.json
文件的项目文件夹。
![](https://static001.geekbang.org/infoq/7b/7b62e6402e91df718bb18257d72d6e7a.png)
之后,在扩展管理页上就可以看到新添加的扩展了。
![](https://static001.geekbang.org/infoq/99/994e2fca1326f2b9425f472a10641e83.png)
我建议将扩展固定到工具栏,那样变更测试会简单些。
![](https://static001.geekbang.org/infoq/b2/b282ace4a9ba72c28f6c6c8c4f6bcbe9.png)
现在,让我们继续看下功能实现部分的代码。
创建弹出模态窗口(HTML)
从上面介绍的manifest.json
文件中可以看到,default_popup
指向popup.html
文件。该文件包含弹出界面的HTML 代码。
popup.html
文件内容如下所示:
![](https://static001.geekbang.org/infoq/ba/ba22fad280e228783fcbcc5fccb257ed.png)
上图展示了每个输入元素在 HTML 中是如何编码的。为了节省时间,样式使用了Bootstrap。
这里需要重点注意的是每个元素都有一个 id。我们将使用这些 id 来获取元素的数据,在点击按钮时执行搜索动作。
那也是我们接下来要介绍的内容,获取输入值,执行搜索动作。
编写弹出逻辑(JavaScript)
我的扩展逻辑相当简单。它将根据输入值生成搜索查询。
例如,如果搜索值是“how to make money”,而结果来自“medium.com”,那么搜索查询将是“how to make money site:medium.com”。
![](https://static001.geekbang.org/infoq/70/70e76bbfdefc7f0e56b4570d903ee4b0.png)
下面是代码:
![](https://static001.geekbang.org/infoq/01/012898af10b7cda8ee6955d7c0a7cf5f.png)
如你所见,我将输入值串联起来生成最终的搜索查询。在生成最终的搜索关键词后,打开一个包含该查询的新页签。
逻辑就这些。最后一步是将扩展发布到 Chrome Web 商店。
发布扩展
为了将扩展发布到 Chrome Web 商店,我们需要注册一个开发者账号,并一次性支付 5 美元的注册费。
![](https://static001.geekbang.org/infoq/97/97d0ab96638b4a22e4d4ae299d6567be.png)
然后,进入“开发人员面板(Developer Dashboard)”,点击“新建项(New Item)”,创建一个新扩展。
![](https://static001.geekbang.org/infoq/19/191c685a1ae76ecf49f6827815f4fb3c.png)
接下来,需要填写有关扩展的信息,如描述、类别等。
![](https://static001.geekbang.org/infoq/c9/c9d21f2d4092da77653f450d83708d70.png)
当一切准备就绪,只需点击提交进行扩展发布审核。
![](https://static001.geekbang.org/infoq/d9/d93ad9aa4d932754ba34748a9263b2f3.png)
谷歌审核大概需要 1 到 2 天。审核通过后,就可以通过商店安装了。
![](https://static001.geekbang.org/infoq/64/6400c828fd1432a3103e419a2a38abfd.png)
经过一段时间的等待,我的扩展审批通过并公开发布了(试用)。
本文要介绍的内容就这些,希望对你有所帮助。感谢阅读!
原文链接:
https://medium.com/geekculture/how-i-build-and-publish-a-chrome-extension-e8fe37c0f578
评论