Chrome Extension Starter

A starter kit for Chrome Extensions.

Setup

Rebranding

Copy this project into a new folder and modify the following:

package.json - name, description, repository, homepage, bugs, author
src/manifest.json - name
src/img/* - Change these to your branding

Developing

npm install
Run npm start
Load the extension on Chrome following:
Access chrome://extensions/
Check Developer mode
Click on Load unpacked extension
Select the build folder.
Extension will auto reload anytime webpack finishing compiling.
Rejoice!

Change the Port

npm start starts a webpack server to auto reload code as it is saved.

You can run the server on another port if you want. Just specify the env var port like this:

$ PORT=6002 npm start

or on Windows cmd:

$ set PORT=6002 npm start

Note: The content scripts are excluded from hot reloading because they cannot connect to the local dev server since they run on different domains.

Scripts

prebuild: creates the /builds directory
build: uses webpack to create the extension in /build
postbuild: zips the build into /builds
start: runs the dev server for hot reloading extension
format: uses prettier to reformat the code
lint: runs eslint on the code
lint-fix: fixes any minor issues that eslint knows how to fix
postversion: executes the build after an increase in the npm version

Hooks

Githooks are managed using husky and are located in package.json

pre-commit - runs pretty-quick which runs prettier, an opinionated js formatter to help keep the code consistent
pre-push - runs eslint which has some additional validation of formatting and best practices to help keep the code clean.

Packing

To create the compiled extension for distribution run:

$ npm run build

A new zip named $npm_package_name-$npm_version.zip will be created in /builds. This zip is ready to be submitted to the Chrome Web Store. Take a look at the official guide to more information about publishing.

What is going on where?

/src
- /background
  - /index.js - Runs the background processes and can be inspected from the chrome://extensions/ page
  - /*.js - Each background script should generally have 1 set of functionality. For example open_options_page.js opens the options page on extension update or installation.
- /content-script
  - /index.js - Runs code on the current tab.
  - /*.js - Each content-script should generally have 1 set of functionality. For example console_notify.js just logs information to the console on each page.
- /img/* - This is a home for any images shared by the manifest.json, background, content-scripts, popup, and options.
- /util/*.js - This is a home for any utility scripts you may build that need to be shared across background, content-scripts, popup, and options.
- /view
  - components/*.js - This is a home for the React components used by popup and options pages.
  - popup/*.[html|js|scss] - Runs when you click on the extension icon, and be inspected by right clicking on the popup.
  - options/*.[html|js|scss] - Displays when you right click on the extension icon and select Options.
- manifest.json - Configuration information for the extension. Manifest Format
/utils - helpers scripts for configuring builds
/webpack - Webpack configurations

Included Packages

This starter includes some default packages that always seem to be useful.

axios - Promised based HTTP Client
Bootstrap 3 and React-Bootstrap - Once react-bootstrap fully supports bootstrap 4 we will migrate to that as the default.
chrome-extension-async - Promised based wrapper for built in chrome functions (normally callback style). You can mix and match between the normal and promise.
jquery - Often used in content-scripts to manipulate the DOM of the current tab.
Lodash - useful utilities for common js problems.
Moment.js - date and time validation, parsing and manipulation.
React - Latest framework that fits our needs.

Special Thanks

Thanks to Chrome Extension Webpack Boilerplate w/React!

Built by Apsis

chrome_extension_starter was built by Apsis Labs. We love sharing what we build! Check out our other libraries on Github, and if you like our work you can hire us to build your vision.

dwelch2344 / gpt_emailer