Creating a Chrome Extension with React

Photo by Ardi Evans on Unsplash

TL;DR

React Related Details:

yarn add react-bootstrap bootstrap@5.1.3
import { InputGroup, FormControl, Button } from 'react-bootstrap';
yarn add react-toastify
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendar, faEnvelope } from '@fortawesome/free-solid-svg-icons';
import { faSmile } from '@fortawesome/free-regular-svg-icons';
...<FontAwesomeIcon icon={faSmile} />
yarn add react-i18next i18next
import { useTranslation } from 'react-i18next';...
const { t } = useTranslation();
...
<span className="me-1">
{t('WELCOME')}{' '}
{props.authedUser.name
? props.authedUser.name
: props.authedUser.client_id}
</span>
yarn add linkifyjs linkify-react
import Linkify from 'linkify-react';...const linkProps = {
onClick: (event) => {
chrome.tabs.create({
url: event.target.href
});
}
};
...<Linkify options={{ attributes: linkProps }}>
{event.location}
</Linkify>
yarn add env-cmd
"build:i": "env-cmd -f ./environments/.env.individual npm run-script build",
"build:e": "env-cmd -f ./environments/.env.enterprise npm run-script build"
yarn add axios
import axios from 'axios';
import i18n from 'i18next';
import UtilsService from '../services/UtilsService';
import { logout } from '../actions/authedUser';
import { useDispatch } from 'react-redux';
const createErrorMessage = (error) => {
let errorCode = error?.error?.message;
if (errorCode && i18n.exists(errorCode)) {
return i18n.t(errorCode);
} else {
return error.error.message;
}
};
const API_CONFIG = axios.create({
baseURL: process.env.REACT_APP_GATEWAY_API_URL
});
API_CONFIG.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
return new Promise((resolve, reject) => {
UtilsService.saveToLocalStorage('ym@user', null)
.then((response) => {
useDispatch(logout());
resolve(response);
})
.catch((error) => {
// console.log(error);
reject(error);
});
});
} else {
error.response.message = createErrorMessage(error.response);
return Promise.reject(error);
}
}
);
export { API_CONFIG };
yarn add redux react-redux
yarn add redux-thunk
yarn add moment
import moment from 'moment/moment.js';
import 'moment/locale/tr';
...<div>{moment(new Date()).format('DD-MM-YYYY dddd')}</div>

Chrome Related Details

{
"name": "My Extension",
"description": "My Extension",
"version": "1.0",
"manifest_version": 3,
"keywords": ["react", "browser extension", "chrome extension"],
"permissions": [
"http://api.yoursite.com/*",
"storage",
"notifications",
"alarms"
],
"action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "logo-minimized.png",
"48": "logo-minimized.png",
"128": "logo-minimized.png"
}
}
static saveToLocalStorage = (key, value) => {
return new Promise((resolve, reject) => {
var obj = {};
obj[key] = value;
chrome.storage.sync.set(obj, () => {
resolve(value);
});
});
};
static getFromLocalStorage = (key) => {
return new Promise((resolve, reject) => {
chrome.storage.sync.get(key, (data) => {
if (data) {
resolve(data);
} else {
reject();
}
});
});
};
chrome.storage.sync.set({
'ym@user': JSON.stringify(response.data),
'ym@view': 'inbox'
}, () => {
...
chrome.storage.sync.get(['ym@user', 'ym@view'], (data) => {
...
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
"background": {
"service_worker": "background.js"
},
"background": {    
"scripts": ["background.js"],
"persistent": false
}
const handleRouteToUrl = () => {
let yourUrl = "www.your_url_will_go_here.com"
chrome.tabs.create(
{
url: yourUrl
}, function (tab) {
...
}
);
};
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request && request.type === 'REFRESH_UNREAD_COUNT_BADGE') {
sendResponse({ count: `${inbox[0].unread}` });
}
});
chrome.runtime.sendMessage(
{ type: 'REFRESH_UNREAD_COUNT_BADGE' },
(response) => {
if (response) chrome.action.setBadgeText({ text: response.count });
}
);
chrome.notifications.create('123', {
type: 'basic',
iconUrl: 'path',
title: 'notification title',
message: 'notification message',
priority: 2
});

Local Installation

Chrome Browser — Developer Mode

--

--

--

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

REST APIs Test Using Axios and Nock

JavaScript for Intermediate

JavaScript: Special Numbers

How to handle asynchronous For loop in JavaScript

Whats New Angular 11

Building the init command of create-react-app from scratch

The way to build a REST API with koa.js

What’s new in Vue3?

https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nil Seri

Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨

More from Medium

Best Practices for Writing React Components

React Router DOM v6 — Part — I

How to test React Apps?

React Tutorial — Learn React in 5 hours — Part 5