Creating the Extension

Before starting, you need to download and install the Demo application available on the Forge component page of Chrome Extension Connector.

Once you have installed it, open the module ChromeExtensionDemo. In this module, you will find a ZIP file in the Resources folder. Right click, save it on your local drive and unpack the compressed file in its own directory.

On Google Chrome, go to chrome://extensions/, enable Developer Mode, then click on Load unpacked extension and select the folder you just created by unpacking the ZIP file.

Don't forget to click the Reload button whenever you make changes to the extension code.

Adjusting the Manifest File

Inside your extension folder, you will find the manifest.json file. Open it and find the "content_scripts":"matches" array (line 24).

Add to the array all the domains in which your extension should work on. It is possible to use wildcards (*). For more information on Match patterns, click here.

Setting the Configuration File

In your extension folder, open configs.json and, if desired, change its values accordingly:

Further Customizing your Extension

Go to your manifest.json file and change the "name" and "description" fields in order to make your extension more unique. This will be seen by users after they install your extension.

You can change your extension icon by replacing the PNG files in the common/images/ directory.

Demo Events

The Demo application comes with 4 sample events:

• Set Font Size
• Block X-Ray
• WhatsApp Reaction
• Open in Service Studio

These events can be used as a template for your own custom events, which is discussed in more detail in the Creating Events section.

Set Font Size

This changes the Font Size of the currently viewed web page to the value specified in the input.

Block X-Ray

When used, injects CSS code that highlights all Blocks on the page. Only works when viewing an OutSystems Reactive page.

WhatsApp Reaction

Prank script used for repeatedly adding a random reaction to the last chat message on WhatsApp Web. Be careful, though, as you might lose some friends by using this!

Requires adding "https://web.whatsapp.com/*" to the "content_scripts":"matches" array in manifest.json.

Open in Service Studio

Opens the currently viewed web page in Service Studio. Only works when viewing a page from a Traditional Web module.

Creating Events

Events are script files that get injected in the current page that the user is viewing when triggered by OutSystems. The event name is equal to its file name (minus the .js extension) — keep this in mind when creating your own event names.

Open the events/ folder in your extension directory. You will find JavaScript files for the sample events that are bundled with the Demo.

Make a copy of SetFontSize.js, rename the copied file to MyCustomEvent.js and open it in a text editor. You will find the following script:

export default async ( message, metadata ) => {

    const fontSize = parseInt( message );

    if ( ! isNaN( fontSize ) && fontSize > 0 ) {
        document.body.style.setProperty( "font-size", fontSize + "px" );
    }
    else {
        document.body.style.removeProperty( "font-size" );
    }
}

Unless you really know what you're doing, it's recommended to preserve the first line of the script. Your script must export a default function in order to work correctly.

All event scripts receive the following two input parameters:

For our exercise, try replacing your function contents with the following and save:

export default async ( message, metadata ) => {
    alert( message );
}

Now, open the ChromeExtensionDemo module in Service Studio, place a button in the HomeScreen with an OnClick handler as follows:

As a result, you should see an alert with the message you typed in the Client Action.