20分钟创建发布一个Chrome扩展

21世纪技术官社区导读：有没有想过创建Chrome扩展是什么样子？那么，本文将告诉你开发它是多么容易。 按照这些步骤，想法将立即变为现实，你将能够立即在Chrome网上应用店中发布自己真正的扩展。

什么是Chrome扩展？

通过Chrome扩展程序，我们可以将功能添加到Chrome网络浏览器，而无需深入研究本地代码。

人们可以使用Web开发相关熟悉的技术（如HTML，CSS和JavaScript）为Chrome创建新扩展。如果曾经做过网页，你甚至比吃午餐时间还快的速度创建扩展程序。我们需要学习的是如何通过Chrome公开的一些 JavaScript API 向Chrome添加自定义功能。

如果在构建网页方面你还没有经验，建议您首先深入一些免费资源，以了解如何编写HTML和JavaScript代码 。

想要做什么？

在开始之前，你应该对想要构建的内容有一个大概了解。它并不需要是一些新开创性的想法，我们做的也可以只是为了好玩。 在本文中，我们一起将想法梳理以及如何将它实施到Chrome扩展程序中。

开始开发

我对Unsplash Chrome扩展用了一段时间了，这使我可以在我的默认选项卡中获得很好的Unsplash背景图像。 我后来用Muzli Chrome扩展替换了它，默认选项卡变成了来自网络的设计新闻的推送。

让我们用这两个扩展作为灵感来构建新的东西。

我的想法是每次打开新选项卡时都会显示电影的随机背景图片。在滚动它应该变成流行的电影和电视节目。

第1步：配置

第一步是创建一个名为manifest.json的文件。

这是一个JSON格式的元数据文件，其中包含应用的扩展名，说明，版本号，作者等属性。

在这个文件中，我们告诉Chrome扩展将会做什么以及它需要什么权限。

对于电影扩展，我们需要拥有控制activeTab的权限，所以我们的manifest.json文件看起来像这样：

{

“manifest_version”: 2,

“name”: “RaterFox”,

“description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”,

“version”: “1”,

“author”: “Jake Prins”,

"browser_action": {

"default_icon": "tab-icon.png",

“default_title”: “Have a good day”

},

“chrome_url_overrides” : {

“newtab”: “newtab.html”

},

“permissions”: [“activeTab”]

}

我们看到，newtab.html是打开新选项卡时显示的HTML文件。 要想做到这一点，需要有权限控制activeTab ，所以当用户试图安装扩展程序时，会以扩展程序需要的所有权限提示。

manifest.json中最有趣的事情是浏览器操作。在本例中，我们用它来设置标题，还有一些选项。 例如，我们需要点击地址栏中的应用程序图标后显示一个弹出窗口。我们在代码里要做的就是这样：

“browser_action”：{

“default_popup”：“popup.html”，

}，

此时，popup.html将在用户点击浏览器操作就会弹出创建的窗口。

这是一个标准的HTML文件，因此它的内容可以是我们任何想显示的内容。

第2步：测试是否有效

下一步是创建newtab.html，我们加入“Hello world”两个单词：

Test

Hello World!

要测试它是否有效，请访问浏览器中的chrome://extensions ，并确认选中右上角的开发者模式的复选框。

图2 Chrome开发者模式

点击加载解压扩展包到的扩展文件专有的目录。 如果扩展程序有效，它会立即生效，可以打开一个新选项卡来查看你的'Hello world'。

第3步：让事情变得更好

现在我们做到了第一个功能，现在是时候让它变得更好。

我们可以通过在我们的扩展目录中创建一个main.css文件并将其加载到我们的newtab.html文件中来简单地设置我们的新选项卡。 包含您希望包含的任何活动功能的JavaScript文件时也是如此。 假设您之前已经创建了一个网页，那么您现在可以使用您的魔法向您的用户展示您想要的任何内容。

完成计划

我进一步需要完成HTML，CSS和JavaScript的电影预告扩展，我认为深入研究代码并不重要，想快速浏览一下。

根据我的想法，需要一些好的背景图片，所以在JavaScript文件中使用了TMDb API来获取一些流行影片信息，并将它们的背景图片放入一个数组中。 无论何时页面加载它，都会随机从该数组中选取一个图像，并将其设置为页面的背景。 为了让这个页面更有趣一些，我还在右上角添加了当前日期。 另外它允许用户单击导致访问电影的IMDb页面的背景。

当用户尝试向下滚动页面时，我用流行电影的下一个替换了屏幕内容。 我使用了相同的API来构建具有图像，标题，评级和票数的电影内容。 然后，点击其中一张卡片时，它会显示一个按钮以观看预告片。

结果

现在有了这个小小的manifest.json文件，只是一些HTML，CSS和JavaScript，现在打开的每个新标签，都看起来更有趣：

测试图片，微信平台禁止5M以上尺寸图片上传

第4步：发布你的扩展

我们的第一个Chrome扩展程序看起来还不错，并且可以运行，这时就可以发布到Chrome商店了。转至Chrome网上应用店信息中心（如果没有登录，则系统会要求您登录你的Google帐户）。 然后点击Add new item按钮，接受条款，就可以上传扩展程序的页面。将包括该项目的ZIP压缩包上传即可。

图3 Chrome网上应用商店

成功上传文件后，接着在一个表单添加一些关于此扩展程序的信息，可以添加图标，详细说明，上传一些截图等。

我们可以提供一些不错的图片来展示项目，Chrome商店会使用这些图宣传这个新创的项目。 你提供的图片越多，扩展的下载效果就越好。 可以通过点击Preview changes按钮来预览扩展程序在网上商店内的显示方式。如果对结果满意，点击Publish changes Publish changes 就可以发布。

现在转到Chrome网上应用店并通过标题搜索我们发布的扩展程序（可能需要一段时间才能到达该位置）。

如果你有兴趣，可以在这里找到我的：

RateFox - Popular Moview

余下的事情就是获取用户。

比如你可能在社交媒体上想分享一篇关于生活改变的Chrome扩展的文章，就可以告诉你的朋友去安装，包括将它添加到Chrome中。

如果你开发出来，别忘了在本文评论中分享你的项目。 我们很好奇看到你想出了什么好东西！

小结

作为Web开发人员，在短时间内创建Chrome扩展程序相对容易。只需要一些HTML，CSS，JavaScript，以及如何通过Chrome公开的一些JavaScript API添加功能的基本知识。 包括初始设置在内，在20分钟内就可在Chrome网上应用店内发布。

当然，构建一个新的复杂的或者看起来体验不错的扩展需要更多的时间。

开发者可以利用你的创造力做出一些更有趣的事，如果遇到困难，优秀的Chrome扩展文档可能会帮助您。

还在等什么？ 开始开发自己的Chrome扩展，把想法变为现实！

作者：Jake Prins

编译：21世纪技术官社区