# 编写第一个Chrome Extension

2023年2月1日 148次阅读 来源: 1000copy

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
谢谢作者的贡献。

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000017227413
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