User Guide



Introduction

The main goal of Extension Maker is to provide users with the ability to create browser extensions without any previous experience in programming or WEB design.With our latest updates, Extension Maker has made it possible for you to build add-ons for Google Chrome, Firefox and Opera.

However, some of our users asked if we could add some advanced features to the program. We know that such small but powerful features will allow you to create more powerful and attractive extensions. So we have added some of these features to the program, at your request. We have tried to give clear descriptions of how to use such advanced features. This means that even if you are not an experienced programmer you will still be able to use them.



1. Basics


1.1. How to Set Up a New Project

To create a new extension, you need to set up a new project first. We will use the term project in the future, which means working with extensions.

To set up a new project you need to choose File → New Project… in the menu, or press Ctrl+N. The wizard dialog box will open up. The wizard will guide you through the process of creating a new project.

New Project Wizard - Main Settings
New Project Wizard – Main Settings
Property NameDescription
Extension name A short, plain text string (no more than 45 characters) that identifies the extension. The name is used in the install dialog, extension management UI, and the store.
Version One to four dot-separated integers identifying the version of this extension. For example, 1.2 or 1.2.8.
Description A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension.
Package Identifier To avoid conflicts with other developers, you should use Internet domain ownership as the basis for your package names (in reverse). For example, applications published by Google start with com.google.
16×16 icon 16×16 icon that represent the extension. It should generally be in PNG format, but also some other formats can be used: BMP, GIF, ICO, and JPEG.
48×48 icon 48×48 icon is used in the extensions management page. It should generally be in PNG format, but also some other formats can be used: BMP, GIF, ICO, and JPEG.
64×64 icon The 64px icon is used in Opera’s extension manager. It can be in SVG, ICO, PNG, GIF or JPG format.
128×128 icon 128×128 icon is used during installation of Google Chrome extension and by the Chrome Web Store. It should generally be in PNG format, but also some other formats can be used: BMP, GIF, ICO, and JPEG.


On the next page of the wizard you will be asked to define some settings for your extension’s button (this is also called Browser Action). The button you are designing will be added to the main toolbar of the browser, on the right of the address bar:

New Project Wizard - Extension Button Settings
New Project Wizard – Extension Button Settings

Here you need specify the title and icon image of your button:

Property NameDescription
Default title Sets the title of the extension’s button. This shows up in the tooltip.
Default icon Extension Button icons can be up to 19 pixels wide and high. Larger icons are resized to fit, but for best results, use a 19-pixel square icon.


On the final page of the wizard you can enable some useful features:

New Project Wizard - Other Add-On Settings
New Project Wizard – Other Add-On Settings
Property NameDescription
Post install URL If not empty, this URL will be opened for the first time after installation of the extension.
Web Property ID Unique Web Property ID for your extension. Should be taken from Google Analytics site. Format: UA-XXXXX-YY.


1.2. The Extension Design Process

When you click Finish in the Project Wizardmain workspace of Extension Maker will appear. Click on the image to enlarge:

Main Workspace Area
Main Workspace Area

Here you can design the popup of the extension that appears when a user clicks on the extension’s button.

To design the popup, drag one of the predefined components from the Toolbox panel into the popup area. The components are then easy to rearrange and design. You can drag and drop components onto the panel to rearrange them. You can also move unnecessary components over to the Trash icon in the bottom left corner of the design area.



2. Components Overview

You will know by now that Extension Maker has a number of predefined components in the Toolbox area. These components are basic building blocks that can be used to design a reach extension in just a few minutes.

See below for a brief explanation of each component, to give you an idea of how to use them. Some components have a number of advanced properties. These can be very useful in certain specific cases. Find out more about this in the Advanced Features section.



Toolbox - Search Box ControlSearch Box gives users the ability to search for specific information on your site.

To insert this component, you need to add it to the design area and edit it. Choose: Action → URL and make your changes.

Toolbox - Search Box ControlFor example, enter: http://mysite.com/search.php?q=. This means that the search term which was entered by the user will be added to the end of the URL.

Other useful properties of this component include:

Property NameDescription
Action → URL URL of the search engine that will be opened in a user’s browser. Entered search term will be added at the end of the URL. So, keep this point in mind when you’re choosing the URL.
Action → Open in Specifies how exactly target URL will be opened in the browser. Possible values: New tab, Current tab and New window.
Placeholder text Text that will be displayed when the cursor is out of the search box.
Logo icon Small image that will be displayed inside the search box at the left side. It is always useful to keep your logo visible somewhere.
Search button icon Icon that will be used for the search button. It can be an image of a loupe, an icon with some text like Go, Search! and so on.


Toolbox - Menu Item ControlMenu Item can be used whenever you need to forward a user particular site. It can be a third party site or a page on your own site.

To insert this component, you need to add it to the design area and edit it. Choose: Action → URL and make your changes.

Menu Item is smart. It is capable of more advanced functions with the help of Event Handler. This feature will be described in the Advanced Features section below.

The most commonly used Menu Itemsettings include:

Property NameDescription
Action → URL URL that will be opened when a user clicks on the control.
Action → Open in Specifies the target URL will be opened in the browser. Possible values: New tab, Current tab and New window.
Text Text that will be displayed on the menu item.
Icon Small image that will be displayed before the label of menu item.
Font You can play with the font of the menu item label to customize your extension.


