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 “Saved to Pocket” notification appears and offers additional actions, including:

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

About this Repository

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

It leverages a rollup build script to keep things simple when working with the operational code.

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

• React
• Jest for testing
• Eslint for JS linting
• Babel for ES6/7
• Linaria
• Rollup
• Storybook

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. During the build process it will inject the key into the manifest file

Installation

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

npm install

Creating a build

Development

Run npm run build

This will create an optimized build and place it inside _build at the root directory.

Running npm run storybook will open a development envorinment to allow for building and testing of simple components.

Production

Run npm run release

This will create an optimized build, zip it up, and place it inside _releases at the root directory.

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 _build folder when prompted.

Package Deployment

TBD

Third Party Tools Licenses

• downshift - MIT License (MIT) Copyright (c) 2017 PayPal

• linaria - MIT License (MIT) Copyright (c) 2017 Callstack

• match-sorter - MIT License (MIT) Copyright (c) 2020 Kent C. Dodds

• prop-types - MIT License (MIT) Copyright (c) 2013-present, Facebook, Inc.

• react - MIT License (MIT) Copyright (c) 2013-present, Facebook, Inc.

• react-dom - MIT License (MIT) Copyright (c) 2013-present, Facebook, Inc.

• autosize-input - MIT License (MIT) Copyright (c) 2017 Jed Watson.

• webextension-polyfill - Mozilla Public License Version 2.0

• babel - MIT License (MIT) Copyright (c) 2014-present Sebastian McKenzie and other contributors

• rollup - MIT License (MIT) Copyright (c) 2017 contributers

• storybook - MIT License (MIT) Copyright (c) 2017 Kadira Inc.

• types - MIT License (MIT)

• cross-env - MIT License (MIT) Copyright (c) 2017 Kent C. Dodds

• eslint - Copyright (c) OpenJS Foundation

• jest - MIT License (MIT) Copyright (c) Facebook, Inc.

• prettier - MIT License (MIT) Copyright (c) James Long

• styled-jsx - MIT License (MIT) Copyright (c) 2016-present Vercel, Inc.