SnipX Template

Chrome extension template, using React, Webpack, and Tailwind.

Table of Contents

1. Requirements
   
2. Installation
   
3. Manifest
   
4. Config
   
5. Development
   
6. Production
   
7. Resources
   
8. License

Requirements

So far, this template does not support Firefox, Safari, or any non chromium-based browsers.

• Node.js
• Compatible browsers:
  • Chrome
  • Edge
  • Brave - hasn't been tested
  • Opera - hasn't been tested

Installation

First, download the repo. If you have git installed run the following command or download a zip.

git clone https://github.com/arakilian0/snipx-template

Then, install dependencies.

cd snipx-template
npm install

Now you should have the code installed. Feel free to continue reading...

Manifest

The manifest.json file has been abstracted into package.json. It get's bundled in npm run dev and npm run build. You can also run it manually:

npm run build --manifest

Config

This template uses several paths throughout the application, that you can easily modify in package.json.

config.entry

• default: src
• dependant:
  • tailwind.config.js
  • lib/buildWebpack.js

config.assets

• default: assets
• dependant:
  • lib/buildWebpack.js

config.output

• default: build
• dependant:
  • lib/buildClean.js
  • lib/buildManifest.js
  • lib/buildWebpack.js
  • lib/buildZip.js

config.zip.output

• default: dist
• dependant:
  • lib/buildClean.js
  • lib/buildZip.js

config.zip.seperator

• default: -
• dependant:
  • lib/buildZip.js

Note: If you update 'config.entry', make sure to update 'nodemonConfig' for npm run dev to work properly.

// package.json

{
    ...,
    "nodemonConfig": {
        "ext": "js, jsx, json, css, html, svg",
        "watch": [
            "your-new-directory/**/*", // update this too...
            "package.json"
        ]
    },
    ...
}

Note: If you update the 'lib' directory name, make sure to update 'scripts'!

// package.json

{
    ...,
    "scripts": {
        "dev": "nodemon ./your-new-directory/build.js",
        "build": "node ./your-new-directory/build.js"
    },
    ...
}

Development

Live Reload

Use the following command to run the extension in development mode:

npm run dev

Build Scripts

The following command can be used to build the project files for a Chrome extension. The difference between build and dev is simply nodemon. You can refer to scripts in package.json or the code-block above.

npm run build

Optionally, you can pass arguments to the build command. Doing so will cancel the full build and will only run the arguments provided.

npm run build --clean

• script: lib/buildClean.js
• description: deletes output and zip.output directories

npm run build --manifest

• script: lib/buildManifest.js
• description: creates the manifest.json file

npm run build --webpack

• script: lib/buildWebpack.js
• description: bundles entry files into output

npm run build --zip

• script: lib/buildZip.js
• description: zip output directory into zip.output

Note: Running npm run build is the same as running npm run build --clean --manifest --webpack.

Note: Avoid using --zip with other arguments.

Try it out!

To test it, open Chrome:

1. Find Manage extensions
2. Enable Developer mode
3. Install using Load Unpacked
4. Load ./build directory

Production

To make sure webpack finishes before we zip it, first run the build command:

npm run build

Then zip it.

npm run build --zip

Now we have a zipped version of our build. In Chrome, after activating Developer mode we can load our extension using Load Unpacked referencing our ./build folder, or Load Packed using the generated zip file.

Resources

Chrome Extension Documentation - MV3

Webpack Documentation

React Documentation

Nodemon Documentation

Tailwind Documentation

License

MIT License

Copyright (c) 2023 Michael Arakilian

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.