{"id":13990835,"url":"https://github.com/mmazzarolo/chrome-another-tab","last_synced_at":"2025-08-20T06:33:27.247Z","repository":{"id":54612691,"uuid":"161025049","full_name":"mmazzarolo/chrome-another-tab","owner":"mmazzarolo","description":"Just building a Chrome Extension with Create React App and TypeScript.","archived":false,"fork":false,"pushed_at":"2019-12-26T06:45:35.000Z","size":6647,"stargazers_count":248,"open_issues_count":10,"forks_count":21,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2024-12-16T04:07:57.790Z","etag":null,"topics":["chrome-extension","immer","react","redux","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmazzarolo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-09T09:45:00.000Z","updated_at":"2024-04-18T09:48:06.000Z","dependencies_parsed_at":"2022-08-13T21:31:12.590Z","dependency_job_id":null,"html_url":"https://github.com/mmazzarolo/chrome-another-tab","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Fchrome-another-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Fchrome-another-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Fchrome-another-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Fchrome-another-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmazzarolo","download_url":"https://codeload.github.com/mmazzarolo/chrome-another-tab/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230400616,"owners_count":18219831,"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":["chrome-extension","immer","react","redux","typescript"],"created_at":"2024-08-09T13:03:22.154Z","updated_at":"2024-12-19T08:08:50.269Z","avatar_url":"https://github.com/mmazzarolo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u0026nbsp;\n\n# Another Tab - Chrome Extension \u003cimg src=\"./.github/logo.svg\" width=\"40\" align=\"left\"\u003e\n\nAn open source Chrome extension that shows your bookmarks when you open a new tab.  \nBuilt with Create React App and TypeScript.\n\n\u0026nbsp;\n\n\u003cp align=\"center\" margin-bottom=\"0\"\u003e\n  \u003ca href=\"https://github.com/mmazzarolo/chrome-another-tab\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Another Tab\" width=\"auto\" height=\"auto\" src=\"./.github/2019-01-13-screenshot-dark.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://chrome.google.com/webstore/detail/oaaeanlgefipegfcbgpgnhhnpengdjld\"\u003e\n    \u003cimg alt=\"Another Tab\" width=\"auto\" height=\"32\" src=\"./.github/chrome-web-store-icon.png\"\u003e\n    Download Another Tab from the Chrome Web Store\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mmazzarolo.github.io/chrome-another-tab/\"\u003e\n    ...or try it live!\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Overview\n\nI initially built this extension just for personal use... and for trying building a Chrome extension 🤷‍♂️, so for now it has just the features that I need...  \nThat said, PRs are welcome!  \n[Check the DEVLOG to see the history of the project](./DEVLOG.md).\n\n### Features\n\n- Shows your bookmarks in the new tab page\n- Bookmarks filtering/search\n- Keyboard navigation support\n- Bookmark folders visibility toggle\n- Themes support\n- Drag \u0026 drop bookmark sorting \n\n### Stack\n\n- React (using Create React App) and hooks\n- TypeScript\n- Styled-Components\n- Redux, Redux-Saga and Typesafe-Actions\n\n## Contributing\n\n### Feature request\n\nI already created a few [issues](https://github.com/mmazzarolo/chrome-another-tab/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) 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.  \n\n### Developing locally\n\nThis 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.   \nTo develop the app locally you can run `yarn start`, I already included some fake bookmarks to simulate the production behaviour of the extension.  \n\n### Development tips\n\nThis app uses TypeScript, React Hooks, Redux and Styled-Components, so you might need to be confortable with these technologies to completely understand the codebase.  \nThe 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.  \nIf you feel intimidated by the codebase **please just open an issue/send a PR**, I'm open to discussion and tips.  \nAlso, if you're not confortable with hooks feel free to use class components.\n\n### Chrome Web Store deployment\n\nI setup a [semi-automated Chrome Web Store deployment using CircleCI](./.circleci/config.yml).     \nIt 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).  \nIt would be great making the publishing step manipulate the `manifest.json` so that it reflects the `package.json` version and/or a git tag.  \n\n### Live example deployment\n\nThe \"live example\" is just a customized version of the production build of the app deployed on GitHub Pages. \nIf 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).   \n\n### GitHub organization?\n\nIf the app starts getting contributions I'll gladly create a new ad-hoc organization for it, instead of keeping it in my personal profile.  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Fchrome-another-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmazzarolo%2Fchrome-another-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Fchrome-another-tab/lists"}