Chrome Tabs

Demo

Chrome Icon Electron Icon A tabbed interface (like Google Chrome).

Designed for Electron, but also browser-compatible with a jQuery wrapper. This serves as a great example and starting point if you’re working on a project that will use Electron Webviews or IFrames.

Inspired by the original Chrome Tabs by @adamschwartz.

Features

  • Supports Electron Webviews.
  • Looks and feels like Google Chrome tabs.
  • Default and/or custom tab titles.
  • Default and/or custom tab favicons.
  • Drag n’ drop tab arrangement like Chrome.
  • <webview> and/or <iframe> (web browser) view types.
  • Automatic favicons/titles in <webview> and/or <iframe> views.
  • Navigation events; i.e., changes in location, title, favicon (like a browser).
  • Can also run as just tabs — i.e., bring your own content views.
  • Easy access via jQuery and triggers several events.

Live Demos

Tip: In these demos you can ‘View Page Source’ for additional insight.

Projects Using Chrome Tabs


Installation Options

You can simply download a ZIP file containing the contents of the Git repository. Or, you can install the NPM module for NodeJS/Electron applications. There is also a Composer package available for PHP projects.

Install Node Module

npm install x-chrome-tabs --save

Or Install Composer Package

composer require src-works/chrome-tabs

Or use CDN for Web-Based Projects

https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/dists/js/bundle.min.js
https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/src/css/base.min.css
https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/src/css/dark.min.css

Articles About This Project

jQuery Wrapper

This documents the jQuery wrapper around Chrome Tabs, covering both Electron Webviews and also Web Browser IFrames; i.e., the same documentation a […]

Web Browser Implementation

This project was originally developed for Electron, but it can also be made to work with <iframe> tags in web browsers like Chrome, Safari, Firefo […]
Share This
Posted in: