Save To Pocket Extension

Introduction

Save to Pocket is a browser extension that is used to save pages to a connected Pocket account when clicking a toolbar button, selecting a context menu item, or pressing keyboard shortcut. When a page is saved, a “Page Saved!” notification appears and offers additional actions, including:

• Add Tags (with support for Suggested Tags for Pocket Premium subscribers)
• Archive Page
• Remove Page
• View List
• Settings

Save to Pocket also includes article Recommendations. These recommendations are displayed below the “Page Saved!” notification and are related to the item that was just saved.

In addition, when the extension is installed, Save buttons will be injected on Twitter, Hacker News, and Reddit so links posted to these sites can be saved in one click.

About this Repository

This is the skeleton structure for the Save to Pocket extension codebase.

It leverages an external build script (to be moved to an official repo) to keep things simple when working with the operational code.

At this time it is set up to use the following:

• React
• Redux
• Jest for testing
• Eslint for JS linting
• Babel for ES6/7
• Stylelint for Style linting
• SASS
• CSS modules
• Webpack for compiling

Conventions

React

React is a view library developed by Facebook to create declarative, component based UI. It will automatically update the UI based on the state of the application using a virtual dom.

Redux

Redux is a library used to create a predictable state container.

React-Chrome-Redux

React Chrome Redux allows us to build react/redux seamlessly with the background messaging convention in extensions. The background page holds the Redux store, while Popovers and Content-Scripts act as UI Components, passing actions and state updates between themselves and the background store.

Getting Started

High level steps

1. Prepare your project
2. Install dependencies
3. Create a development/production build
4. Load the extension into your browser

---

Setup

Before you get started you will need to do the following:

1. Register an API key from https://getpocket.com/developer/
2. Create a keys.json file in the root directory of the project with the folowing format:

{
    "browserName":   "key"
}

3. You are able to add multiple browsers and keys. During the build process it will create a seperate folder for each browser defined.

Installation

The app is bundled with webpack via node. You may use Yarn or NPM to run the build/start/test scripts.

yarn install OR npm install

Creating a build

Development

Run yarn start OR npm run start

This will create a generic build using the first key in your keys.json and place it in _build/_dev at the root directory. This will watch for changes and automatically reload the extension. It is important to note that you will need to refresh the individual pages the extension is active in after a change is made.

Production

Run yarn build OR npm run build

This will create an optimized build and place it inside _build at the root directory. There will be a folder for each browser defined in your keys.json.

Loading The Extension

To load the extension:

1. Open chrome and navigate to chrome://extensions
2. Check the Developer mode in the upper right
3. Select Load unpacked extension...
4. Select the browser folder inside the _build folder when prompted. (Note: During the development process a single folder (_dev) be generated.)

---

Third Party Tools Licenses

• autosize-input - MIT License - Copyright (c) 2017 Jed Watson.
• blueimp-md5 - MIT License - Copyright (c) 2011 Sebastian Tschan
• classnames - MIT License - Copyright (c) 2016 Jed Watson.
• prop-types - MIT License - Copyright (c) 2013-present, Facebook, Inc.
• react - MIT License - Copyright (c) 2013-present, Facebook, Inc.
• react-chrome-redux - MIT License - Copyright (c) 2016 Tyler Shaddix
• react-dom - MIT License - Copyright (c) 2013-present, Facebook, Inc.
• react-motion - MIT License - Copyright (c) 2015 React Motion authors
• react-onclickoutside - MIT License
• react-redux - MIT License - Copyright (c) 2015-present Dan Abramov
• redux - MIT License - Copyright (c) 2015-present Dan Abramov
• redux-saga - MIT License - Copyright (c) 2015 Yassine Elouafi
• semver - ISC License - Copyright (c) Isaac Z. Schlueter and Contributors