Introducing tabShare

I really dig Chrome's approach to tabs & how you can access your history across devices. However, there isn't an easy way to share your tabs with somebody else unless you click on each tab and copy/paste the URLs into an email. Sharing lots of urls — right now, that's the problem I'm trying to solve.

How it works

tabShare collects all of the tabs in your current window and creates a shareable page with all the links in order. If you're on mobile (or ironically, any desktop browser other than Chrome), you can open all the links at once too. There's also a live preview option when you hover over a link. Install the extension from the Chrome Webstore.

How I made it

The extension

I originally wrote the extension as a page action, but have since switched to a browser action. Once you initiate the extension, you can set a title and then trigger the submit function. This extracts all of the URLs & page titles from the current window's tabs, writes them to a Firebase, generates a unique ID, and redirects you to the main viewer app.

If I had written this app 4 months ago, I would probably have used MySQL on the backend with a bunch of forms, ajax, and server code. But instead I opted for Firebase, a cloud-hosted NoSQL datastore and it's been a great experience. While I'm not using any of the realtime features (yet), I can push & pull data all from the client side.

The app

The main app uses the ID from the extension to access Firebase, pull the link data, and display the list of links. There's also some JavaScript to power the sharing buttons and enable 'browser-specific' CSS. That's how the app determines which browser you're using and which buttons & demo videos to display.

Server side, there are only three templates/routes: the landing page with browser specific demo videos, error page, and viewer described above.

Although the first prototype was a single HTML page (with literally zero server side data handling), the current app is a Flask & Python app deployed on OpenShift. It's probably overkill here, but after using Flask + OpenShift for the past year, I've become quite comfortable with it. I can prototype locally and deploy everything with a git push.

Instrumentation

I instrumented the extension & app using Keen IO so I can track extension launches, store events, and clicks. I also track landing page, error page, and viewer page loads & engagement events.

You can see the full stack of APIs/tech in the built-with section.

What's next?

tabShare is a neat hack and I hope it helps you out. I'll keep hacking & updating this page, but if you have constructive feedback or ideas, please let me know!

Built With

• chrome
• firebase
• flask
• font-awesome
• google-fonts
• javascript
• keen
• keen.io
• keenio
• open-graph
• openshift
• python
• twitter-cards
• web