# 编写第一个Chrome Extension

joyqi 发布于2019-08-23 13:50 / 2925人阅读

摘要：可以加载到内，通过操纵浏览器，从而完成一些定制的工作。一个最低需求的文件是必要的可选的图标等。如果这样验证都是如期望的话，就表明你的第一个扩展已经开发成功。正式发布可以在内发布扩展，只要点击进入后，按照操作指示即可。

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图片的链接，内容如下：

Image PlaceHolder!

    640X400

    640X640
    
    32X32

因为只是测试，可以生成一个占位图来做图标，我们通过链接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
感谢作者的奉献。

GPU云服务器云服务器 chrome-extension 第一个数据导出数据编写一个方法简单编写一个html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99655.html

# 编写第二个Chrome Extension+Copy URL+Title

摘要：添加键盘快捷键的方法提供了，可以通过它来添加触发中操作的快捷键。可以在内声明如下这意味着在用户按下指定按钮，会触发一个叫做的操作。在后台页面中，您可以通过将处理程序绑定到清单中定义的命令。我们在上网时，常常需要把刚兴趣的文章记录下来，方便以后继续细看。如果记录为Markdown格式的话，还可以方便的把文章链接加入到自己创作的文章内。今天编写的小工具，就是一个Chrome Exten...

rollback 2019-08-23 13:52 评论0 收藏0
Chrome 扩展开发——编写一个自己的浏览器插件

摘要：配置文件每一个扩展都有一个格式的文件，叫。此消息发送后会触发扩展内每个页面的事件。和持续长时间的保持会话需要在和扩展建立一个长时间存在的通道。内容脚本发送消息到扩展程序建立通道，并给通道命名利用通道发送一条消息。这次的练习是做一个Chrome的扩展，分享一下入门开发过程。因为在消息传递那块纠结了特别久，所以我会重点总结消息传递那块。这次做这个插件的功能很简单，就是点击按钮后可以对当...

SunZhaopeng 2019-08-20 11:09 评论0 收藏0
FE.BASE-vscode使用、原理、插件开发笔记

摘要：插件提供内容，负责渲染。增量更新，尽可能地减少重新渲染长时间运行的任务应该支持，并可以取消插件能够正确地处理对象的生命周期。使用了模式，运行可以将这个对象销毁。使用命令行使用帮助：code --help 使用已经打开的窗口来打开文件：code -r 打开文件并滚动到特定行：code -r -g package.json:128 比较两个文件：code -r -d a.tx...

MingjunYang 2019-08-26 13:46 评论0 收藏0
【Chrome扩展开发】定制HTTP请求响应头域

摘要：关于我的博客掘金专栏路易斯专栏原文链接扩展开发定制请求响应头域本文共字，阅读需分钟。那么，我会放弃吗反向代理显然不会，既然问题出在上，我去掉就行了。然而无论多少次的学习和模仿，最终的目的还是为了使用，故开发一款定制请求的势在必行。本文首发于《程序员》杂志2017年第9、10、11期，下面的版本又经过进一步的修订。关于 Github：IHeader 我的博客：louis blog ...

MadPecker 2019-08-21 17:38 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

rubyshen 2019-08-23 13:58 评论0 收藏0