Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thundergolfer/fast-links

Painlessly embed references into your online comments and posts. #FB-Hack2017 :2nd_place_medal:
https://github.com/thundergolfer/fast-links

chrome-extension information-extraction productivity reddit

Last synced: 4 days ago
JSON representation

Painlessly embed references into your online comments and posts. #FB-Hack2017 :2nd_place_medal:

Host: GitHub
URL: https://github.com/thundergolfer/fast-links
Owner: thundergolfer
License: mit
Created: 2017-04-28T10:07:31.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2017-09-19T06:37:51.000Z (over 7 years ago)
Last Synced: 2024-12-12T20:52:34.013Z (11 days ago)
Topics: chrome-extension, information-extraction, productivity, reddit
Language: JavaScript
Homepage:
Size: 2.1 MB
Stars: 3
Watchers: 4
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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** :2nd_place_medal:. The team consisted of [Avrami](https://github.com/Hammer-Inc), [Apoorv](https://github.com/akan57), [Abdullah](https://github.com/AbdullahShabbir), and [myself](https://github.com/thundergolfer).

------

### 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.**##

![alt](/images/improved_two.png)
![alt](/images/improved_one.png)

-------

# Development Information

## Features

- Simple [React](https://github.com/facebook/react)/[Redux](https://github.com/rackt/redux) examples of Chrome Extension Window & Popup & Inject pages
- Hot reloading React/Redux (Using [Webpack](https://github.com/webpack/webpack) and [React Transform](https://github.com/gaearon/react-transform))
- Write code with ES2015+ syntax (Using [Babel](https://github.com/babel/babel))
- E2E tests of Window & Popup & Inject pages (Using [Chrome Driver](https://www.npmjs.com/package/chromedriver), [Selenium Webdriver](https://www.npmjs.com/package/selenium-webdriver))

## Examples

The example is edited from [Redux](https://github.com/rackt/redux) TodoMVC example.

#### Popup

![Popup](https://cloud.githubusercontent.com/assets/3001525/14128490/dc05e9f8-f653-11e5-9de6-82d1de01844a.gif)

The `todos` state will be saved to `chrome.storage.local`.

#### Window

![Window](https://cloud.githubusercontent.com/assets/3001525/14128489/da176b62-f653-11e5-9bff-fefc35232358.gif)

The context menu is created by [chrome/extension/background/contextMenus.js](chrome/extension/background/contextMenus.js).

#### Inject page

The inject script is being run by [chrome/extension/background/inject.js](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

```bash
# clone it
$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git

# Install dependencies
$ npm install
```

## Development

* Run script
```bash
# 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](https://developer.chrome.com/extensions/getstarted#unpacked) 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](https://github.com/zalmoxisus/redux-devtools-extension) on development mode.

### Build

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

### Compress

```bash
# 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](https://developer.chrome.com/extensions/autoupdate) for more information.

### Test

* `test/app`: React components, Redux actions & reducers tests
* `test/e2e`: E2E tests (use [chromedriver](https://www.npmjs.com/package/chromedriver), [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver))

```bash
# 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"](https://cloud.google.com/natural-language/docs/reference/libraries) was the article used to get the basics setup.

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