This article describes how to use the MoEngage Web SDK inside your browser extensions. You can integrate the MoEngage Web SDK within your browser extension to collect analytics and track user events and attributes.
| info |
Note For now, we support only Google Chrome extensions. |
Analytics
MoEngage supports only the analytics channel in extensions for now. You can track events attributes and user identities.
Permissions
No additional permissions are required in your manifest.json when integrating the MoEngage SDK as a local file bundled with your extension.
Since the Google Chrome extension does not allow to fetch a script from an external URL, you must make a local copy of the script and place it in your project folder.
| info |
Note For WebPush Notification Support in Chrome Extension, "notification" permission is required. |
Getting Started
| info |
Note Before you get started, ensure that you have read the Initial SDK setup guide of Web SDK to learn more about our JavaScript integration in general. |
To integrate MoEngage Web SDK, you will first need to download a copy of the latest JavaScript library. You can do this by downloading it directly from MoEngage CDN.
Find the CDN script based on your dashboard host. Right-click and download to save the file.
| Dashboard Host | CDN URL |
|---|---|
| dashboard-01.moengage.com | https://cdn.moengage.com/release/dc_1/moe_webSdk.min.latest.js |
| dashboard-02.moengage.com | https://cdn.moengage.com/release/dc_2/moe_webSdk.min.latest.js |
| dashboard-03.moengage.com | https://cdn.moengage.com/release/dc_3/moe_webSdk.min.latest.js |
| dashboard-04.moengage.com | https://cdn.moengage.com/release/dc_4/moe_webSdk.min.latest.js |
| dashboard-06.moengage.com | https://cdn.moengage.com/release/dc_6/moe_webSdk.min.latest.js |
After the download is complete, ensure that you copy the moe_webSdk.min.latest.js file somewhere into your extension’s directory.
Extension Pop-Up Windows
To add MoEngage SDK to an extension pop-up window, reference the local JavaScript file in your popup.html, as you would on a regular website.
<html>
<!-- Add the Moengage library-->
<script src="/relative/path/to/moe_webSdk.min.latest.js"></script>
<title>popup.html</title>
</html>Initialization
After adding MoEngage SDK to an extension pop-up window, you can initialize the library as usual.
Because cookies are not supported in browser extensions, you can disable cookies by initializing with disableCookies: true.
window.Moengage = moe({
app_id: "XXXXXXXXXXXXXXXXX",
debug_logs: 0,
disableCookies: true
});
Web Push Integration
To enable Web Push Notifications in the Chrome extension, ensure you have performed the SDK integration steps and that the SDK is working properly.
Permissions
Notification Permission is required with manifest_version: 3 in the manifest.json file.
{
"background": {
"service_worker": "background.js"
},
"permissions": ["notifications"],
"manifest_version": 3,
}Integration
To enable Web Push in your extension, you must first download a copy of the latest service worker file. You can do this by downloading it directly from MoEngage CDN.
Find the CDN script based on your dashboard host. Right-click and download to save the file.
| Dashboard Host | CDN URL |
|---|---|
| dashboard-01.moengage.com | https://cdn.moengage.com/release/dc_1/versions/2/serviceworker_chrome_ext_cdn.js |
| dashboard-02.moengage.com | https://cdn.moengage.com/release/dc_2/versions/2/serviceworker_chrome_ext_cdn.js |
| dashboard-03.moengage.com | https://cdn.moengage.com/release/dc_3/versions/2/serviceworker_chrome_ext_cdn.js |
| dashboard-04.moengage.com | https://cdn.moengage.com/release/dc_4/versions/2/serviceworker_chrome_ext_cdn.js |
| dashboard-06.moengage.com | https://cdn.moengage.com/release/dc_6/versions/2/serviceworker_chrome_ext_cdn.js |
After the download is complete, copy the serviceworker_chrome_ext_cdn.js file into your background.js extension’s file and make sure the file is linked to your service_worker inside manifest.json.
Please take a look at the sample project for better understanding.