Learn how to set up an extension that allows you to change the start screen for new pages.
With the Travelpayouts Chrome extension, the user can change the home screen for new pages. The extension contains information about the cost of travel from the user’s city to a random city.
This article covers the extension (expansion example), its configuration and promotion.
After installing the extension, the new page’s home screen contains:
- Logo leads to the Aviasales home page by default. The link and image can be changed in the expansion configuration tool (see below)
- Update button — Shows another city
- Settings button — Opens the expansion settings
- Photo of the destination city — The photo is unique for each city and cannot be changed
- Flight Price to destination city — Link to search for air tickets to the specified city. Can be changed in the expansion configuration tool in the partner’s White Label
- City and country of the selected destination
- Departure city — Specified by the user in the extension settings or detected by Chrome automatically (using geoAPI)
- Headings of articles from RSS feed — The address of the feed can be changed in the extension configuration tool
The user can click on the settings icon to open a menu with the following options:
- Set up the language
- Set up the currency of the flight cost — The most popular currencies are available
- Change the departure city
- Delete certain cities from the General List of Destination Cities
Configuring the expansion
To change the expansion configuration, follow these steps:
- Download the extension archive or make a repository fork on Github (see the documentation on Github for more information on project building).
- Unpack the archive.
- In the root directory of the extension, open and change the config.js file (any text editor, such as Notepad, will do):
- Marker is an affiliate marker
- Host — The address of the site where the search will be run. Replace it with the address of your White Label or leave it unchanged so that the search result opens at Aviasales.com (or other Aviasales websites). Address input format: address_of_your_white_label/flights — without http://
- Host_logo — Logo link to the Aviasales website or your White Label
- RSS — A link to your site’s RSS feed. If you change the link to the RSS feed, you will need to change the domain (storage parameter) in the manifest.json file
- Go to the img folder and change the logo.png file to your logo.
- Change the name and description of the extension in the messages.json file (located in \_locales\en folder).
- Convert the modified root directory to the ZIP format.
Now everything is ready to promote your own expansion. You have two options:
- Place a link to the archive with the extension and a review article on your site, in which you describe this extension
- Upload the extension to the Chrome Web Store
The first option requires no explanation, users will download the application and install it to the browser.
As for the extension store, you will need to publish the extension to the Chrome Web Store yourself. If this is your first time to do this, be prepared to pay $5 for uploading the extension.
In Chrome, go to the Web Store and sign in using your Google account (if you don’t have one, you’ll need to create one).
Go to the Developer Dashboard section.
If this is your first time to sign in as a developer, you will need to pay $5 to be able to download extensions. To do this, click on Pay this fee now and follow the instructions of the system. If payment was made earlier, skip this step.
After payment, click on Add new item.
In the opened window, upload the ZIP file and follow the steps specified in the Upload Item List.
Once you have successfully completed all the steps, the extension will appear in the Chrome Web Store. You will be able to share it via a direct link to the expansion page in the Web Store.