A tab manager at your service.

Overview

Tab Butler

Discord

Tab Butler Promo Image

Instructions

Development Quick Start

Prerequisites

  • Node.js (tested on v18)
  • NPM (tested on v8.6.0)
  • Chrome (>= v88), has only been tested here

Note: Even thought the extension uses the webextension-pollyfill library, it has currently only been tested on Chrome. However, it should work on other browsers like Firefox, Opera, Edge, etc.

Clone Repo

git clone https://github.com/MitchellMarkGeorge/TabButler

Install Dependencies

npm install

Start Dev Build

If you are developing for Chrome/Chromeium browsers, use

npm run start:chrome

If you are developing for Firefox, use

npm run start:firefox

If you are developing for both Chrome and Firefox, use

npm run start:all

Note: For minified production build, use respective npm run build instead.

Add To Chrome/Chromeium Browsers

  • Open chrome://extensions
  • Enable Development mode
  • Click Load Unpacked button
  • Navigate to repository
  • Select dist/chrome directory

Add To Firefox

  • Open about:debugging
  • Click the This Firefox options
  • Click the Load Temporary Add-on button
  • Navigate to repository
  • Select the manifest.json file in the dist/firefox directory
Usage
Shortcut Description
ctrl + shift + space Toggle tab search in current page
alt + shift + space Toggle tab actions in current page

Note: For Mac, cmd is used instead of ctrl and option is used insead of alt.

Built With

  • TypeScript (both content and background script)
  • Web Extensions Polyfill (makes the extension cross-platform)
  • React (for the actual search modal in content script)
  • CSS (for some minor styling in content script)

Versioning

We use SemVer for versioning.

Authors

  • Mitchell Mark-George - Initial work
  • Dylan Player - Readme development and documentation

