扩展程序是为了提升Chrome浏览器用户浏览体验而定制的小程序。它们使用户能够根据个人需求和偏好定制Chrome的功能和行为。
今天我们来介绍如何开发一个属于自己的chrome扩展程序。
首先在电脑上创建一个名字叫dodo_duck的文件夹，接下来，我们将这个文件夹中开发属于自己的chrome扩展程序。
（文末附有整个项目的下载方式）
1. 创建Manifest文件
扩展程序都是从Manifest文件开始的，在dodo_duck文件夹下创建一个名称为manifest.json的文件。然后在这个json文件中填上项目名称（name）、项目说明（description）、项目版本号（version）、项目权限（permissions）等内容。 如下图：
接下来，打开chrome浏览器，之行以下步骤：
-
在浏览器中输入chrome://extensions
-
打开右上角的“开发者模式“”按钮
-
点击“加载已解压的扩展程序”
-
选择之前创建的dodo_duck文件夹
此时浏览器的扩展程序页面将会出现一个名叫Dodo the Duck的程序。
2. 添加说明
虽然此时我们已经安装了扩展程序，但它没有任何说明。一些背景设置的脚本和许多其他重要组件必须在之前创建manifest.json中进行注册。首先我们在dodo_duck文件夹下创建一个名称为background.js的文件。这个文件主要功能是对扩展程序背景进行一些设置。
3. 编写用户界面程序
扩展程序的用户界面程序有很多形式，我们在这个项目中使用弹窗形式。在之前创建的dodo_duck文件夹下创建一个popup.html文件。这个文件的主要功能：
-
定制扩展程序的UI界面
-
两个控制按钮
-
一个是否播放声音的复选框
-
开发人员常用网站（StackOverflow、 github等）的链接地址
最终的UI界面如下图所示：
和之前设置背景的脚本一样，该文件需要在manifest.json中定义browser_action指定扩展程序的行为。如图所示：
在default_icon中为我们的扩展程序添加图标。
接下来在pop.html文件中添加pop.js脚本。
4. 一些交互逻辑
目前，我们已经完成了扩展程序的界面部分程序。接下来，我们需要进一步完成一些用户交互的逻辑。我们将继续完善pop.js文件中的内容。主要包括：
-
扩展程序建议的调试建议（DuckText）
-
报警设置的函数
-
其他设置函数
完成这部分后，扩展程序功能基本上完全可用。重新加载扩展，刷新chrome扩展程序页面。
然后点击固定扩展程序。
点击固定扩展程序后，此时浏览器扩展程序栏就会出现一个黄色鸭子图标。点击该图标将会弹出步骤3中我们编写的扩展程序的用户交互界面。
但是，除了我们添加到扩展中的四个网站之外，一些用户可能希望添加到他们经常使用的网站的链接。为此，我们将在扩展中添加扩展程序选项。
5. 用户自定义选项
包含一个选项页面可以让用户更好地控制扩展的功能，进一步定制他们的浏览体验。首先在dodo_duck文件夹下创建一个名称为options.html的文件，并在这个文件中添加允许用户自定义链接的代码。然后在manifest.json中中注册该选项页。
重新加载扩展并，单击“详细信息”。
向下滚动详细信息页面并选择“扩展选项”以查看选项页面，将会弹出允许用户自定义添加网站的页面。
最后一步就是完成用户自定义网站链接的逻辑代码。
创建一个名为options.js文件，我们在这个文件中添加用户自定义网站的代码内容。
最后点击扩展程序选项弹出的界面如图所示：
以上就是开发一个简易chrome扩展程序的所有步骤。
完成代码后，就可以在Chrome网上商店上发布扩展了。你可以创建开发人员帐户并按照开发人员页面上的说明进行操作。
整个项目下载方式：
关注微信公众号【IT路上人】，回复“duck”即可。