Skip to content
Just building a Chrome Extension with Create React App and TypeScript.
Branch: develop
Clone or download
Latest commit 6dbc06d Mar 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github Updated DEVLOG Jan 20, 2019
public Update CI for v1.1.0 Jan 21, 2019
src Add Tooltips to top right buttons (#16) Feb 25, 2019
.env Fixed package and manifest Jan 19, 2019
.gitignore Initial commit from Create React App Nov 22, 2018
DEVLOG.md Update DEVLOG.md Jan 20, 2019
LICENSE.md Create LICENSE.md Mar 30, 2019
README.md
package.json Update CI for v1.1.0 Jan 21, 2019
tsconfig.json Updated Redux structure Dec 23, 2018
tslint.json
yarn.lock Added back gh-pages Jan 20, 2019

README.md

 

Another Tab - Chrome Extension

An open source Chrome extension that shows your bookmarks when you open a new tab.
Built with Create React App and TypeScript.

 

Another Tab

Another Tab Download Another Tab from the Chrome Web Store

...or try it live!

Overview

I initially built this extension just for personal use and for trying building a Chrome extension, so it has just the feature that I need for now...
PRs are welcome!
Check the DEVLOG to see the history of the project.

Features

  • Shows your bookmarks in the new tab page
  • Bookmarks filtering/search
  • Keyboard navigation support
  • Bookmark folders visibility toggle
  • Themes support
  • Drag & drop bookmark sorting

Stack

  • React (using Create React App) and hooks
  • TypeScript
  • Styled-Components
  • Redux, Redux-Saga and Typesafe-Actions

Contributing

Feature request

I already created a few issues with some features that I feel like would be really welcomed addition, and I'm open to any other additional suggestion... especially if you already have an idea to implement it's UI/UX.

Developing locally

This is a standard Create React App, so you can easily start working on it by simply cloning the project and running yarn to install all its dependencies.
To develop the app locally you can run yarn start, I already included some fake bookmarks to simulate the production behaviour of the extension.

Development tips

This app uses TypeScript, React Hooks, Redux and Styled-Components, so you might need to be confortable with these technologies to completely understand the codebase.
The app is still pretty simple, doesn't have too many components and most of the logic is just in the Chrome Bookmarks parsing and in the Redux sagas.
If you feel intimidated by the codebase please just open an issue/send a PR, I'm open to discussion and tips.
Also, if you're not confortable with hooks feel free to use class components.

Chrome Web Store deployment

I setup a semi-automated Chrome Web Store deployment using CircleCI.
It currently runs only when the master branch receives a new push, but I still haven't automated the version number bumping (so I still have to do it manually).
It would be great making the publishing step manipulate the manifest.json so that it reflects the package.json version and/or a git tag.

Live example deployment

The "live example" is just a customized version of the production build of the app deployed on GitHub Pages. If you check the gh-pages script in the package.json you'll see that I'm setting a REACT_APP_IS_LIVE_EXAMPLE environment variable before running the GitHub Pages deployment: this will allow the build to use the fake bookmarks instead of trying to get them from the Chrome API (like if it was an extension running in the browser).

GitHub organization?

If the app starts getting contributions I'll gladly create a new ad-hoc organization for it, instead of keeping it in my personal profile.

You can’t perform that action at this time.