乐趣区

# 编写第一个Chrome Extension

Chrome Extension 可以加载到 Chrome 内,通过操纵 Chrome 浏览器,从而完成一些定制的工作。
假设你想要一个功能,它可以在你点击上下文菜单项目时剪贴当前标签的 URL 和标题的话,这个功能在 Chrome 本身并不支持,那么就可以通过一个 Chrome Extension 来完成此项特性。
最少结构
在编码过程中,我常常需要创建一些占位图片,以便验证 UI 布局和效果。因此我想要创建一个 Chrome Extension,当用户打开新的页面时,使用一个生成 PlaceHolder 的链接群替代默认的新页面。
一个 Chrome Extension 最低需求的文件是 manifest.json、必要的 html 可选的图标、CSS、JS 等。这里的文件清单如下:
manifect.json 元文件
newtab.html HTML 文件
120.png 图标文件

元文件 manifect.json
元文件用于描述一个 Chrome Extension 的信息,是创建一个 Chrome Extension 所必须的。
此文件是一个 Json 文件,在我们这次需求中文件如下:
{
“manifest_version”: 2,
“name”: “PlaceHolderImage”,
“description”: “Make PlaceHolder Image”,
“version”: “1”,
“author”: “Reco”,
“browser_action”: {
“default_icon”: “120.png”,
“default_title”: “PlaceHolder Factory”
},
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
“permissions”: [“activeTab”]
}

接下来就非常关键的几个字段做出说明:

permissions 字段指明应用需要的权限。因为我们需要覆盖默认的 Chrome 新建页面的内容,因此需要使用 permissions 字段,指明需要控制 activeTab 权限
chrome_url_overrides 字段,指明覆盖 Chrome 新建页面的页面,这里是 newtab.html 文件。此文件就是一个我们熟悉的任何的 HTML 文件,其中可以使用任何合法的 HTML 标签,以及包含和引入 CSS、JS 文件
browser_action 字段也是非常关键的,用来指明 Chrome Extension 在 Chrome 工具条的图标和抬头。加载任何一个扩展后,会在 Chrome 浏览器工具条上显示此指定的图标,当鼠标移动到此图标时会显示此指定抬头
其他字段,这样用于显示和备注目的,比如作者 author,扩展名字 name 等。它们不是关键字段,但是也需要学习了解

新页面文件和图标
在 manifest 文件内指定了 newtab.html,会在用户创建新页面的时候显示,因此是一个关键的文件。我们需要再次列出常见的需要生成 PlaceHolder 图片的链接,内容如下:
<h1>Image PlaceHolder!</h1>
<ul>
<li><a href=”https://via.placeholder.com/640X400″>640X400</li>
<li><a href=”https://via.placeholder.com/640″>640X640</li>
<li><a href=”https://via.placeholder.com/32″>32X32</li>
</ul>

因为只是测试,可以生成一个占位图来做图标,我们通过链接 https://via.placeholder.com/120 创建一个突破,并保存到

120.png

文件内。
现在文件准备完毕,可以去看效果了。
测试效果
打开扩展加载链接,进入 Chrome 扩展管理页面,并打开开发者模式, 点击 ” 加载已解压的扩展程序 ” 按钮,在对话框内选择你的开发目录,即可加载扩展,你可以看到在 Chrome 工具栏内的此扩展的图标,可以把鼠标移动到该图标上查看扩展的标题,点击“新标签页“菜单,可以看到你的 newtab.html 被显示出来。
如果这样验证都是如期望的话,就表明你的第一个扩展已经开发成功。
正式发布
可以在 Chrome Dashboard 内发布扩展,只要点击进入后,按照操作指示即可。
进一步
在此扩展的开发过程中,我们了解到了类似

permissions
chrome_url_overrides
browser_action

等特定于 Chrome Extension 的特定开发技术概念,可以在 Chrome 开发者指导内找到更多 API 信息。
我个人想要做一个按键后拷贝当前页面的 Title 和 URL 的扩展,可以从此扩展 Copy URL + Title 内学习到更多的开发知识。
credits
本文概略翻译于此文。How to Create and Publish a Chrome Extension in 20 minutes 感谢作者的奉献。

退出移动版