# 编写第一个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"]
}

接下来就很是关键的几个字段作出说明：

1. permissions字段指明应用须要的权限。由于咱们须要覆盖默认的Chrome新建页面的内容，所以须要使用permissions字段，指明须要控制activeTab权限
2. chrome_url_overrides字段，指明覆盖Chrome新建页面的页面，这里是newtab.html文件。此文件就是一个咱们熟悉的任何的HTML文件，其中可使用任何合法的HTML标签，以及包含和引入CSS、JS文件
3. browser_action字段也是很是关键的，用来指明Chrome Extension在Chrome工具条的图标和抬头。加载任何一个扩展后，会在Chrome浏览器工具条上显示此指定的图标，当鼠标移动到此图标时会显示此指定抬头
4. 其余字段，这样用于显示和备注目的，好比做者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内发布扩展，只要点击进入后，按照操做指示便可。

进一步

在此扩展的开发过程当中，咱们了解到了相似

1. permissions
2. chrome_url_overrides
3. browser_action

等特定于Chrome Extension的特定开发技术概念，能够在Chrome开发者指导内找到更多API信息。

我我的想要作一个按键后拷贝当前页面的Title和URL的扩展，能够今后扩展Copy URL + Title内学习到更多的开发知识。

credits

本文概略翻译于此文。
How to Create and Publish a Chrome Extension in 20 minutes 感谢做者的奉献。