FrankenStyle

A chrome extension that makes CSS easier and more fun! Style your webpages the way you want without the hassle of coding CSS because we do it for you!

Made by Jeff Hatcher, Mark Lopez, Sam Alsmadi, Vesna Tan

Features

• Style any webpage's CSS to your own preferences
• Downloadable CSS file (coming soon)
• Make notes on the webpage and take a screenshot
• Save your profile(coming soon)

Technologies

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

Sidebar/Inject page

The sidebar menu is created by injecting an iframe into the the HTML page you visit.

The inject script is being run by chrome/extension/background/inject.js.

If you are receiving the error message Failed to load resource: net::ERR_INSECURE_RESPONSE, you need to allow invalid certificates for resources loaded from localhost. You can do this by visiting the following URL: chrome://flags/#allow-insecure-localhost and enabling Allow invalid certificates for resources loaded from localhost.

Installation

# clone it
$ git clone https://github.com/FrankenStyle/franken-style-new

# 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 (https) pages, so webpack server procotol must be https.)
• Load unpacked extensions with ./dev folder.

React/Redux hot reload

This extension uses Webpack, react-transform, and 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

Credits

React-Chrome-Extension-Boilerplate by jhen0409

LICENSE

MIT