Creating a Chrome extension using Yarn involves several steps, including setting up the project structure, writing necessary configuration files, and coding the extension itself. Below is a basic guide to help you build a Chrome extension using Yarn:

Table of Contents

Step 1: Set Up Project Structure

Initialize the project with Yarn:

bash

yarn init -y

Install necessary dependencies:

bash

yarn add webpack webpack-cli html-webpack-plugin copy-webpack-plugin
yarn add @babel/core @babel/preset-env babel-loader

Create the project structure:

arduino

my-chrome-extension/
├── public/
│ ├── manifest.json
│ ├── popup.html
├── src/
│ ├── background.js
│ ├── content.js
│ ├── popup.js
├── utils/
│ ├── helper.js
├── .gitignore
├── package.json
├── webpack.config.js

Step 2: Configure the Extension

manifest.json (in public folder):

json

{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0.0",
"description": "A basic Chrome extension",
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": [""],
"js": ["content.js"]
}
]
}

popup.html (in public folder):

html

Hello, Chrome Extension!

Step 3: Write Your Extension Code

background.js (in src folder):

javascript

console.log('Background script running');

chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed');
});

content.js (in src folder):

javascript

console.log('Content script running');

popup.js (in src folder):

javascript

document.addEventListener('DOMContentLoaded', () => {
console.log('Popup script running');
});

helper.js (in utils folder):

javascript

export function helperFunction() {
console.log('Helper function called');
}

Step 4: Configure Webpack

webpack.config.js:

javascript

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
entry: {
background: './src/background.js',
content: './src/content.js',
popup: './src/popup.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/popup.html',
filename: 'popup.html',
chunks: ['popup']
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'public/manifest.json', to: '' },
{ from: 'public/', to: '' }
]
})
]
};