Chrome Extension Development Tutorial – Part 1 – Project Structure

The Chrome extension development tutorial, we will try to explain it easily for our readers.

Following the latest Chrome extension development guide, we will begin a new journey.

In this blog, we will start a real project to learn how to develop a Chrome extension with you.

Before reading this blog post, I believe you have done some simple understanding of the techniques mentioned in the previous blog post. If this is the first time you are exposed to these technologies, you don’t know much about them. This does not prevent you from continuing to learn how to develop a Chrome extension.

When I develop a Chrome extension, I will follow the steps below:

Create a project

Open Github Desktop, yes! yes! Github. We always store our code somewhere, and Github is the perfect repository.

If you don’t know GitHub Desktop, please click here to learn and download.

  • After opening GitHub Desktop, please log in to your Github account first.
  • After logging in, click “File”.
Chrome Extension Development Tutorial - create repository
  • Create a new GitHub repository
  • Click “New Repository”.
  • Give your project a name. Here, we take “chrome-extension-development-tutorial”. It’s a bit long, right? You can name it the way you like and the length.
  • Add a description to your project. We fill in “This is a chrome extension development tutorial for beginners.”
  • Select the local storage path of the project. If you reduce, our settings are: “/Users/***/Documents/GitHub/bruce-lab”
  • Select “Initialize this repository with a README”.
  • In “Git Ignore”, we choose “None”. There are many choices, but Node is the closest to our project. Of course, you can also choose “None”. Add create .gitignore file later.
  • In “License”, we choose “None”. You can also select “None” and add it after detailing the differences between the various licenses.
  • After all of these are completed, click “Create Repository”.
  • Click “Publish repository”. This will submit the project to Github.
Chrome Extension Development Tutorial - publish repository
  • Here we dis-select “Keep this code private”. Of course, you can set your code to Private. Github currently does not charge for private code repositories.
Chrome Extension Development Tutorial - publish repository make it public
  • Click “Publish Repository”.
Chrome Extension Development Tutorial - publish repository finished


So far, everything is fine.

If you have installed Visual Studio Code, you can directly click “Open in Visual Studio Code” in Github Desktop.

Let’s check it on Github.

  • Open https://github.com/.
  • Let’s see what happened. You can see the project we just created.
  • Click inside to see.
  • Wow, everything is perfect. It is indeed the project we created.
Chrome Extension Development Tutorial - login github
Chrome Extension Development Tutorial - check github respository

Back to our subject, engineering structure.

After the code repository is ready, let’s take a look at how to create a Chrome extension development project.

Developing code file and Publishing code file

First we need an “src” folder. In the “src” folder, we store the code we developed and used.

In addition, we also need a “dist” or “build” folder to store the released code and resource files. Please choose the folder to publish the code according to your preferences. Choose either “dist” or “build”.

Let’s get started, create folders “src” and “dist”.

package.json

When we use npm, we can use package.json to make some conventions for our project.

You can use the “npm init” command to create, or manually create a package.json file.

Chrome Extension Development Tutorial - create package.json

Basic Settings

{
    "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"
    }
}

Use third-party library

In our project, we will use gulpjs.

In Visual Studio Code, right-click the “src” folder and select “Open In Terminal”.

In the “terminal” window, enter “npm install gulp –verbose”, and then press Enter.

I will use –verbose after the command to locate when an error occurs.

Chrome Extension Development Tutorial - npm install gulp

After the command is executed, npm has updated the 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"
    }
}


This is great and can reduce our maintenance of package.json.

Chrome Extension Development Tutorial - npm install gulp finished


At the same time, we also see that in the src directory, there are more directories “node_modules” and “package-lock.json”. simply put:

  • The node_modules directory mainly stores third-party libraries downloaded through npm.
  • package-lock.json is used by npm to maintain local library information.

In the following chrome extension development process, we will add more libraries to meet the needs of our development.

Teamwork

For teamwork, we use github. As the development progresses, which files should be submitted to github and which should not? There is no one conclusion. But we can follow the trail.

When we created the github project, gitignore we chose “None”.

At this time, we manually create gitignore.

  • Right click on the project directory.
  • Select “New File”.
  • Type “.gitignore”
Chrome Extension Development Tutorial - create gitignore

First we choose to “hide” the node_modules directory from git. Because this directory is maintained by npm, we do not need to upload all the libraries under this directory to github.

Enter the first line in the .gitignore file

src/node_modules
Chrome Extension Development Tutorial - gitignore - node_modules

Similarly, package-lock.json is also maintained by npm.

Enter the second line

src/package-lock.json
Chrome Extension Development Tutorial - gitignore - node_modules package-lock.json


If we install the git plugin for Visual Studio Code, we can see that the node_modules directory and the package-lock.json file become gray. Note that these two files are “hidden” from git. This is a very friendly reminder function to verify the “hidden” we want to achieve.

As the project progresses, we will have more files that we want to “hide” from git.

Basic Concepts of Structure

Now everyone has a basic understanding of the structure of this project. That is, we write the code in the src directory, and then use gulpjs to merge, obfuscate, and clean the code in the src to the dist directory. Finally, we package the code and resources in the dist directory and publish it to Chrome Store.


The above is the preparation work before we develop the Chrome extension. Understanding and planning this paragraph clearly will reduce the chance of engineering reconstruction. This project structure is not perfect. You can customize the project structure based on your work experience or needs.
We will dive into the specific steps of Chrome extension development.

Leave a Comment

Your email address will not be published. Required fields are marked *