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世纪技术官社区

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180228B1GICN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券