See also the list of contributors who participated in this project.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Comments
  • Reconsider search modal toggle command

    Reconsider search modal toggle command

    Ctrl+shift+S is used in a lot of apps for save/save as. Might be better to choose something that is easy to remember and doesn't conflict with both the browser and the users experience/understanding

    S UX priority 
    opened by MitchellMarkGeorge 24
  • Open Download / Extension / Settings /History / Bookmarks does nothing

    Open Download / Extension / Settings /History / Bookmarks does nothing

    Describe the bug Selecting any of these from the Tab Action modal just closes the modal and otherwise doesn't seem to do anything.

    To Reproduce Steps to reproduce the behavior:

    1. Press Shift + Alt + K to open the modal
    2. Select any of the mentioned actions and press enter

    Expected behavior Something should open

    Platform Info (please complete the following information):

    • OS: Ubuntu 22.04
    • Browser Firefox
    • Version 102.0.1 (flatpak)

    Thanks! :)

    bug good first issue S 
    opened by forteller 8
  • Tab search doesn't work on already opened pages right after install

    Tab search doesn't work on already opened pages right after install

    Describe the bug After installing TabButler on Chrome or Brave, pressing ctrl + shift + space fails to open the tab search modal if done on a tab with an url that has already been open. The bug doesn't persist after loading another url in the same tab or another.

    To Reproduce

    1. Open chrome, if TabButler is installed, uninstall
    2. Load a couple of websites (tested on wikipedia.org, twitter.com, reddit.com, duckduckgo.com, google.com)
    3. Install TabButler.
    4. Attempt to open the tab search modal on any of the previously opened websites.

    Expected behavior The tab search popup should open on pressing ctrl + shift + space

    Platform Info (please complete the following information):

    • OS: Windows 10 64 bit
    • Browser: Chrome 103.0.5060.114, Brave 1.40.113
    opened by andrei-g-git 7
  • Code Refactoring

    Code Refactoring

    Is your feature request related to a problem? Please describe. It is pretty clear that while the main project is stable, the code itself needs a bit of refactoring and reorganization. Most of the code itself is in the right place, but things like the content script and the Search component could be written better

    Describe the solution you'd like To start, I would like to change the content script into a class with an attach() method that is called on the body of the document. The purpose of this would be to encapsulate the functionality in a more presentable way rather than a bunch of functions in a file.

    Additional context This itself isn't that much of a priority for the beta, but I believe that with new/more contributors joining in, it might be better if the code is in a more understandable state than it is right now.

    M Dev 
    opened by MitchellMarkGeorge 7
  • Extension does not react to tab creation in another window

    Extension does not react to tab creation in another window

    Describe the bug Similar to #14. During my testing, I found that if I had another window open and I created a new tab, the currently open tab search modal would not react accordingly. This is a new problem since the inclusion of #12 that we never had to address.

    To Reproduce Steps to reproduce the behavior:

    1. Have two browser windows open with tabs in both
    2. Have the tab search component open in one of the windows. Take note of the number of results.
    3. Go to the second window and create a new tab. The number of results on the tab search modal should remain the same.

    Expected behavior On tab creation, the tab search modal should update.

    Platform Info (please complete the following information):

    • OS: Mac
    • Browser Tested on both Chrome and Firefox
    • Version [e.g. 22]

    Additional context This issue should be relatively easy to fix. using an onCreated listener, listen for tab creation. When a new tab is created in another window, send an update to all open tab search modals. This is important to only update the tab search modal in the OTHER window as if a new tab is created in the same window as the current search modal, the modal will be automatically updated when the user returns to that tab. If this issue requires more clarification, please feel free to reach out!

    bug M UX 
    opened by MitchellMarkGeorge 6
  • Old content script not orpahned on update

    Old content script not orpahned on update

    Describe the bug This issue seems to happen mainly in production. When the extension updates, the idea is that the old content script should be cut off and can't receive any messages from the background script while a new content script is injected with the new code. While this seems to work in development (with the occasional hiccup), this does not seem to be the case in production. Sometimes after an update, it seems that 2 content scripts seem to receive messages from the background script, leading to 2 Search modals being rendered on top of each other, both being unresponsive due to the conflicting focus traps. This can be seen especially when the extension is updated manually using an update button. Here is an example:

    Screen Shot 2022-08-13 at 10 59 18 PM

    After exploring online and looking at the source code of other extensions with content script-based UI's, the best course of action would be to not reinject the content script into tabs. For now, this will make sure that everything renders correctly with one Search modal and might require users to manually reload their tabs after an update. A better strategy would be to update the extension when the browser is updating as well.

    Expected behavior On update (however it happens), the extension should render the Search modal correctly with no duplicates in the page DOM.

    Screenshots See above

    Platform Info (please complete the following information):

    • OS: Mac
    • Browser: Chrome, Firefox, Brave

    Additional context N/A

    bug 
    opened by MitchellMarkGeorge 4
  • Refactor Search compoenent data retreival for tab data and actions

    Refactor Search compoenent data retreival for tab data and actions

    Is your feature request related to a problem? Please describe. If you look at how the tab data and actions are fed into the modal currently, you might notice that the current implementation does not allow the React UI to handle errors in the data fetching. This should be solved by moving this logic to the Search component. As simple as this may seem, this holds some other implications as well for some of the event listeners we have (like the page visibility listener). Listeners like these would need to be moved to the Search component. Right now if the data retrieval fails, the search component will be shown blank with no info for the user.

    Describe the solution you'd like See above (if you need more clarification, please reach out to me)

    Describe alternatives you've considered N/A

    Additional context This will be moved to a priority for beta so we can get the error handling going. This might be large than expected though, so if it is not done in time for beta, we might move it over to another release during the beta window

    enhancement L priority 
    opened by MitchellMarkGeorge 4
  • Search modals sometimed don't show when triggered on GitHub

    Search modals sometimed don't show when triggered on GitHub

    Describe the bug On both the development and deployed builds, on Github, I sometimes get the error "Autofocus processing was blocked because a document already has a focused element." (see screenshot below). This seems to cause the extension not to show when triggered.

    To Reproduce The problem is I don't even know how this even happens. It just happens randomly sometimes and I am unsure if this is even happening on websites other than GitHub (or any other computer for that matter).

    Expected behavior The Search modal should always be shown when triggered.

    Screenshots Screen Shot 2022-07-23 at 10 56 04 PM

    Platform Info (please complete the following information):

    • OS: Mac
    • Browser: Chrome

    Additional context Upon further googling and code inspection, it seems that I use autoFocus on the Input element in the Search component. Apparently, autofocus only really works on page load, so there could be some form of interference here. A possible simple solution would be to remove that prop and on mount, use a ref to call the focus() method for the input element.

    Another possible reason could be this problem could be focus-trap. I have been thinking of removing this package and with the introduction of #40, there might not really be a need to use this package anymore.

    As said earlier, this could just be an issue with my machine and more testing needs to be done.

    bug good first issue S 
    opened by MitchellMarkGeorge 3
  • Migrate to traditional for loops for performance boost

    Migrate to traditional for loops for performance boost

    Is your feature request related to a problem? Please describe. This isn't really a feature but after doing some (investigation)[https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/], I found that methods like forEach and map are pretty slow. I have noticed this is affecting things like on-install injection. This is really important as we are potentially dealing with huge arrays.

    Describe the solution you'd like I would like to migrate some some forEarch and map usage in the project to traditional for loops to squeeze out as much performance as possible. I will start with the getTabsInCurrentWindow() method in background/utils as that is an essential part of the tab search.

    Describe alternatives you've considered I have looked at for/in and for/of loops and they do perform quite well. I will keep them in mind when implementing a solution.

    Additional context Refer to this link for more details: https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/

    enhancement good first issue S priority 
    opened by MitchellMarkGeorge 3
  • Consider adding browser-wide search (not just current window)

    Consider adding browser-wide search (not just current window)

    Right now the current implementation only queries tabs from the current window, but if we want to be able to search tabs browser-wide, there is a chance some things might become a bit slower (like the filtering and mapping in the background script)

    enhancement M 
    opened by MitchellMarkGeorge 3
  • Add ability to mute/unmute, pin/unpin and close tabs from search modal

    Add ability to mute/unmute, pin/unpin and close tabs from search modal

    For pin icons, use

    • AiFillPushpin to show pinned
    • AiOutlinePushpin to show unpined

    For volume icons, use

    • HiVolumeOff to show muted
    • HiVolumeUp to show unmuted

    For the close icon, use RiCloseLIne

    You should only be able to mute a tab if it is currently making sounds (is audible)

    enhancement M UI 
    opened by MitchellMarkGeorge 3
  • Does not work on some instances of Mastodon

    Does not work on some instances of Mastodon

    Describe the bug Does not work at all, except showing the number of tabs and searching, without actually show any search results. See screenshot.

    This happens on the following instances of Mastodon: https://todon.nl/ https://linuxrocks.online/ https://octodon.social

    But not on: https://toot.kuba-orlik.name/

    These are just the ones I've checked.

    What the ones where the bug is present have in common is that they are on the 3.5 branch of Mastodon, while the one where TB is not buggy is on the older 3.3 branch. That's the only connection I see.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior It should just be normal :)

    Screenshots Screenshot from 2022-08-15 19-27-45

    Platform Info (please complete the following information):

    • OS: Ubuntu 22.04
    • Browser: Firefox 103.02
    • Version (is this meant to be the version of TB or of the browser?) TB: 1.0.0.4

    Additional context Learn about Mastodon at https://joinmastodon.org/

    Thank you for your work! :)

    opened by forteller 0
  • Closing TabButler while on a GitHub issues page jumps the page to almost the top

    Closing TabButler while on a GitHub issues page jumps the page to almost the top

    Describe the bug See title. Closing by pressing Esc og clicking gives same result

    To Reproduce Steps to reproduce the behavior:

    1. Go to a list of issues on Github, like https://github.com/MitchellMarkGeorge/TabButler/issues or https://github.com/AntennaPod/AntennaPod/issues
    2. Scroll down a bit
    3. Open TabButler
    4. Close TabButler

    Expected behavior TB should just close, like on other pages

    Platform Info (please complete the following information):

    • OS: Ubuntu 22.04
    • Browser: Firefox 103.02
    • Version (is this meant to be the version of TB or of the browser?) TB: 1.0.0.4
    opened by forteller 2
  • Actions based on on install survey

    Actions based on on install survey

    Is your feature request related to a problem? Please describe. Part of the goal of Tab Butler is to cater to all the needs of the user, and each feature should reflect that.

    Describe the solution you'd like My idea was that on installation, a form could be shown asking the user what they do (like their profession) and other questions. Based on those answers, certain actions will automatically be added. This adds a level of personalization to Tab Butler and allows users to customize it off the jump. For example, if the user says they are a software engineer, the open GitHub could be added.

    Describe alternatives you've considered N/A

    Additional context This is more of an idea than anything else. This would require #28 to be implemented first and is not really a priority

    enhancement UX L UI nice-to-have 
    opened by MitchellMarkGeorge 0
  • add Bookmark Current Website action

    add Bookmark Current Website action

    Is your feature request related to a problem? Please describe. As the title suggests, we want to add an action to be able to bookmark the current tab

    Describe the solution you'd like N/A

    Describe alternatives you've considered N/A

    Additional context If you have any questions, feel free to reach out.

    good first issue S tab actions 
    opened by MitchellMarkGeorge 0
  • Redo Checkbox using tutorial

    Redo Checkbox using tutorial

    Currently the checkbox used in the BottomBar is styled using the appearance css property, but it is still pretty new and might not behave uniformly in all browsers. We could redo the checkbox using this tutorial https://youtu.be/LMir4WUdz6U

    good first issue S UI nice-to-have 
    opened by MitchellMarkGeorge 0
