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世纪技术官社区
领取专属 10元无门槛券
私享最新 技术干货