这篇文章是一个使用反应构建简单的Chrome扩展的指南。有了这个,您将有一个继续并构建您自己的扩展功能的起点。
上周,我为一位客户完成了chrome扩展。这个扩展是作为一个视图引擎来渲染弹出的。所以我想,写一篇关于如何构建自己的扩展的文章不是很好吗?
在这篇文章中,我将引导您通过使用React来构建一个简单的Chrome扩展。在此介绍之后,您将有一个开始点来继续并构建您自己的扩展功能。
所以让我们开始吧。
创建项目
您要做的第一件事是创建扩展项目。我们将使用这个项目来生成项目。如果您还没有安装create- response -app,只需在命令行中运行以下代码:
npm install -g create-react-app
注意:我假设您的机器上已经安装了节点和npm。
一旦您的机器上有了create-反应式应用程序,就生成一个新项目。在命令行中,运行以下代码:
create-react-app my-extension
create- response -app将创建一个名为my-extension的新项目,它包含了运行新项目所需的所有反应样板。
在您最喜欢的IDE中打开新生成的项目,让我们继续。
添加清单
Chrome扩展需要有一个清单。json文件在其根文件夹中。该清单告诉Chrome如何创建扩展以及如何运行它。在清单中,您将配置诸如徽标、名称和扩展的描述之类的内容。由于您将希望将构建根文件夹中的manifest部分设置为,我建议将其放入项目的公用文件夹中。在create- response -app中,在编译项目时,公用文件夹只是原样复制到构建文件夹。我建议放入公共文件夹的其他内容包括内容和背景脚本和资产。
注意:在本文中,我不会讨论内容和背景脚本是什么,所以我鼓励您阅读它们。
create- response -app已经包含了一个清单。公共文件夹中的json文件。用以下清单覆盖文件:
{
"manifest_version": 2,
"name": "My Extension",
"description": "This extension is a starting point to create a real Chrome extension",
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"16": "logo-small.png",
"48": "logo-small.png",
"128": "logo-small.png"
"permissions": [
]
}
这个manifest.json中包含什么?
我们有明显的版本、名称和描述,这些都是不言自明的。browser_action部分告诉Chrome,我们将有一个将运行该索引的弹出窗口。html文件。这些图标将用于显示扩展托盘和Chrome扩展列表中的图标。最后但并非最不重要的是,权限数组将包含扩展需要成功操作的所有权限。目前,它是空的。
注意:关于扩展清单格式的进一步阅读,我建议您看一下清单文件格式。
您可以将128像素宽的图像添加到名为logo-small的公共文件夹中。png(或将该名称更改为您的徽标图像名称)。
现在我们有了清单和徽标,您可以在命令行中使用下面的代码来编译项目:
npm run build
添加扩展到您的Chrome。
为了检查你的新扩展,你将不得不安装它在Chrome。您可以执行以下操作来安装它。
在Chrome中,打开扩展列表,打开一个新标签并运行以下URL:
chrome://extensions/
按下加载打开的扩展…按钮。
浏览到构建文件夹并按下OK按钮。
如果一切顺利,您将在Chrome中安装您的扩展。
恭喜你建立了第一个Chrome扩展。稍后,如果您在Chrome扩展商店中有一个开发人员帐户,您将能够将其加载到商店并公开发布。
总结
在这篇文章中,我向您展示了如何开始构建一个带有视图引擎的Chrome扩展。我使用了create- response -app和一些简单的清单操作来启动。当然,开发一个扩展不仅仅是构建一个“hello world”的视图,但这是一个值得拥有它自己的帖子的东西。
4000520066 欢迎批评指正
All Rights Reserved 新浪公司 版权所有