Pocket New Tab Extension

Introduction

Pocket New Tab is a browser extension that serves as a replacement to the default new tab. It includes much of the same functionality that’s available with the default new tab, while adding Trending Stories and Popular Topics from Pocket.

Features include:

Trending Stories - the best stories on the web curated by the Pocket community
Popular Topics - links to popular topics in Pocket Explore
Dark Theme - Invert the colors of your new tab with light text on a dark background.
Bookmarks Bar - See your Bookmarks Bar at the top of every new tab for quick access.
Search Bar - Perform a web search or navigate to a URL directly.
Most Visited Sites - Quick links to your most frequently visited sites in

The Pocket New Tab Extension is currently compatible with Chrome, but future iterations will be compatible with other Webkit browsers.

About this Repository

This is the skeleton structure for the Pocket New Tab 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

Updating

As functionality is added the readme should be updated with the module added. Testing coverage thresholds will also be added.

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

Setup

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

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

{
    "browserName":   "key"
}

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:

Open chrome and navigate to chrome://extensions
Check the Developer mode in the upper right
Select Load unpacked extension...
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

react-onclickoutside - MIT License
semver - ISC License - Copyright (c) Isaac Z. Schlueter and Contributors

Pocket / extension-pocket-new-tab