Use the JavaScript SDK service worker in browser extensions and serverless runtime.
4 minute read
RudderStack’s JavaScript SDK provides a service worker that you can use in browser extensions and serverless runtimes. It exposes the same interface and features as the RudderStack Node.js SDK.
Install the package
To install the package, run the following command:
You can use the RudderStack service worker npm package as a background script. To do so, place it in your Chrome extension resources by following either of these approaches:
Copy the file from the node modules and place it as a part of the resources.
Use a JS bundler and bundle it as a part of your service worker script.
You need to enable relevant permissions in the manifest file according to the required capabilities and allowed connections.
Also, setting the background script type as a module is recommended, as it allows to import the script as ESM.
You can also react to events available in the background scripts using the Chrome API.
The following example tracks any URL changes:
// If file is copied from node_modules/@rudderstack/analytics-js-service-worker/npm/esm/index.js in extension resources folder
import{Analytics}from"./rudderAnalytics.js";// If the package is imported directly as umd and then bundled in the background script
import{Analytics}from"@rudderstack/analytics-js-service-worker/umd/index.js";// If the package is imported directly as es-module and then bundled in the background script
import{Analytics}from"@rudderstack/analytics-js-service-worker";
To use the RudderStack Analytics JavaScript SDK as a content script, place it in your Chrome extension resources by following either of these approaches:
Download the file and place it as a part of the resources.
Use a JS bundler and bundle it as part of your content script.
You need to enable relevant permissions in the manifest file according to the required capabilities and allowed connections.
To use the JavaScript SDK service worker in Vercel Edge functions, start with the sample and integrate the SDK in the app/api/edge-function-sample/route.ts file:
This site uses cookies to improve your experience while you navigate through the website. Out of
these
cookies, the cookies that are categorized as necessary are stored on your browser as they are as
essential
for the working of basic functionalities of the website. We also use third-party cookies that
help
us
analyze and understand how you use this website. These cookies will be stored in your browser
only
with
your
consent. You also have the option to opt-out of these cookies. But opting out of some of these
cookies
may
have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This
category only includes cookies that ensures basic functionalities and security
features of the website. These cookies do not store any personal information.
This site uses cookies to improve your experience. If you want to
learn more about cookies and why we use them, visit our cookie
policy. We'll assume you're ok with this, but you can opt-out if you wish Cookie Settings.