Giter Club home page Giter Club logo

react-chrome-extension-boilerplate's Introduction

React Chrome Extension Boilerplate

Boilerplate for building Chrome Extensions in React and TypeScript using a simple Webpack build process.

Getting Started

  1. npm i to install dependancies
  2. npm start to start running the fast development mode Webpack build process that bundle files into the dist folder
  3. npm i --save-dev <package_name> to install new packages

Loading The Chrome Extension

  1. Open Chrome and navigate to chrome://extensions/
  2. Toggle on Developer mode in the top right corner
  3. Click Load unpacked
  4. Select the entire dist folder

Production Build

  1. npm run build to generate a minimized production build in the dist folder
  2. ZIP the entire dist folder (e.g. dist.zip)
  3. Publish the ZIP file on the Chrome Web Store Developer Dashboard!

Initial Steps

  1. git init to start a new git repo for tracking your changes, do an initial base commit with all the default files
  2. Update package.json, important fields include author, version, name and description
  3. Update manifest.json, important fields include version, name and description
  4. Update webpack.commmon.js, the title in the getHtmlPlugins function should be your extension name

Default Boilerplate Notes

  • Folders get flattened, static references to images from HTML do not need to be relative (i.e. icon.png instead of ../static/icon.png)
  • Importing local ts/tsx/css files should be relative, since Webpack will build a dependancy graph using these paths
  • Update the manifest file as per usual for chrome related permissions, references to files in here should also be flattened and not be relative

react-chrome-extension-boilerplate's People

Contributors

apply3d avatar jasonxian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

react-chrome-extension-boilerplate's Issues

DevTools failed to load source map - System error: net::ERR_BLOCKED_BY_CLIENT

Hey Jason,

Thanks for your response on Udemy. Unfortunately, I still cannot get rid of the error

DevTools failed to load source map: Could not load content for chrome-extension://ogempahklfajmmimbhmkffiajamoamaa/contentScript.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

when using the webpack development configuration.

I cloned your boilerplate repository (https://github.com/JasonXian/react-chrome-extension-boilerplate) freshly. I am using macOS 12.4 and Chrome Version 103.0.5060.114 (Official Build) (arm64) and Node.js v16.13.1. I deactivated all other extensions (uBlock origin etc.) as they might cause this error, started Chrome in the Incognito Mode to avoid any side effects with only the unpacked boilerplate extension loaded but still the error appears in the freshly cloned boilerplate for the contentScript.js

This makes using the dev configuration of the extension boilerplate unfortunately not usable. The production configurations works like a charm but of course without helpful source map errors.

Feel free to contact me to debug together in case it is not reproducible. I tested it on another machine with Windows as OS and had the same issue.

Would highly appreciate if you can have a look on it.

Best regards,
Simon

Screenshot 2022-07-12 at 15 35 10

Screenshot 2022-07-12 at 15 26 04

Screenshot 2022-07-12 at 15 36 36

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.