[DeepDive] Boilerplates/Generators (web app, chrome extension, npm package, etc), npm packages, create-react-app templates, etc

[0xdevalias]

yarn

• https://legacy.yarnpkg.com/lang/en/docs/creating-a-package/
• https://legacy.yarnpkg.com/lang/en/docs/cli/create/

  • This command is a shorthand that helps you do two things at once: Install create-<starter-kit-package> globally, or update the package to the latest version if it already exists; Run the executable located in the bin field of the starter kit’s package.json, forwarding any <args> to it

  • https://legacy.yarnpkg.com/blog/2017/05/12/introducing-yarn/

create-react-app

• https://create-react-app.dev/
• https://create-react-app.dev/docs/custom-templates/

  • Custom Templates enable you to select a template to create your project from, while still retaining all of the features of Create React App.

  • https://github.com/facebook/create-react-app/tree/master/packages/cra-template
  • https://www.npmjs.com/search?q=cra-template-*

webpack

• https://webpack.js.org/starter-kits/

yeoman

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.

• https://yeoman.io/
  • https://yeoman.io/generators/
  • https://github.com/react-webpack-generators/generator-react-webpack
• https://github.com/yeoman/yo

  • CLI tool for running Yeoman generators

Chrome Extensions, Browser Extensions, etc

• https://developer.chrome.com/extensions

  • Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

  • https://developer.chrome.com/extensions/getstarted
  • https://developer.chrome.com/extensions/overview
  • https://developer.chrome.com/extensions/devguide
• https://github.com/Rob--W/crxviewer

  • Add-on / web app to view the source code of Chrome / Firefox / Opera 15 extensions and zip files.

  • https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin

Blogs, Articles, etc

• https://css-tricks.com/how-to-build-a-chrome-extension/
• https://thoughtbot.com/blog/how-to-make-a-chrome-extension
• https://levelup.gitconnected.com/how-to-use-react-js-to-create-chrome-extension-in-5-minutes-2ddb11899815
• https://levelup.gitconnected.com/how-to-use-background-script-to-fetch-data-in-chrome-extension-ef9d7f69625d

WebExtensions

• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

  • Extensions, or add-ons, can modify and enhance the capability of a browser. Extensions for Firefox are built using the WebExtensions API cross-browser technology.

  • The technology for extensions in Firefox is, to a large extent, compatible with the extension API supported by Chromium-based browsers (such as Google Chrome, Microsoft Edge, Opera, Vivaldi). In most cases, extensions written for Chromium-based browsers run in Firefox with just a few changes.

• https://github.com/fregante/Awesome-WebExtensions

  • A curated list of awesome resources for WebExtensions development

  • WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes.

  • https://github.com/fregante/webext-options-sync

  • Helps you manage and autosave your extension's options. Chrome and Firefox.

  • https://github.com/ivantsov/redux-webext

  • Redux for WebExtensions

  • https://github.com/DrewML/chrome-webstore-upload

  • A small node.js module to upload/publish Chrome Extensions.

  • https://github.com/DrewML/chrome-webstore-upload-cli

  • Upload/Publish Chrome Web Store extensions from the CLI

  • https://github.com/LinusU/wext-shipit

  • Automate the process of shipping Web Extensions for Chrome, Firefox, Safari, Opera and Edge

Generators, templates, etc

Good modern looking choices:

• https://github.com/notlmn/browser-extension-template

  • Barebones boilerplate with webpack, options handler and auto-publishing

• https://levelup.gitconnected.com/how-to-build-a-rich-chrome-extension-quickly-with-create-react-app-and-redux-d9b64cf64832
  • https://github.com/hindmost/cra-template-complex-browserext-typescript

  • A Create React App/TypeScript template for bootstrapping complex Chrome/Firefox/(any Chromium-based browser) extensions

  • https://github.com/hindmost/cra-template-complex-browserext

  • A Create React App template for bootstrapping complex Chrome/Firefox/(any Chromium-based browser) extensions

• https://github.com/martellaj/chrome-extension-react-typescript-boilerplate

  • This project is a boilerplate project to allow you to quickly build chrome extensions using TypeScript and React.

• https://github.com/VasilyShelkov/create-react-extension

  • Create React browser extensions with no build configuration.

  • This is a fork of create-react-app to make creating Browser Extensions in React more accessible and following Create-React-App's(CRA) philosophy, especially convention over configuration.

• https://extensionizr.com/

  • Extensionizr helps you create the basis for your own awesome chrome extension!

Unsorted other choices:

• https://github.com/EmailThis/extension-boilerplate

  • A foundation for creating browser extensions for Chrome, Opera & Firefox.

• https://github.com/JithinAntony4/generate-chrome-extension

  • Easily create Google Chrome Extensions using the latest version of React.

  • The following scenarios/options are supported: Popup, New Tab, Options, Background Page, Content Page

• https://github.com/rpl/create-webextension

  • This npm package provides a CLI utility to create a new simple (and mostly blank) WebExtension with only one command.

• https://github.com/yeoman/generator-chrome-extension

  • Chrome Extension generator that creates everything you need to get started with extension development. You can choose Browser UI(Browser,Page Action, Omnibox) type and select into permissions what you need.

  • Seems to use Gulp/etc.. so might be a bit dated.
• https://github.com/salsita/chrome-extension-skeleton

  • Minimal skeleton for Chrome extension; includes awesome messaging module, webpack-based build system, full ES6 support with Babel 6, linting using eslint with airbnb configuration, use node.js libraries, unit-tests in mocha, CircleCI friendly

  • https://github.com/salsita/chrome-extension-skeleton/blob/master/src/js/modules/msg.js
• https://stackoverflow.com/questions/62186043/how-to-set-up-a-chrome-extension-using-react-and-typescript-with-multiple-pages
  • https://github.com/marlonguimaraes/ts-react-chrome-extension

  • Quickly build a chrome extension using React and TypeScript

See also:

• https://github.com/search?q=chrome+extension+template
• https://github.com/search?q=chrome+extension+boilerplate
• https://github.com/search?q=chrome+extension+skeleton
• https://github.com/search?q=chrome+extension+scaffold
• https://github.com/search?q=chrome+extension+bootstrap
• https://github.com/search?q=chrome+extension+generator

Unsorted

• https://github.com/lerna/lerna

  • A tool for managing JavaScript projects with multiple packages.