OpenTelemetry Browser Extension

available on:

...or build it yourself!

About

Note

This project is in early development. Please forgive (or feel free to contribute) any missing documentation.

A Plasmo-based browser extension that automatically instruments webpages with OpenTelemetry.

Download it, refresh your pages, and automatically start emitting OTLP logs and traces.

Preview

Features

• Automatically instrument your webpages to collect traces and logs, sent to an OTLP-compatible collector
• No content-security policy errors! Works around typical CSP limitations by making fetch requests from the background script instead of the webpage
• Propagate b3 and w3c trace context to websites of your choosing (matched by regular expressions)

Browser compatibility

Because this extension relies on the use of chrome.scripting.executeScript({ ... , world: 'MAIN' }), it is only compatible with browsers which support the MAIN execution world as a parameter. Luckily, this seems to include every browser except Firefox (where development to support the feature is in-progress).

Developing

Initialize submodules (we use a custom build of Plasmo):

git submodule update --init --recursive

Install dependencies:

pnpm install
# ... and then for some reason I haven't been able to dig into yet...
pnpm install @plasmohq/storage

Start the OpenTelemetry stack (Grafana + Quickwit + opentelemetry-collector-contrib): ^{(optional if you have your own)}

docker compose up -d

Run the development server:

pnpm dev

Then, open your browser and load the appropriate development build. For example, if you're developing for Chrome, using manifest v3, use: build/chrome-mv3-dev.

Making a production build

Run the following:

pnpm build

or, for targeting a specific browser:

pnpm build:chrome
# or
pnpm build:safari
# or
pnpm build:edge

Then, follow the same steps as with running the development server, but load the appropriate production build from the build directory, i.e: build/chrome-mv3-prod.

Safari

Safari requires a bit of extra work. After building the extension, run the following commands to convert the extension to a an XCode project and apply necessary patches:

pnpm convert:safari
pnpm patch:safari

Then, build the extension in XCode (using the MacOS target), and enable it in Safari

Note

Safari requires extensions to be signed before they can be installed. You can either sign the extension yourself, or load it as an unsigned extension after enabling "allow unsigned extensions" in Safari's developer settings.