2020 Latest Chrome Extension Development Guide

Chrome extension development is now very easy to learn. But there are very few very complete tutorials that can lead to beginners. In this tutorial, we will lead beginners to learn step by step how to start a Chrome extension development.

Today, Google Chrome has about 70% of the browser market. With such huge users and traffic, we can develop some applications that belong to us on the basis of Chrome and can help users, which will be a huge asset.

Indeed, the Chrome Store can see many applications. You can see many unexpected apps in the Chrome Store. If the other developers can build the awesome Chrome apps, why can’t we?

Preparation before Chrome Extension Development

Javascript is the core language for Chrome Extension Development

Before developing a Chrome extension, you must first understand Javascript.

Javascript is the most commonly used scripting language in browsers. In our example extension, we will make extensive use of Javascript. We are not doing too much interpretation of Javascript here, so as not to cause trouble to beginners.

We will write in this example extension, combined with Jquery framework. If you want to know more about Jquery, please click here. Jquery is the most library for me to operate DOM since 10 years ago.

Bootstrap

Bootstrap is one of the more popular frameworks used in the front end. We will also use Bootstrap in the Chrome sample extension. If you prefer other HTML and CSS frameworks, you can also choose.

Fontawesome

Frontawesome is an icon framework that is widely used in the front end. In the Chrome sample extension, we will use Fontawesome. You can use the icon library as you want.

gulpjs

gulpjs is currently a widely used Javascript development tool that can stitch and compress Html, CSS, and Javascript files. If you have n’t heard of it, hurry up and find out.

handlebarsjs

Maybe you haven’t heard of handlebarsjs, this is a template tool based on Javascript, go and understand it, definitely not to be missed.

What is the use? It ’s better to look here first, you probably know.

A good combination, so that we can compress Html template files through gulpjs.

NodeJS & NPM

In the Chrome sample extension, we will make heavy use of the code in the NPM repository. It’s such a happy thing without having to reinvent the wheel. Want to learn more about NodeJS? Or learn about it through specific projects in the future.

Yii2 Framework

How can something like PHP appear here? If your Chrome extension requires user registration, OAuth2 authorization, storage of user data, etc., then essential support from the server is required. Yii2 is a good choice for you to quickly build a server. Prefer other frameworks? Laravel? Codeigniter? You like it.

XAMPP

XAMPP is a free Apache + MariaDB + PHP + Perl local test environment, what are you waiting for? I personally use XAMPP on Windows and MAMP Pro on Mac OS. Of course, MAMP Pro is not free.

Github

If you do n’t know what Github is, go check it out. No matter what type of project development you do, you need a code repository. Nothing in the world is better than Github.

And Github is free.

Code editor

If you don’t know which editor to use, please look at the best code editor in 2020. There is always a code editor for you.


Everything is ready, we will bring you the specific steps of Chrome extension development.

I can’t bear the urge to develop Chrome extension applications.? First look at the official chrome extension development documentation.

By the way, don’t forget to install Chrome before we go.

Chrome Extension Development Guide

Leave a Comment

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