React Chrome Extension Boilerplate

A helping extension for the Phoros project.

This extension is destined to be an intuitive way from which the social media surfer can launch extraction from a specific entity in the social media.

Features

• Simple React/Redux examples of Chrome Extension Window & Popup & Inject pages
• Hot reloading React/Redux (Using Webpack and React Transform)
• Write code with ES2015+ syntax (Using Babel)
• E2E tests of Window & Popup & Inject pages (Using Chrome Driver, Selenium Webdriver)

Examples

The example is edited from Redux TodoMVC example.

Popup

The items state will be saved to chrome.storage.local.

Installation

# clone it

# the project used node.js v16.14.2

$ git clone https://github.com/OmarZOS/phoros-extension

# Install dependencies
$ npm install

Development

• Run script

# build files to './dev'
# start webpack development server
$ npm run dev

• If you're developing Inject page, please allow https://localhost:3000 connections. (Because injectpage injected GitHub (https) pages, so webpack server procotol must be https.)
• Load unpacked extensions with ./dev folder.

React/Redux hot reload

This boilerplate uses Webpack and react-transform, and use Redux. You can hot reload by editing related files of Popup & Window & Inject page.

Using Redux DevTools Extension

You can use redux-devtools-extension on development mode.

Build

# build files to './build'
$ npm run build

Compress

# compress build folder to {manifest.name}.zip and crx
$ npm run build
$ npm run compress -- [options]

Options

If you want to build crx file (auto update), please provide options, and add update.xml file url in [manifest.json](https://developer.chrome.com/extensions/autoupdate#update_url manifest.json).

• --app-id: your extension id (can be get it when you first release extension)
• --key: your private key path (default: './key.pem')
  you can use npm run compress-keygen to generate private key ./key.pem
• --codebase: your crx file url

See autoupdate guide for more information.

Test

• test/app: React components, Redux actions & reducers tests
• test/e2e: E2E tests (use chromedriver, selenium-webdriver)

# lint
$ npm run lint
# test/app
$ npm test
$ npm test -- --watch  # watch files
# test/e2e
$ npm run build
$ npm run test-e2e

Progress:

• Popup.
  • Twitter.
• Persistence.
  • Local storage.
  • Getting stored data.
• Current code consistency.
  • Establishing connection with the phoros proxy.
  • Building query to phoros proxy.
  • Listening to results.

LICENSE

MIT