Git Product home page Git Product logo

untab's Introduction

๐Ÿ” UnTab

A productivity tool to boost your browser workflow!

Ctrl + Shift + Space and boom ๐ŸŽ‰!

Chrome download Firefox download

Supported by FOSS United

Most of us have dozens of open tabs, and it quickly becomes cumbersome to manage them efficiently. UnTab is a browser extension that gives you superpowers by making it possible to search through open tabs and perform common actions with just a few keystrokes. This in turn boosts productivity and makes you look like a hero!

UnTab is officially supported on following browsers:

  • Google Chrome(via Chromium support)
  • Firefox browser
  • Microsoft Edge(via Chromium support)

UnTab might also be compatible with other browsers that use Chromium under the hood.

Demo

UnTab

Project Setup

Clone the repository

git clone https://github.com/blenderskool/untab.git
cd untab

Understanding the directory structure

  • src: Primary source directory where the magic happens!

    • background: Background Script for the extension
    • content: Content Script for the extension
    • components: UI components written using Svelte. (App.svelte is the main root component)
    • manifest.json: Extension manifest file
  • dist: This directory contains the built files from the src

  • rollup.config.js: Project build configuration is setup using rollup.

Build the project

To install the extension on the browser, first build the project using the following command.

Chrome and other Chromium based browsers

npm run build

Firefox

npm run build:firefox

All the built files are generated in the dist directory.

Install on Browser

Chrome and other Chromium based browsers

  • Go to chrome://extensions.
  • Turn ON Developer mode.
  • Click on Load Unpacked.
  • Select the dist folder and it will check for manifest.json on its own. The extension should now show up on the list.
  • Go to any page and press Ctrl + Shift + Space or Command + Shift + Space (on Mac) to open UnTab.
  • NOTE: Whenever, the build files are changed, to get the changes synced with the installed extension, click on the reload icon next to the installed extension.

Firefox

  • Go to about:debugging and select This Firefox on the left sidebar.
  • Click on Load Temporary Add-on... button.
  • Select the manifest.json file in dist folder that was generated after the build step. The extension should now show up on the list.
  • Go to any page and press Ctrl + Shift + Space or Command + Shift + Space (on Mac) to open UnTab.
  • NOTE: Whenever, the build files are changed, to get the changes synced with the installed extension, click on the Reload button in the extension that was installed in the 3rd step.

Privacy and Analytics

  • UnTab does not store or send anything searched/selected in UnTab interface to a server.
  • The search index(which includes opened tabs, recent browser history, bookmarks, etc.) prepared by UnTab is generated on the client side everytime and is never sent or stored in a server.

Analytics

Analytics is kept to a minimum and Google Measurement protocol is being used for these basic analytics. Unlike the regular Google Analytics used on websites, Google Measurement protocol only records the data explicitly defined in code.

  • Browser UserAgent is recorded.
  • Browser location is recorded.
  • Fingerprinting or Returning browser sessions are not recorded.

Following events are tracked:

  • Opening the UnTab interface.
  • Selecting some item in the UnTab interface.
    (NOTE: The content itself in any form is not sent, just an indication that above event occurred)

License

UnTab is MIT Licensed

untab's People

Contributors

asharonbaltazar avatar blenderskool avatar gargakshit avatar gurvir-sandhar avatar i-aryan avatar ismaeldcom avatar nnova-code avatar radiantly avatar rajeshmr82 avatar rajivnayanc avatar subhrajyotisen avatar sudiptog81 avatar tanishqvyas avatar yavko avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

untab's Issues

Firefox support

All features currently work on Firefox except for the favicons. Favicons cannot be accessed in Firefox extensions, so some changes would be needed for it.

Remove margin when title is not present

Webpage titles are absent in some rare cases and in those cases, the URL has a margin at the top. This margin should not be there and the URL should be vertically aligned center with respect to the favicon.

image

A hot-key / button to close tabs right from the untab window

Currently unTab shows the search results for all the currently opened tabs but there is no provision to close the tabs right from the unTab window itself. We have to go to the respective window and either close it with the cursor or use ctrl+w or make use of tab actions (which closes only the currently open tab).

If there would be a hot-key or a button combination like ctrl+c to close the opened tab right from the unTab results window, it would be great enhancement.

The user will only have to navigate to the respective tab which they wish to close using the arrow keys and then the highlighted tab would then be closed using the provision provided.
image

Enhanced Search with keywords

Taking inspiration from advanced ways of making searches in Google, I propose features including but not limited to the following features:

1. Search for a specific site

The unTab query to show results under history and bookmarks from a specific website

url:<site> <search-query-here> 

2. Remove searches related to a specific keyword or site

The unTab query to show results under history and bookmarks, not from a specific website

exclude:<keyword> <search-query-here>

These are a few of the many creative query ideas we can build to enhance the search queries for hardcore unTab users. Please let me know if this enhancement can be included.

Add documentation for Plugin API

Plugins API should be documented inorder to make Plugin creation easier for new contributors. This would be documented in the GitHub wiki for the time being.

Support for searching on content within tabs

