使用React构建Chrome扩展

使用React构建Chrome扩展
2018年02月03日 12:56 帅的相对论

这篇文章是一个使用反应构建简单的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”的视图,但这是一个值得拥有它自己的帖子的东西。

财经自媒体联盟更多自媒体作者

新浪首页 语音播报 相关新闻 返回顶部