/extension-save-to-pocket

Save to Pocket is a browser extension that is used to save pages to a connected Pocket account

Primary LanguageJavaScriptMIT LicenseMIT

Save To Pocket Extension

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"
}
  1. 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.