Fast Linking - Google Chrome Extension

Painlessly embed references into your online comments and posts

---

Facebook Hackathon 2017:

This project was worked on during a 24 hour Facebook regional hackathon and earned 2nd Place 🥈. The team consisted of Avrami, Apoorv, Abdullah, and myself.

---

Idea

• Improve social comments on various social platforms such as Facebook or Reddit by decorating user comments with links and citations.

• 510,000 messages sent per minute

• 4.75 billion pieces of contact shared per day.##

---

Development Information

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 todos state will be saved to chrome.storage.local.

Window

The context menu is created by chrome/extension/background/contextMenus.js.

Inject page

The inject script is being run by chrome/extension/background/inject.js. A simple example will be inject bottom of page(https://github.com/*) if you visit.

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/jhen0409/react-chrome-extension-boilerplate.git

# 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

Google Cloud NLP API

Interaction with the GCloud NLP API is handled through the Node.js Client. The GCloud project is a fast-links-extension project in my GCloud account. "Cloud Natural Language API Client" was the article used to get the basics setup.

app/utils/entity_recognition.js currently houses the NLP code.