Chrome插件开发教程 – 工程结构

继我们上次写的2020最新Chrome插件开发指南之后,我们开始新的旅程。我们将通过一个真实的项目,来和大家一起学习如何开发Chrome插件。

在看这篇文章之前,相信大家对上一篇文章中提到的一些技术都去做了一些简单的了解。如果是第一次接触这些技术,对很多技术不是很了解,这并不妨碍你继续学习如何开发Chrome插件。

当我开发Chrome插件的时候,我会按照下列步骤进行:

创建工程

打开Github Desktop,是的,没错,Github。我们总会将我们的代码存放在某个地方,而Github是最完美的地方。

如果不知道GitHub Desktop,请点击这里了解并下载

  • 打开GitHub Desktop之后,请先登陆你的Github账号。
  • 登陆账号之后,点击”File“。
Create new github repository
  • 点击”New Repository“。
  • 给你的项目取个名字。在这里,我们取”chrome-extension-development-tutorial”。有点长对不对?你可以按照你喜欢的方式和长短来命名。
  • 给你的项目添加描述。我们填写”This is a chrome extension development tutorial for beginners.”。
  • 选择项目在本地的存放路径。如你缩减,我们的设置是:/Users/brucelu/Documents/GitHub/bruce-lab
  • 选中“Initialize this repository with a README“。
  • “Git Ignore“中,我们选择“None“。选择很多,但是Node最为与我们的工程接近。当然,你也可以选择“None“。以后再添加。
  • “License“中,我们选择”None“。你也可以选择“None”,在详细了各个License区别之后,再添加。
  • 全部完毕之后,点击”Create Repository”。
Fill github repository information
  • 点击“Publish repository”。这里将会把项目提交到Github。
github desktop publish repository
  • 这里我们取消”Keep this code private”。当然,你可以设置你的这个代码为Private。Github现在并不对私有代码仓库收费。
github desktop publish set public
  • 点击“Publish Repository”。
github desktop publish finished

到现在为止,一切都很好。

如果你已经安装了Visual Studio Code,可以直接在Github Desktop中,点击“Open in Visual Studio Code“。完美的配合。

让我们到Github检查一下。

  • 打开https://github.com/
  • 让我们看看发生了什么。你可以在左侧看到我们刚刚创建好的工程。
  • 点击进去看看。
  • 哇哦,一切完美。的确是我们创建的工程。
login github
visit github chrome extension development tutorial

回到我们的主题,工程结构。

在代码仓库准备就绪之后,我们来看看,创建一个Chrome插件开发工程,到底应该怎么创建。

开发的代码和发布的代码

首先我们需要一个src文件夹。在src文件夹里,我们来存放我们开发使用的代码。

另外我们还需要一个dist或者build文件夹,用来存放发布的代码和资源文件。请根据你的喜好来选择发布代码的文件夹。dist或者build二选一。

让我们动起手来吧,创建文件夹“src”和“dist”。

package.json

当我们用到npm,我们就可以通过package.json来对我们的项目做一些约定。

你可以使用“npm init“命令来创建,或者手动创建package.json文件。

visual studio code create package.json file

基本设置

{
    "name": "chrome-extension-development-tutorial",
    "version": "1.0.0",
    "description": "This is a chrome extension development tutorial for beginners.",
    "author": "Bruce",
    "homepage": "https://www.empirehacker.com",
    "private": true,
    "repository": {
        "type": "git",
        "url": "git+https://github.com/bruce-lab/chrome-extension-development-tutorial"
    }
}

用到一些第三方代码库

在我们的项目中,我们用到了gulpjs。

在Visual Studio Code中,对“src”文件夹点右键,选择“Open In Terminal”。

在“terminal”窗口中,输入“npm install gulp –verbose”,然后按回车。

我会在命令之后使用–verbose,以便当错误发生时定位。

npm install gulp --verbose

当该命令执行完成之后,npm对package.json进行了更新。

{
    "name": "chrome-extension-development-tutorial",
    "version": "1.0.0",
    "description": "This is a chrome extension development tutorial for beginners.",
    "author": "Bruce",
    "homepage": "https://www.empirehacker.com",
    "private": true,
    "repository": {
        "type": "git",
        "url": "git+https://github.com/bruce-lab/chrome-extension-development-tutorial"
    },
    "dependencies": {
        "gulp": "^4.0.2"
    }
}

这很棒,可以减少我们对package.json的维护。

npm update package.json file

同时我们也看到,在src目录下,多了目录“node_modules”和”package-lock.json”。简单来说:

  • node_modules目录下主要存放通过npm下载的第三方类库。
  • package-lock.json用于npm对本地类库信息的维护。

在后面的过程中,我们会添加更多的类库,以满足我们开发的需要。

团队合作

在团队合作中,我们使用github。随着开发的进行,哪些文件该提交到github,哪些又不应该?这并没有一个定论。但我们又可以有迹可循。

在我们创建github项目的时候,gitignore我们选择了“None”。

这个时候,我们手工创建gitignore。

  • 对工程目录点击右键。
  • 选择“New File”。
  • 输入“.gitignore“
visual studio code create gitignore

首先我们选择对git”隐藏”node_modules目录。因为这个目录是npm维护的,我们不需要将这个目录下的所有类库都上传到github。

在.gitignore文件中输入第一行

src/node_modules
gitignore node_modules directory

同样,package-lock.json也是由npm维护的。

我们输入第二行

src/package-lock.json
gitignore package-lock.json file

如果我们为Visual Studio Code安装了git插件,可以看到node_modules目录和package-lock.json文件颜色变成了灰色。说明,这两个文件对git实现了“隐藏”。这是非常友好的一种提示功能,以验证我们想实现的“隐藏”。

随着项目的进行,我们会有更多我们想对git”隐藏“的文件。

结构的基本概念

想必看到这里,大家对这个工程的结构有了基本了解。那就是,我们在src目录中编写代码,然后使用gulpjs,将src中的代码,合并、混淆、清洁之后,输出到dist目录,最终,我们将dist目录中的代码及资源打包,并发布到Chrome Store。


以上,是我们在开发Chrome插件之前的准备工作。将这一段理解并规划清楚,将会减少工程重构的几率。我的结构并不是最完美的,你可以根据你的工作经验或者需求,来自定义工程结构。
下面,我们将进入Chrome插件开发的具体步骤。

Chrome插件开发教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注