2.3. Separator

Toolbox - Separator ControlSeparator is a small but useful tool. It can be used to separate different parts of the extension and improve it’s appearance. There are no special settings. If you would like to create a blank separator with no gray line, you can use the Label component with an empty text and transparent background.


2.4. Label

Toolbox - Label ControlLabel can be used to write something on the extension’s panel. It is not a clickable link; a user cannot do any actions with it. It is simple, but can be very useful in some cases. For example, you can add a copyright label at the bottom of the extension. You can also use it to separate different parts of the extension (see the example in section 2.3 above). Label can also be used to create colored bars. To do this, you need to leave the text empty and choose a background color.

Property NameDescription
Text Text that will be displayed on the label.
Font Font that will be used for the label.


2.5. News Feed

Toolbox - NewsFeed ControlNews Feed is a very powerful component. It can be used to display content from any site which has an RSS or Atom feed. Every site wants to deliver new content to its users. Subscriptions are not always convenient, as everyone can receive a lot of emails every day. It is better to have the ability to install a small extension that will help to get notifications out about the latest posts on your site.

The News Feed component has dozens of different settings that will help you to adjust its look and behavior according to your needs. The first setting is to specify the Feed URL of your RSS or Atom feed.

All the other settings determine the appearance of the component. Here is a brief description of the most important settings:

Property NameDescription
Feed URL URL of RSS or Atom feed that should be displayed by the component.
Feed title Feed title to display.
Description length Maximum length of item description. If 0, then full description will be displayed.
Disable output escaping Checked state indicates that special characters (like “<") should be output as is. Unchecked state indicates that special characters (like "<") should be output as "&lt;".
Number of entries Number of feed records to display in the component.
Show item date If checked, the item date will be displayed in the control.
Title length Maximum length of the item’s title. 0 means that the full title be displayed.


2.6. HTML Box

Toolbox - HTML Box ControlThis component was added at the request of users experienced with HTML HTML. HTML Box is like a DIV element with specified boundaries. Note that JavaScript is not allowed in this component. You cannot specify event handlers for HTML elements inside the box. Its main purpose is to provide some design improvements.

Property NameDescription
HTML Code HTML code that will be displayed in the element.


2.7. Image

Toolbox - Image ControlImage can be used to add any image to the extension’s panel. You can create a customized separator or improve the look of other components using the Image component. For example, you can simulate rounded corners for Menu Item at the top or bottom only. There are many other uses for this component, just use your imagination.

Property NameDescription
Path to image You need to specify the path to an image from your computer.
Align X/Y These properties control horizontal and vertical alignment of the image.
Fit width/height These properties allow you to stretch the image to take all space of the component.
Repeat X/Y Repeat the image horizontally or vertically.


2.8. Social Box

Toolbox - SocialBox ControlSocial media networks are very important for any internet project. We believe that social features are essential for most extensions. The Social Box component allows you to offer links to a number of the most important social media sites, and specify your target URLs for each button. You can control the size of the images and hide any unnecessary icons.

Property NameDescription
Horizontal alignment Allow you to align social images horizontally.
Icon gap Controls free space between icons.
Icons size Allows to choose one of predefined values for icons size.


3. Advanced Features

Extension MakerMaker was created to give a user the ability to create browser extensions without any technical background or expertise. However we know that there are occasions when it is necessary to add more technical functionality. So we have decided to add some advanced features which will make our program more powerful and useful. We have tried to provide clear descriptions of these features below.

3.1. Search Box: How to Send a POST Request

Some search engines are designed to receive POST requests only. This means that a search request can only be sent from a web page. It is impossible to use the search engine by opening a URL in in a browser without the necessary parameters: http://mysearchengine.com/search.php?searchTerm=text+to+search.

Let’s assume that we have a search engine which accepts POST requests only. This is how it should be configured:

Property NameDescription
Search engine URL http://mysearchengine.com/search.php.
Search parameter name searchTerm
Additional parameters contex=site, version=1.1


Now lets see exactly how Search Box should be configured to work with this search engine:

Take into account that we have used the ${searchTerm} string as the value for the search parameter. When a user clicks Search, this string will be replaced with a real search query.


3.2. Search Box: How to Use the Handler Function

You may need to develop an add-on for a site such as Alexa.com that displays user information about other websites. The URL that should be opened by the extension looks like this: http://siteinfo.com/?site=<URL_OF_THE_SITE>. One serious limitation of the site is that the URL should always start with http:// or https://. But it would be very inconvenient for a user to type http:// into a Search Box everytime.

We can use the Handler function to make your add-on more user-friendly. First, you need to write a small JavaScript function which will add http:// to the search term when necessary.

Open Script editor (Ctrl+Shift+S) and write the function as follows:

Note that the function is defined in an asynchronous manner. You should implement your Event Handler functions in the same way. If not, your extension will not work correctly.

We are planning a lot of interesting features for this function in upcoming versions. That is why we are using the asynchronous style for now.


Now you can simply choose the already-defined addHttp() function as the Handler function for your Search Box.

The Handler function function can also be used with the Menu Item component. There is just one small difference. In this case, Action → URL of the Menu Item will be the first argument in the function.

If you are interested in reading more about the interesting features of Extension Maker, Read our Blog.