Brackets is a template for creating chrome extensions. It uses webpack to support frontend frameworks and other libraries. It also uses Tailwind CSS 3 (through webpack/postcss) for its CSS framework and works out of the box.
- Node.js (Check .node-version for version)
All the work will be done in the src folder. The src folder will then be
compiled to the extension folder.
- Install packages:
npm install - Run the build:
npm run-script dev. This will watch thesrcfolder for changes and compile intoextension - In chrome://extensions, click "Load unpacked" and select the
extensionfolder
If you want to use react in the chrome extension popup do the following after cloning:
- Add the react and react-dom packages:
npm install --save-dev react react-dom - Add the webpack plugins to support JSX compilation:
npm install -D babel-loader @babel/preset-env @babel/preset-react @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-class-properties babel-plugin-transform-react-remove-prop-types @babel/plugin-transform-react-inline-elements @babel/plugin-transform-react-constant-elements
- Modify
webpack.config.jsand add line to support JSX
...
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
},
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-react'],
+ },
+ },
+ },
}
...
- Create a file
src/app.jsx
import React from 'react';
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>Brackets + React</h1>
<h2>{count}</h2>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</>
);
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);
- Modify
src/popup.jswith
import './popup.css';
+ import './app.jsx';
console.log('[CONTENTSCRIPT] Popup opened');
- Modify
src/popup.htmlwith
...
<body>
+ <div id="root">
+ </div>
<script src="popup.js"></script>
</body>
...
- Run the build:
npm run-script dev. This will watch thesrcfolder for changes and compile intoextension - In chrome://extensions, click "Load unpacked" and select the
extensionfolder
- Make sure to uncomment
purge: trueintailwind.config.js - Zip the extensions folder
- Upload chrome extension store