Chrome extension using reactJs
reactjsnextjsjavascriptchromeChrome Extension
What is a chrome extension ?

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

What actions does extensions do?

Extension either do page actions or browser actions. But they can't do both at once.

Page actions : Is specific to certain pages. You will usually see a UI added in the google chrome’s address bar .

Browser actions : These actions are not specific to a page . They can run in background also.

For this tutorial we will keep it simple and build a New Tab extension . more documentation can be found on chrome developers.

What are we building ?

For this tutorial we will build basic motivational new tab where u can display your To-Do's and Notes

What files Do you need?

—- index.html

—- manifest.json

—- icon.png


All the properties of a chrome app are defined in manifest file .

below is the sample file representation

"manifest_version": 2,
"version": "1.0",
"name": "Daily tab",
"description": " A simple todo and notes productivity app",
"author": "Achuth Hadnoor",
"chrome_url_overrides": {
"newtab": "index.html"
"browser_action": {
"default_icon": "splash.png"
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="manifest.json" />
<title>Quote of the day</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
sample body


chrome.browserAction.onClicked.addListener(function () {
chrome.tabs.create({ url: 'chrome://newtab' });