acesmndr / chrome-extension-boilerplate-riot

A boilerplate chrome extension (Single Page Application) using RIOT.js

Riot Chrome Extension Boilerplate

A boilerplate for a single page extension/application using Riot.js framework v4 as MVP and webpack as the module bundler. It is created to solve all the problems that we face while building a chrome extension.

Features

• Single page application with a lightweight framework
• A simple working todo app is included
• All asynchronous tasks in the UI are delegated to the background so that they aren't lost when the popup is closed
• Communication between background and popup has been simplified

Screenshots

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

What things you need to install the software and how to install them

• Node
• Yarn

Installing

To get the extension built the following simple steps need to be followed. Please make sure that Node and Yarn are installed in your machine. If yarn is not installed then install it by using the below command:

macOS

brew install yarn

Windows

1. Download installer from https://yarnpkg.com/lang/en/docs/install/
2. Install yarn using installer
3. Restart command line if necessary

Clone this repository

git clone [email protected]:acesmndr/riot-chrome-extension-boilerplate.git
cd riot-chrome-extension-boilerplate

then install the project dependencies

yarn install

Building the extension

It supports cross platform development.

yarn build:[development/staging/production]
// eg: yarn build:development

It builds the extension files in the folder for the environment you passed as well as builds the crx extension in the build folder. In development builds webpack keeps watching over the files and rebuilds if any changes are made.

Loading the extension

There are two ways you can achieve this. Either you can load the unpacked extension or load the packed crx extension.

• Loading unpacked Extension

  • Go to chrome://extensions page
  • Click load unpacked extension
  • Browse to the desired environment[staging/stagingnxt/production] folder

• Loading crx file

  • Go to chrome://extensions page
  • Drag and drop the extension crx file from the build folder

Maintaining changelog

A changelog has been maintained to keep track of all the changes made in the extension along with semantic versioning

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Upgrading the extension

Run the following command to check the current version of the extension

yarn version:show

Then to upgrade the version along with a changelog run the following command

CHANGELOG="Changes made in the extension" VERSION="5.0.0" yarn version:upgrade

Built With

• Riot v4 - Frontend MVP Framework
• Webpack - Module Bundler
• Yarn - The package manager
• Material Design - Design Principles

Note

This uses v4 version of Riot.js which is a complete rewrite over Riot v3. If you prefer to use Riot.js v3 you could use v3 version of chrome-extension-boilerplate-riot

Maintained by

• Aashish Manandhar(acesmndr)

Special Thanks

• Tamas G. Toth for updating the riot-jest-transformer to support registration of scss precompiler.

chrome-extension-boilerplate-riot's Issues

Update to Riot v4

With Riot.js 4 you will get all the following new features out of the box:

• Precise source maps
• Content Security Policy support
• True pure Javascript expressions
• <slot>s instead of <yield>s
• Better compatibility with other languages like Typescript
• Modern browsers support (NO internet explorer)
• Components as Javascript modules
• 5x performance boost
• Stabler SSR + HTML hydration
• 6kb Library size

Old components will not work in Riot.js 4 thus required a complete rewrite.

Riot.js 4 aims to be the tiniest, simplest and yet most predictable framework for web components. It is designed to offer you everything you wished the native web components API looked like.