Releases(v1.0.0.0-beta.4)
  • v1.0.0.0-beta.4(Sep 11, 2022)

  • v1.0.0.0-beta.3(Aug 26, 2022)

    NEW FEATURE: Tab Filters!

    In the Tab Search Modal you can now type:

    • “\pinned” to get all the pinned tab
    • “\muted” to get all muted tabs
    • “\audible” to get all tabs getting audio

    Also some bug fixes here and there.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0.0-beta.2(Aug 15, 2022)

    This is the second beta release for Tab Butler!

    New features added:

    • You can now pin, close, and mute audible tabs right from the Search modal!
    • The Tab Search modal now reacts to tab updates, closing, and creating. Tab Butler knows your browser better.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0.0-beta.0(Jul 22, 2022)

Owner
Mitchell Mark-George
Mitchell Mark-George
A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all.

pi A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all. Stargazers over t

tick 11 Nov 1, 2022
Obsidian plugin to open a note of your choice when creating a new tab, like in the browser.

New Tab Default Page Obsidian plugin to open a note of your choice when creating a new tab, like in the browser. Usage Set the note to open in new tab

pseudometa 20 Dec 27, 2022
✍️ A scratchspace for your new Tab page

Tab␣ A scratchspace for your new Tab A beautiful new tab replacement that gives you your very own scratch space to help you stay organized and focused

Jacky Zhao 71 Jan 3, 2023
RESTful service to provide API linting as-a-service

API Linting Service Prerequisites / general idea General idea behind this API implementation is to provide an API as a service based on the awesome sp

Schwarz IT 6 Mar 14, 2022
TypeScript plugin for service-to-service (aka. "functionless") cloud integrations.

Functionless λ< Functionless is a TypeScript plugin that transforms TypeScript code into Service-to-Service (aka. "functionless") integrations, such a

sam 303 Jan 2, 2023
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
Easily open daily notes for today in new tab, and much more!

Obsidian daily notes new tab This plugin adds a command for opening daily notes in a new tab (so that a keyboard shortcut could be used!) and gives ex

Xiao Meng 16 Dec 26, 2022
This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

xataio 761 Jan 1, 2023
A Kernel Package that adds a tab to Discord settings where you can add and arrange custom code snippets.

Code Snippets A Kernel package (specifically for Discord) that adds a tab in settings where you can add and manage code snippets. Requires: https://gi

SwishyPlugs 6 Dec 14, 2022
Browser tab reload automation.

SpeedFeed Browser tab reload automation. Report Bug · Request Feature · View License (back to top) Contributing Contributions are what make the open s

Start Rev Technology 4 Aug 10, 2022
Add grouped tabsets, which remember the active tab across multiple HTML documents.

Grouped Tabsets See the extension in action. This quarto extension provides support for "grouped" tabsets in Quarto HTML documents. Consider the case

null 13 Sep 30, 2022
Chrome style tab-resizing for jQuery UI tabs

stretchy tabs Chrome style tab-resizing for jQuery UI tabs stretchy tabs provides methods for adding and removing tabs ##Initialize stretchy tabs $( "

Adam Jimenez 8 Nov 19, 2021
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
✏️ A new tab extension for convenient note-taking

MDTab Write quick notes in Markdown on any new tabs! Installation Right now MDTab has only been tested on Chrome (brave browser). You can install it f

Ian Huang (Shaoru) 8 Nov 11, 2022
A simple Stable Diffusion WebUI extension that adds a Photopea tab and integration.

Photopea Stable Diffusion WebUI Extension Photopea is essentially Photoshop in a browser. This is a simple extension to add a Photopea tab to AUTOMATI

Yanko Oliveira 624 Aug 10, 2023
Flight is a universal package manager for your needs, no matter what language you may want to write your code in.

Flight Swift, reliable, multi-language package manager. ⚡ Installation We don't have an official release of Flight yet, however, if you would like to

null 26 Dec 25, 2022
Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

BrowstorJS ?? ?? ?? Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all

Nullix 8 Aug 5, 2022
may-be.gay is a service in which you can register your own sub-domain for your personal website

may-be.gay is a service in which you can register your own sub-domain for your personal website. How to register New method (Recommended) Create a new

may-be.gay 7 Dec 27, 2022