The exciting journey of Tizen continues with an endeavor to make Tizen app development seamless and offer advanced functionalities by adding new features while polishing up the existing ones.

With rapid development a norm that powerful web technologies come to exist, and the same has been the case with Tizen web apps. Have you ever thought of leveraging your web apps further by adding new functionalities? Yes, you can do that with the help of an addon. The web app addons execute with elevated privileges to provide users with additional functionalities.

This blog walks you through understanding “What an addon is?” and “How to develop an addon?”.

Addon: The concept

An addon is a JavaScript snippet with a manifest file that allows additional common functionalities such as pop-up to web applications. Addons are small software packages that enhance and customize the functionality of a web app.

Fundamentally, web apps are bound by the Same Origin Policy (SOP) and cannot access other web application’s data, which is where addons come in very handy. Unlike the web apps, addons run as part of web apps, you cannot run the addons independently.

Nonetheless, using the addons, you can empower a web app to bypass SOP and extend on capabilities of app functionalities. Addon enables users to tailor functionality and behavior to individual needs or preferences. It is built on web technologies such as HTML, JavaScript, and CSS.

An addon must serve a single purpose that is narrowly defined and easy to understand. A single addon can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.

At this point, you must be excited to know how you can develop an addon, let us quickly take a deep dive in the development process.

The design of an addon follows the web application’s life cycle. It can customize an action when each web app’s life cycle event such as Prelaunch, Resume, Suspend, or Quit occur.

The following portrays the basic framework of addons:

• Configuration file: You configure various settings for the addon.
• Event: You can use several events from a web application to get the timing to perform what you want using the addon.
• Mechanism: Addons work on event-driven invocation. Each addon registers its callbacks to events that are pre-defined in Web Runtime JS (WRTjs). Callbacks are invoked whenever the registered events occur during the Web application’s life cycle.
• Packaging: Generate a package for addon using Tizen Studio using the addon in config.xml file.
• Management: Manage List Up, Activation (On), Deactivation (Off), and uninstallation of addons.

For more detailed information, see Web Application Addon.

Develop addon

You must already be aware that an addon is not a web application. However, developing an addon is quite similar to developing a Tizen web application.

The following instructions help you to create and run a basic addon:

Step 1: Create an addon project

To know how to create an addon project, see Create addon project. You can view your project in the Project Explorer view of Tizen Studio.

The addon project includes the following essential files and folders:

• shared/res: Folder that contains addon files, including the manifest file and JavaScript files.
• config.xml:  This is the addon configuration file that helps in installing and launching the addon.

Step 2: Manage addon configuration

To know how to manage your addon configuration, see manage addon configuration. This step guides you with configuring the addon by viewing and modifying the configuration details using the following tabs in config.xml file:

• Overview: Defines the general information about an addon, such as the name and icon of the Addon.
• Features: Defines the required software and hardware features. This information is used for addon filtering in the Tizen Store.
• Privileges: Defines the security-sensitive APIs, or API groups that are accessed and used by the addon.
• Localization: Defines the localized values for the addon name, description, and license.
• Policy: Requests network resource permissions to access external network resources.
• Preferences: Defines name-value pairs that can be set or retrieved using the addon.
• Tizen: Edits the Tizen schema extension properties of the addon.
• Source: View and edits the source code of the config.xml file. Changes made and saved on the other tabs are reflected in the source code and vice versa.

Step 3: Build your addon package

To know how to build your addon package, see build addon package. The build process performs a validation check and compiles your JavaScript and CSS file, and once the addon is built, you can run it.

Step 4: Run addon

To know how to run your addon, see build addon package. You can run your addon on a emulator or on a real target device:

• Running on emulator

• Running on Target device

Summarizing addons

Addons can customize an action and get notified with respect to each web application life cycle event such as Prelaunch, Resume, Suspend, or Quit, as they register their callback.

Addons utilize the Web Runtime JS that manages and controls an addon with respect to the whole application life cycle from the start to the end. Different Addon APIs are provided to support the way to handle the window in both the browser process and the renderer process.  

So, what are you waiting for, get started, and enhance your web app features with addons, take your web apps to the next level of usage.