Home

Preparation

# Install gulp globally (if you don't have it yet)
$ sudo npm install -g gulp

# Install dependencies
$ npm install

Application Structure

.
├── build                                   # Sources directory for browsers
│   ├── chrome                              # Chrome sources
│   ├── firefox                             # Firefox sources
│   ├── opera                               # Opera sources
│   └── safari                              # Safari sources
├── dist                                    # Building package directory for browsers
│   ├── chrome                              # Chrome built packages
│   ├── firefox                             # Firefox built packages
│   ├── opera                               # Opera built packages
│   └── safari                              # Safari built packages
├── src                                     # Sources of the extenstion
│   ├── css                                 # Generated css styles from less-files
│   ├── fonts                               # Font files (graphical icons, etc.)
│   ├── icons                               # App icons
│   ├── js                                  # Main Javascript files
│   │   ├── plugins                         # Scripts for plugins
│   │   │   └── inheritance.js              # Script for parent/child plugin
│   │   ├── libs                            # External libraries (jQuery and jQuery UI for drag&drop)
│   │   ├── api.js                          # Scripts with all API methods
│   │   ├── config.js                       # Main extension config script
│   │   ├── helpers.js                      # Helpers for the extenstion
│   │   ├── init.js                         # Init extenstion script
│   │   ├── notification.js                 # Notification API
│   │   └── pop-over.js                     # Pop Over API
│   └── less                                # Main style files
│       ├── plugins                         # Styles for plugins
│       │   └── inheritance.less            # Styles for parent/child plugin
│       ├── fonts.less                      # Styles for fonts
│       ├── options.less                    # Styles for options (for Chrome and Opera)
│       └── style.less                      # Main extenstion styles
├── vendor                                  # Vendor files for browsers
│   ├── chrome                              # Vendor files for Chrome Browser
│   │   ├── data                            # This directory will be moved to `build` directory "as is"
│   │   │   ├── js                          # Vendor scripts directory
│   │   │   │   ├── options.js              # Script for handling Extension Settings page
│   │   │   │   └── settings.js             # Script for load and save setting to Chrome
│   │   │   └── options.html                # Extenstion settings page
│   │   └── manifest.json                   # Main Chrome extension config file
│   ├── firefox                             # Vendor files for Firefox Browser
│   │   ├── data                            # This directory will be moved to `build` directory "as is"
│   │   │   ├── js                          # Vendor scripts directory
│   │   │   │   └── settings.js             # Script for load and save setting to Firefox
│   │   │   └── main.js                     # Main Firefox extension executing file
│   │   ├── helpers                         # Helpers for the vendor
│   │   │   └── configTranform.js           # Script for moving extenstion settings options to the browser
│   │   └── package.json                    # Main Firefox extension config file
│   ├── opera                               # Vendor files for Opera Browser
│   │   ├── data                            # This directory will be moved to `build` directory "as is"
│   │   │   ├── js                          # Vendor scripts directory
│   │   │   │   ├── options.js              # Script for handling Extension Settings page
│   │   │   │   └── settings.js             # Script for load and save setting to Opera
│   │   │   └── options.html                # Extenstion settings page
│   │   └── manifest.json                   # Main Opera extension config file
│   └── safari                              # Vendor files for Safari Browser
│       ├── certs                           # Certificates for building the extenstion for Safari
│       │   ├── apple-intermediate.pem      # Apple Intervediate certificate
│       │   ├── apple-root.pem              # Apple Root certificate
│       │   ├── cert.pem                    # Basic certificate
│       │   └── privatekey.pem              # Private certificate
│       ├── data                            # This directory will be moved to `build` directory "as is"
│       │   ├── js                          # Vendor scripts directory
│       │   │   └── settings.js             # Script for load and save setting to Safari
│       │   └── global.html                 # Global Safari extenstion page for access to extenstion settings
│       ├── helpers                         # Helpers for the vendor
│       │   └── configTranform.js           # Script for moving extenstion settings options to the browser
│       ├── Info.plist                      # Main Safari extension config file
│       └── Settings.plist                  # Extenstion settings template
├── gulpfile.js                             # Gulp file
└── package.json                            # Main config file of the extenstion and package list for npm

Build & Run

You need to use gulp for building the source extension packages for all supported browsers: ​

$ gulp

​After execution of the command unpacked extensions for all target browsers will be located in build directory. Name, version, description and homepage url of extension set automatically based on file package.json.

Run extension in Firefox Nightly:

$ gulp run

Release and Publishing

​ Compile release versions for all supported browsers: ​

$ gulp dist

​ Packed and signed extensions will be located in dist directory.

Warning: to build of ready extension package for Safari we need add certificate files to directory /vendor/safari/certs/. ​ For more information read: Building a Safari Extension.