Currently tabs are searched only by their title and urls. Tab page content may be added to the index that would make it easier to search in pages without having to use Ctrl+F.

Addition of border for better distinction

The unTab window, on some websites might not be distinguishable at all from the background. Example given below ๐Ÿ‘

image

Thus inclusion of a border around the outermost container div would really help distinguish the unTab window from all kinds of background.

Add support to interact with Storage

It would be great to type in certain keywords such as #ls localStorage and be able to view if there are any localStorage items present. The usual way of doing it involves slightly more steps.

A possible way to encode these actions could be to have them in the following format:

action entity {entity-identifier}

Where action can be :

  • listing items (#ls localStorage)
  • permanently deleting an item (#rm localStorage {key})

The entity identifier will be optional since it depends on the use case.

The keywords for actions can be similar to bash commands to keep familiarity. This feature could then be scaled to incorporate things like cookies, session storage, etc.

If possible, these type of commands could have their own dedicated input/tab section where we can type it out. Toggling between the two (commands input and search input) could be provided via some hotkey or if the design could incorporate a visual cue to clearly hint if the input tab is in search mode or commands mode that would be great.

A possible way to do so could be to replace the search icon with an appropriate command icon upon the press of the toggle hotkey.

Another possible way could be to hand this just like we handle plugins. Once the user enters / the tab shows the available plugins. In a similar fashion if the above commands can be shown upon entering # then it would be great.

Bundle the fonts instead of loading them from Google fonts

Bundling the fonts will not make a network request each time untab's frame is injected, increasing performance. As it injects the frame into the page, the font loading (might) block the loading of other content request by the website itself. Also, if we open untab while some page asset is still loading, the asset loading is cancelled and further requests are blocked until untab's fonts are loaded

image

Keep track of most active tabs

The most active tab can be defined as the tab which the user visits most.
This parameter can be used to rank the results better where the more visited tabs show higher in the results.

unTab window does not open in previously opened tabs

Steps to replicate the issue

  1. Open a couple of tabs in the web browser (we shall refer to these tabs as formers). Make sure that when these tabs are opened, unTab isn't added as an extension.
  2. Now, add unTab as an extension.
  3. Open some more tabs now (we shall refer to these as latters).

One could notice that upon trying to open the unTab window in the formers it does not open, however when we try to do the same in latters it works fine. What causes this issue?

A request to add the question label as welll to this issue.

Plugin with user-defined rule for using "tweak url" products

Few examples

  1. appending outline.com/ before a web article removes all the clutter from the page
  2. replacing github.com/user/repo with github1s.com/user/repo opens the repo in an online vscode editor
  3. appending ss before a youtube link leads to page where the video can be downloaded

#35 is a special case of this functionality

Audio Activity indicator for open tabs

Hunting for the tab from where the sound is coming out of all the open tabs is a bit painful and time-consuming. If the results for tabs section could be listed in a manner such that all the tabs from which the sound is coming are listed before other open tabs then it would be much easier and quicker to navigate to the correct tab and take care of the unwanted audio/music playing in the tab.

This would be a really helpful feature.

Display matching results count per section

The unTab window displays the total number of matching results at the top. It would be a good add-on to be able to see the section-wise count of the matching results. The count could be shown at the beginning of the header indicating the section name.

A reference :

image

UX / UI Enhancement for the displayed results

Currently, the results that are being displayed, show the close and pin options always. Would it be possible to display these options only when the option is selected/hovered upon? That would improve the experience and make it look cleaner.

image

Building on that, additional useful action words can be shown such as Open Bookmark at the end of a bookmark result. Which currently is not shown.

image

Bookmark feature in search results

Currently unTab supports two features for the tabs section results:

  1. Close Tab
  2. Pin Tab

image

An addition of the bookmark tab in the form of a bookmark icon would be really helpful too.

Highlight the currently active tab

The unTab window shows results for all the currently open tabs in the browser windows. It would be great if it could show the currently active tab in a certain way.

I would propose the following two ways, although the developer must feel free to incorporate the feature as per his own liking.

  1. Use a different color to highlight the currently active tab
  2. Use an asterisk before the tab icon to represent the tab is currently active.

Logo for this project

I keep this open for the community to suggest logos for this project. Would add concepts from my side too in the coming weeks.

Doesn't work on Suspended Tabs

Would love to use this on Suspended Tabs as well. Is there a way to get it to work on Suspended Tabs?

I am using "The Marvellous Suspender" :)

Message when no items are matched

When the search term does not match any item, we can show a message informing the user that nothing was found instead of not showing anything.

image

Some points from design:

  • color used for the text and icon is --gray-600 from the theme
  • size of the text is 18px (use rems in code)
  • size of the icon is 24px x 24px
  • icon used is the frown icon

Default sort to Most Recently Used tabs

Really awesome plugin, can't wait to see where you take it!!

One feature request that would really help improve my workflow and use of this extension would be if the default sort, after triggering the extension, was by most recently used.

Often times I want to switch tabs and I don't remember the title but I do know that I was using it recently, similar to alt-tab.

Searching histories

Maybe implement this as a plugin where the sites in the browser's history can be queried and the selected result would open that URL in a new tab.

Migrating to webextension-polyfill

Webextension-polyfill is created by mozilla and is a polyfill for the promise-based browser API available only in Firefox only. Migrating to this can improve #4 and development experience as well since we are mostly wrapping the chrome API in Promises and consuming them.

https://github.com/mozilla/webextension-polyfill/
Reference: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension#The_WebExtension_browser_API_Polyfill

Disable analytics while development

Analytics from development conflict with real usage of the extension, hence we should disable it by adding some "Development build" process.

Open UnTab search when clicking extension icon

Clicking the extension icon in the extensions bar should open the UnTab search similar to how Ctrl+Shift+Space opens the interface.
This can be particularly useful when the user may not recall the shortcut.

Improved plugin searching

Current problem

The plugins are currently shown only if their regex is matched. While this covers many use cases, there are already some plugins that only match when the query beings with / and then matches some pattern. Examples:

  • Google search: /g or /google
  • DuckDuckGo search: /d or /duck /duckduckgo
  • Tab actions: /t or /tab

As the number of plugins increases, there will be cases where multiple plugins match similar patterns (if they are small). To resolve this plugin searching can be added for these special types of plugins that begin with /.

Proposed solution โœจ

  • Similar to the autocomplete menu in code editors, a special plugin search menu may be shown when the query begins with / which would show a list of plugins that are currently active.
  • Typing anything after / would be considered as a query that would search in the list of plugins. When the user chooses a plugin (using arrows to navigate and enter to select), all items related to only that plugin would show up.
  • The user can then continue typing the query to search through the plugin items (similar to the current behavior).

But doesn't this seem like increasing the steps to search for something? ๐Ÿค”
It initially did feel as if the number of steps would increase. But thinking about it more, it actually doesn't! When regex was used for matching patterns, the user had to be careful about what they are typing (so that it matches the pattern and shows the results). Whereas in this approach, after typing / plugins would be fuzzy searched against the query thus decreasing the scope of errors. Selecting the plugin might feel like an extra step but selecting a plugin would just be Enter which technically replaces Space usually needed after /g or /d right now.

What would the plugins be searched against? ๐Ÿค”
Plugins would be searched against their display name (which is shown to the user) and a set of keys defined for the plugin. Example: for Google search plugin, it could be [ 'g', 'google' ].

A .new shortcuts plugin

.new domain is used for various shortcuts on the internet. Maybe we can create a plugin called new-shortcuts that has a small set of common productivity tools listed here https://whats.new/shortcuts

This plugin can be accessed by doing /new and then typing the name of the shortcut.

CI setup

From #12 we should have a CI setup to add built version of the extension as an asset in the release

UnTab hotkey doesn't work sometimes on Chrome/Chromium

Despite using the unique key combination of Ctrl+Shift+Space I am unable to open the unTab window. I have tried to uninstall and re-install the extension again in chrome but unfortunately, I haven't been able to use it. The extension was working fine 3 days ago.

A point to be noted is that I am able to access the unTab window after clicking on the icon under my listed extensions. But that kind of defeats the purpose of not using touchpad.

Additionally, I have even tried restarting the browser application. Even that did fix the issue. Could you please let me know how to get it to work again?

Open UnTab when content script isn't set

Some screens like Browser new tab, settings and few others cannot have a content script embedded in them. This makes it impossible to open UnTab and requires the user to switch to a tab with some webpage open.

Since UnTab already has index.html as a web-accessible resource which gets loaded in an iframe via the content script, for these special pages, we can directly open the URL itself in a new tab.

Dark theme and light theme

Hello again,

Sorry for taking such an interest in your project, but I do want to make it better. Right now, I've managed to get a window.matchMedia working to listen for the current browser theme. Would you prefer to append a class to the elements (something like dark or light) or do you have anything else in mind?

Support for 3rd party integrations such as Pocket, InstaPaper

I just installed this and instantly loved the extension.

But I rarely use bookmarks now and I know many people who use a read later service as a bookmark tool as well.

It would be great to see 3rd party integrations such as InstaPaper and Pocket for the search results, It might be slow but if I want pocket's result, I'm okay to wait.

Categories should be stickied during scrolling

Right now, it's impossible, at first glance or scrolling back up, to know whether the user is looking at tabs or history. Making the categories stick at the top of the results should help.

I'm not familiar with Svelte, however, for sticky to work, there needs to be a div surrounding both the category div and the appropriate results.

Plugin for Google Scholar Search

The addition of a /Scholar Search as a plugin would really save some time while trying to search google scholar for desired results. When looking up research papers, articles, reports, etc students and developers tend to make use of google scholar for refined search results. doing the same would become much faster with the addition of a /Scholar Search plugin.

Allow unTab window to open in a new empty tab

The unTab window opens only in those tabs which aren't empty. If we open a new tab and try to open unTab window by pressing ctrl+shift+space then it does not open. It would be really helpful if we could open unTab window even in empty tabs.

A new blue theme

A blue theme(suggest a better name!) for UnTab. Here's a small preview of what it can look like
Note: Colors may not be exact, as an image with the spearmint theme was photoshopped to get this!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.