• Post category:StudyBullet-3
  • Reading time:7 mins read


Build Chrome Extensions from scratch step by step

What you will learn

 

Build Google Chrome Extensions

 

Learn about different components of a chrome extension

 

Load extensions into chrome extensions management page

 

Create background scripts

 

Add user interface to extensions

 

Add css to extensions

 

Add options page to extensions

 

Add logic to extensions using JavaScript

 

Create a zipped file for extension directory

 

Setup chrome web store developer account

 


Get Instant Notification of New Courses on our Telegram channel.


Setup Google 2 step verification

 

Upload and publish extension

Description

Extensions are small software programs that customize the browsing experience. They let users tailor Chrome functionality and behaviour in many ways, providing things like:

  • Productivity tools
  • Web page content enrichment
  • Information aggregation
  • Fun and games

Extensions are made of different, but cohesive, components. Components can include background scripts, content scripts, an options page, UI elements and various logic files. Extension components are created with web development technologies: HTML, CSS, and JavaScript. An extension’s components will depend on its functionality and may not require every option.

Extensions are built on web technologies such as HTML, JavaScript, and CSS. They run in a separate, sandboxed execution environment and interact with the Chrome browser.

Extensions let you “extend” the browser by using APIs to modify browser behaviour and access web content. Extensions operate by means of an end-user UI and a developer API

An extension must fulfil a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose. User interfaces should be minimal and have intent.

Most Chrome users get extensions from the Chrome Web Store. Developers across the globe publish their extensions in the Chrome Web Store where they are reviewed and made available to end users.

Some organizations use enterprise policies to install extensions on their user’s devices. These extensions may either be fetched from the Chrome Web Store or hosted on the organization’s web servers.

You can distribute your extensions through the Chrome Developer Dashboard, publishing them to the Chrome Web Store.

English
language

Content

Introduction
Introduction
What are Google Chrome Extensions
Chrome Extension Components
Technologies used to create Chrome extensions
Creating a project directory
Building a Chrome Extension
What we will build
Creating a manifest file
Loading extension directory into chrome
Creating a background script
Inspecting the background script
Adding a user interface
Adding CSS to button element
Adding icons to extension
Adding color to extension button
Adding layer logic
Testing the extension
Giving users Options
Creating Options logic: Part 1
Creating Options logic: Part 2
Building a clock and date extension
What we will build
Creating project directory and manifest file
Loading extension directory into chrome
Creating the interface
Styling the interface
Adding Icons
Adding logic: Part 1
Adding logic: Part 2
Testing the extension
Debugging extensions
Publishing Extensions
Required Steps
Creating a zipped file for extension’s directory
Create and setup developer account
Setup Google 2 step verification
Upload your extension