{"id":21894416,"url":"https://github.com/pocket/extension-pocket-new-tab","last_synced_at":"2025-04-15T15:44:44.089Z","repository":{"id":146665883,"uuid":"113221078","full_name":"Pocket/extension-pocket-new-tab","owner":"Pocket","description":"Pocket New Tab is a browser extension that serves as a replacement to the default new tab.","archived":false,"fork":false,"pushed_at":"2020-02-03T19:54:12.000Z","size":554,"stargazers_count":32,"open_issues_count":6,"forks_count":8,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-28T22:07:22.716Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://getpocket.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pocket.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-05T18:57:42.000Z","updated_at":"2023-11-20T04:20:13.000Z","dependencies_parsed_at":"2023-04-16T23:54:33.770Z","dependency_job_id":null,"html_url":"https://github.com/Pocket/extension-pocket-new-tab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket%2Fextension-pocket-new-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket%2Fextension-pocket-new-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket%2Fextension-pocket-new-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket%2Fextension-pocket-new-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pocket","download_url":"https://codeload.github.com/Pocket/extension-pocket-new-tab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249102722,"owners_count":21213255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T13:22:39.540Z","updated_at":"2025-04-15T15:44:44.083Z","avatar_url":"https://github.com/Pocket.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pocket New Tab Extension\n\n![Pocket New Tab Extension](http://assets.getpocket.com/images/github/Pocket_New_Tab.png)\n\n## Introduction\n\nPocket 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.\n\nFeatures include:\n* Trending Stories - the best stories on the web curated by the Pocket community\n* Popular Topics - links to popular topics in Pocket Explore\n* Dark Theme - Invert the colors of your new tab with light text on a dark background.\n* Bookmarks Bar - See your Bookmarks Bar at the top of every new tab for quick access.\n* Search Bar - Perform a web search or navigate to a URL directly.\n* Most Visited Sites - Quick links to your most frequently visited sites in\n\nThe Pocket New Tab Extension is currently compatible with Chrome, but future iterations will be compatible with other Webkit browsers.\n\n## About this Repository\n\nThis is the skeleton structure for the Pocket New Tab extension codebase.\n\nIt leverages an external build script (to be moved to an official repo) to keep things simple when working with the operational code.\n\nAt this time it is set up to use the following:\n\n- React\n- Redux\n- Jest for testing\n- Eslint for JS linting\n- Babel for ES6/7\n- Stylelint for Style linting\n- SASS\n- CSS modules\n- Webpack for compiling\n\n## Updating\nAs functionality is added the readme should be updated with the module added. Testing coverage thresholds will also be added.\n\n\n## Conventions\n\n#### React\n[React](https://facebook.github.io/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.\n\n#### Redux\n[Redux](http://redux.js.org/) is a library used to create a predictable state container.\n\n#### React-Chrome-Redux\n[React Chrome Redux](https://github.com/tshaddix/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.\n\n## Getting Started\n\n### High level steps\n1. [Prepare your project](#setupanchor)\n1. [Install dependencies](#installanchor)\n1. [Create a development/production build](#buildanchor)\n1. [Load the extension into your browser](#loadinganchor)\n\n---\n\u003ca name=\"setupanchor\"\u003e\u003c/a\u003e\n### Setup\nBefore you get started you will need to do the following:\n\n1. Register an API key from [https://getpocket.com/developer/](https://getpocket.com/developer/)\n2. Create a keys.json file in the root directory of the project with the\nfolowing format:\n\n```json\n{\n    \"browserName\":   \"key\"\n}\n```\n\n3. You are able to add multiple browsers and keys.  During the build process\nit will create a seperate folder for each browser defined.\n\n\u003ca name=\"installanchor\"\u003e\u003c/a\u003e\n### Installation\nThe app is bundled with webpack via node.  You may use Yarn or NPM to run the\nbuild/start/test scripts.\n\n`yarn install` OR `npm install`\n\n\u003ca name=\"buildanchor\"\u003e\u003c/a\u003e\n### Creating a build\n\n##### *Development*\nRun `yarn start` OR `npm run start`\n\nThis will create a generic build using the first key in your `keys.json` and\nplace it in `_build/_dev` at the root directory.  This will watch for changes and\nautomatically reload the extension.  It is important to note that you will need\nto refresh the individual pages the extension is active in after a change is made.\n\n##### *Production*\n\nRun `yarn build` OR `npm run build`\n\nThis will create an optimized build and place it inside `_build` at the root\ndirectory. There will be a folder for each browser defined in\nyour keys.json.\n\n\u003ca name=\"loadinganchor\"\u003e\u003c/a\u003e\n### Loading The Extension\n\nTo load the extension:\n\n1. Open chrome and navigate to [chrome://extensions](chrome://extensions)\n2. Check the `Developer mode` in the upper right\n3. Select `Load unpacked extension...`\n4. Select the browser folder inside the `_build` folder when prompted.\n(*Note: During the development process a single folder (`_dev`) be generated.*)\n---\n\n### Third Party Tools Licenses\n-  [blueimp-md5](https://github.com/blueimp/JavaScript-MD5) - MIT License - Copyright (c) 2011 Sebastian Tschan\n-  [classnames](https://github.com/JedWatson/classnames) - MIT License - Copyright (c) 2016 Jed Watson.\n-  [prop-types](https://github.com/facebook/prop-types) - MIT License - Copyright (c) 2013-present, Facebook, Inc.\n-  [react](https://github.com/facebook/react) - MIT License - Copyright (c) 2013-present, Facebook, Inc.\n-  [react-chrome-redux](https://github.com/tshaddix/react-chrome-redux) - MIT License - Copyright (c) 2016 Tyler Shaddix\n-  [react-dom](https://github.com/facebook/react) - MIT License - Copyright (c) 2013-present, Facebook, Inc.\n-  [react-onclickoutside](https://github.com/Pomax/react-onclickoutside) - MIT License\n-  [react-redux](https://github.com/reactjs/react-redux) - MIT License - Copyright (c) 2015-present Dan Abramov\n-  [redux](https://github.com/reactjs/react) - MIT License - Copyright (c) 2015-present Dan Abramov\n-  [redux-saga](https://github.com/redux-saga/redux-saga) - MIT License - Copyright (c) 2015 Yassine Elouafi\n-  [semver](https://github.com/npm/node-semver) - ISC License - Copyright (c) Isaac Z. Schlueter and Contributors\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocket%2Fextension-pocket-new-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpocket%2Fextension-pocket-new-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocket%2Fextension-pocket-new-tab/lists"}