14 | You can turn on Browser Ext for OpenTelemetry’s extension in Safari Extensions preferences.
15 |Browser Ext for OpenTelemetry’s extension is currently on. You can turn it off in Safari Extensions preferences.
16 |Browser Ext for OpenTelemetry’s extension is currently off. You can turn it on in Safari Extensions preferences.
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/storage/local/index.test.ts: -------------------------------------------------------------------------------- 1 | import { hasMixin } from "ts-mixer"; 2 | import { InternalStorage } from "./internal"; 3 | import { Configuration } from "./configuration"; 4 | import { describe } from "mocha"; 5 | import { assert } from "chai"; 6 | import { LocalStorage } from "."; 7 | 8 | describe('LocalStorage', () => { 9 | 10 | const test = new LocalStorage() 11 | 12 | it('should be an instance of Configuration', () => { 13 | assert(hasMixin(test, Configuration)) 14 | }) 15 | 16 | it('should be an instance of InternalStorage', () => { 17 | assert(hasMixin(test, InternalStorage)) 18 | }) 19 | 20 | it('should have the properties and default values of Configuration and InternalStorage', () => { 21 | const configurationKeys = Object.keys(new Configuration()) 22 | const internalStorageKeys = Object.keys(new InternalStorage()) 23 | 24 | assert.containsAllKeys(test, [...configurationKeys, ...internalStorageKeys]) 25 | 26 | configurationKeys.forEach(key => { 27 | assert.deepEqual(test[key], new Configuration()[key]) 28 | }) 29 | 30 | internalStorageKeys.forEach(key => { 31 | assert.deepEqual(test[key], new InternalStorage()[key]) 32 | }) 33 | }) 34 | }) -------------------------------------------------------------------------------- /src/utils/serde.ts: -------------------------------------------------------------------------------- 1 | const userFacingReplacer = (key, value) => { 2 | if (value instanceof Map) { 3 | const object = {}; 4 | for (let [k, v] of value) { 5 | object[k] = v; 6 | } 7 | return object; 8 | } 9 | return value; 10 | } 11 | 12 | export const replacer = (key, value) => { 13 | if (value instanceof Map) { 14 | return { 15 | dataType: 'Map', 16 | value: Array.from(value.entries()), // or with spread: value: [...value] 17 | }; 18 | } 19 | return value; 20 | } 21 | 22 | export const reviver = (_, value) => { 23 | if (typeof value === 'object' && value !== null) { 24 | if (value.dataType === 'Map') { 25 | return new Map(value.value); 26 | } 27 | } 28 | return value; 29 | } 30 | 31 | export const ser =
3 |
--------------------------------------------------------------------------------
/generated/safari-xcode/Browser Ext for OpenTelemetry/Browser Ext for OpenTelemetry Extension/SafariWebExtensionHandler.swift:
--------------------------------------------------------------------------------
1 | //
2 | // SafariWebExtensionHandler.swift
3 | // Browser Ext for OpenTelemetry Extension
4 | //
5 | // Created by theodore brockman on 7/22/24.
6 | //
7 |
8 | import SafariServices
9 | import os.log
10 |
11 | class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling {
12 |
13 | func beginRequest(with context: NSExtensionContext) {
14 | let request = context.inputItems.first as? NSExtensionItem
15 |
16 | let profile: UUID?
17 | if #available(iOS 17.0, macOS 14.0, *) {
18 | profile = request?.userInfo?[SFExtensionProfileKey] as? UUID
19 | } else {
20 | profile = request?.userInfo?["profile"] as? UUID
21 | }
22 |
23 | let message: Any?
24 | if #available(iOS 15.0, macOS 11.0, *) {
25 | message = request?.userInfo?[SFExtensionMessageKey]
26 | } else {
27 | message = request?.userInfo?["message"]
28 | }
29 |
30 | os_log(.default, "Received message from browser.runtime.sendNativeMessage: %@ (profile: %@)", String(describing: message), profile?.uuidString ?? "none")
31 |
32 | let response = NSExtensionItem()
33 | if #available(iOS 15.0, macOS 11.0, *) {
34 | response.userInfo = [ SFExtensionMessageKey: [ "echo": message ] ]
35 | } else {
36 | response.userInfo = [ "message": [ "echo": message ] ]
37 | }
38 |
39 | context.completeRequest(returningItems: [ response ], completionHandler: nil)
40 | }
41 |
42 | }
43 |
--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
1 | name: Unit tests
2 | on:
3 | pull_request:
4 | branches: [main]
5 |
6 | jobs:
7 | test:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - uses: actions/checkout@v4
11 | with:
12 | submodules: recursive
13 | - uses: actions/setup-node@v4
14 | with:
15 | node-version: '20'
16 | - uses: pnpm/action-setup@v4
17 | name: Install pnpm
18 | with:
19 | run_install: false
20 | - name: Get pnpm store directory
21 | shell: bash
22 | run: |
23 | echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
24 | - uses: actions/cache@v4
25 | name: Setup pnpm cache
26 | with:
27 | path: ${{ env.STORE_PATH }}
28 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
29 | restore-keys: |
30 | ${{ runner.os }}-pnpm-store-
31 | - run: pnpm install
32 | - run: pnpm test:unit
33 | - run: pnpm build
34 | auto-approve:
35 | runs-on: ubuntu-latest
36 | needs: test
37 | permissions:
38 | contents: write
39 | pull-requests: write
40 | if: ${{ github.actor == 'dependabot[bot]' }}
41 | steps:
42 | - name: Dependabot metadata
43 | id: metadata
44 | uses: dependabot/fetch-metadata@v1
45 | with:
46 | github-token: '${{ secrets.GITHUB_TOKEN }}'
47 | - name: Enable auto-merge for Dependabot PRs
48 | run: |
49 | gh pr merge --auto --squash "$PR_URL"
50 | gh pr review --approve "$PR_URL"
51 | env:
52 | PR_URL: ${{github.event.pull_request.html_url}}
53 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
54 |
--------------------------------------------------------------------------------
/generated/safari-xcode/Browser Ext for OpenTelemetry/Browser Ext for OpenTelemetry/Assets.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "size" : "16x16",
5 | "idiom" : "mac",
6 | "filename" : "mac-icon-16@1x.png",
7 | "scale" : "1x"
8 | },
9 | {
10 | "size" : "16x16",
11 | "idiom" : "mac",
12 | "filename" : "mac-icon-16@2x.png",
13 | "scale" : "2x"
14 | },
15 | {
16 | "size" : "32x32",
17 | "idiom" : "mac",
18 | "filename" : "mac-icon-32@1x.png",
19 | "scale" : "1x"
20 | },
21 | {
22 | "size" : "32x32",
23 | "idiom" : "mac",
24 | "filename" : "mac-icon-32@2x.png",
25 | "scale" : "2x"
26 | },
27 | {
28 | "size" : "128x128",
29 | "idiom" : "mac",
30 | "filename" : "mac-icon-128@1x.png",
31 | "scale" : "1x"
32 | },
33 | {
34 | "size" : "128x128",
35 | "idiom" : "mac",
36 | "filename" : "mac-icon-128@2x.png",
37 | "scale" : "2x"
38 | },
39 | {
40 | "size" : "256x256",
41 | "idiom" : "mac",
42 | "filename" : "mac-icon-256@1x.png",
43 | "scale" : "1x"
44 | },
45 | {
46 | "size" : "256x256",
47 | "idiom" : "mac",
48 | "filename" : "mac-icon-256@2x.png",
49 | "scale" : "2x"
50 | },
51 | {
52 | "size" : "512x512",
53 | "idiom" : "mac",
54 | "filename" : "mac-icon-512@1x.png",
55 | "scale" : "1x"
56 | },
57 | {
58 | "size" : "512x512",
59 | "idiom" : "mac",
60 | "filename" : "mac-icon-512@2x.png",
61 | "scale" : "2x"
62 | }
63 | ],
64 | "info" : {
65 | "version" : 1,
66 | "author" : "xcode"
67 | }
68 | }
--------------------------------------------------------------------------------
/src/scripts/injectpackage-env/main.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env -S pnpm tsx
2 |
3 | import { spawn } from 'child_process'
4 | import { readFileSync } from 'fs'
5 | import { parse as parseYaml } from 'yaml'
6 | import { join } from 'path'
7 | import packageJson from '../../../package.json'
8 |
9 | const lockfilePath = join(__dirname, '../../../pnpm-lock.yaml')
10 | const lockfileContent = readFileSync(lockfilePath, 'utf8')
11 | const lockfile = parseYaml(lockfileContent)
12 |
13 | // Parse pnpm-lock.yaml to get the resolved version of @opentelemetry/sdk-trace-web
14 | function getOtelSdkVersion(): string {
15 | try {
16 | // Look for the resolved version in the importers section
17 | const dependencies = lockfile?.importers?.['.']?.dependencies
18 | const otelSdkEntry = dependencies?.['@opentelemetry/sdk-trace-web']
19 |
20 | if (otelSdkEntry?.version) {
21 | return otelSdkEntry.version
22 | }
23 |
24 | // Fallback to hardcoded version if parsing fails
25 | console.warn('Could not parse @opentelemetry/sdk-trace-web version from pnpm-lock.yaml, using fallback')
26 | return '2.1.0'
27 | } catch (error) {
28 | console.warn('Error reading pnpm-lock.yaml:', error)
29 | return '2.1.0'
30 | }
31 | }
32 |
33 | process.env.PLASMO_PUBLIC_PACKAGE_VERSION = packageJson.version
34 | process.env.PLASMO_PUBLIC_PACKAGE_NAME = packageJson.name
35 | process.env.PLASMO_PUBLIC_OTEL_SDK_VERSION = getOtelSdkVersion()
36 |
37 | const cmd = spawn(process.argv.slice(2).join(" "), { shell: true });
38 |
39 | cmd.stdout.on('data', (data) => {
40 | process.stdout.write(`${data}`);
41 | });
42 |
43 | cmd.stderr.on('data', (data) => {
44 | process.stderr.write(`${data}`);
45 | });
46 |
--------------------------------------------------------------------------------
/src/storage/local/configuration/backend.ts:
--------------------------------------------------------------------------------
1 | import { assignPartial } from "~utils/generics"
2 |
3 | export type BackendConfigurationType = {
4 | matchPatterns: string[]
5 | traceCollectorUrl: string
6 | logCollectorUrl: string
7 | // metricsEnabled: boolean
8 | // metricCollectorUrl: string
9 | attributes: Map👋 Welcome! / 📚 README
4 |5 | Thanks for taking the time to check out the project. If you feel the urge, please consider contributing to the 6 | project or sponsoring the developer. 7 |
8 |
9 |
10 | Don't see any data here?
11 | Check out the
12 | FAQ.
13 |
Demo
15 |This dashboard is meant to serve as a basic demonstration of the kind of queries and visualizations you can make 16 | with some of the data you collect with the extension.
17 |How to query the data
18 |The data in this dashboard primarly leverages Quickwit. Quickwit supports a 19 | Lucene-like query 20 | language (and Elasticsearch-search compatible API) which 21 | you can learn 22 | more about here.
23 | 24 |At the top of the dashboard you can also filter by log and trace attributes, which will automatically apply to 25 | the 26 | related dashboard visualizations.
27 |
4 |
17 |
18 | ## Features
19 |
20 | - Instruments selected webpages to **generate logs and traces**, sent to an OTLP-compatible of _your_ choosing
21 | - Choose from the available automatic instrumentations (or [contribute your own](contributing.md))
22 | Available on:
5 |
6 | 
7 | |
8 | 
9 | |
10 | 
11 | |
12 | 
13 | |
14 | ...or build it yourself!
15 |
23 |
25 | - Choose where and how you want it to run! Don't worry about the extension tracking every single webpage, use [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) (ex. `https://
27 |
29 | - No content-security policy errors! Works around typical CSP limitations by making `fetch` requests from the background script instead of the webpage 30 | - Propagate b3 and w3c trace context to websites of your choosing (matched by regular expressions) 31 | 32 | ## Browser compatibility 33 | 34 | This extension is compatible with [all major browsers](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/executeScript#browser_compatibility) as of Firefox 128! 🎉 35 | 36 | 37 | 38 | 39 | ## Security considerations 40 | 41 | > [!WARNING] 42 | > You probably shouldn't run this extension on webpages you don't trust 43 | 44 | ### Why? 45 | 46 | The extension background script exports any Protobuf-encoded OTLP data that it receives from the injected content script that it's able to parse. 47 | 48 | While some mitigations are implemented, the data can always be tampered with by any malicious Javascript running in the same context as the content script, and as such the integrity of the data cannot be guaranteed. This may result in minor frustrations like storing a bunch of garbage or worse depending on how your backend decodes Protobuf data. 49 | 50 | So, just as a general safety measure, it's probably best if you don't allow the extension to run in untrusted pages (and you should kinda generally avoid running code in untrusted webpages if you aren't already, anyhow). 51 | 52 | ### Can it be fixed? 53 | 54 | Probably not in the near future. Unless browsers expose telemetry themselves, there's no way for the instrumentation to both run in an isolated context as well as gather the desired data. 55 | 56 | ## Developing 57 | 58 | Clone the repository: 59 | 60 | ```bash 61 | git clone https://github.com/tbrockman/browser-extension-for-opentelemetry 62 | ``` 63 | 64 | Install dependencies: 65 | 66 | ```bash 67 | pnpm install 68 | ``` 69 | 70 | Start the OpenTelemetry stack (Grafana + Quickwit + `opentelemetry--contrib`): (optional if you have your own) 71 | 72 | ```bash 73 | docker compose up -d 74 | ``` 75 | 76 | Run the development server: 77 | 78 | ```bash 79 | pnpm dev 80 | # or for targetting a browser other than Chrome (the default) 81 | pnpm dev --target=edge-mv3 82 | ``` 83 | 84 | 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`. 85 | 86 | ## Making a production build 87 | 88 | Run the following: 89 | 90 | ```bash 91 | pnpm build 92 | ``` 93 | 94 | or, for targeting a specific browser: 95 | 96 | ```bash 97 | pnpm build:chrome 98 | # or 99 | pnpm build:safari 100 | # or 101 | pnpm build:edge 102 | # or 103 | pnpm build:firefox 104 | ``` 105 | 106 | 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`. 107 | 108 | ### Safari 109 | 110 | Safari requires a bit of extra work. After building the extension, run the following commands to convert the extension to a an XCode project: 111 | 112 | ```bash 113 | pnpm convert:safari 114 | ``` 115 | 116 | Then, build the extension in XCode (using the MacOS target), and enable it in Safari. 117 | 118 | > [!NOTE] 119 | > 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. 120 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-extension-for-opentelemetry", 3 | "displayName": "Browser Extension for OpenTelemetry", 4 | "version": "0.0.21", 5 | "description": "A browser extension for automatically instrumenting webpages using OpenTelemetry", 6 | "author": "Theodore Brockman", 7 | "packageManager": "pnpm@9.10.0", 8 | "scripts": { 9 | "build": "npm-run-all build:safari build:chrome build:edge build:opera build:firefox", 10 | "build:chrome": "tsx src/scripts/injectpackage-env/main.ts plasmo build --target=chrome-mv3 --zip --hoist", 11 | "build:firefox": "tsx src/scripts/injectpackage-env/main.ts plasmo build --target=firefox-mv3 --zip --hoist", 12 | "build:edge": "tsx src/scripts/injectpackage-env/main.ts plasmo build --target=edge-mv3 --zip --hoist", 13 | "build:safari": "tsx src/scripts/injectpackage-env/main.ts plasmo build --target=safari-mv3 --zip --hoist", 14 | "convert:safari": "cd build && xcrun safari-web-extension-converter safari-mv3-prod --project-location ../generated/safari-xcode/ --app-name 'Browser Ext for OpenTelemetry' --bundle-identifier 'com.theo.Browser-Extension-for-OpenTelemetry' --macos-only", 15 | "build:opera": "tsx src/scripts/injectpackage-env/main.ts plasmo build --target=opera-mv3 --zip --hoist", 16 | "dev": "tsx src/scripts/injectpackage-env/main.ts plasmo dev", 17 | "clean": "rm -fr build", 18 | "test": "pnpm test:unit", 19 | "test:unit": "mocha --require mocha-suppress-logs 'src/**/*.test.ts'", 20 | "generate:jsonschema": "tsx src/scripts/generate-jsonschema/main.ts" 21 | }, 22 | "dependencies": { 23 | "@codemirror/autocomplete": "^6.18.4", 24 | "@codemirror/commands": "^6.8.0", 25 | "@codemirror/lang-json": "^6.0.1", 26 | "@codemirror/language": "^6.10.8", 27 | "@codemirror/lint": "^6.8.4", 28 | "@codemirror/state": "^6.5.2", 29 | "@codemirror/view": "^6.36.2", 30 | "@lezer/common": "^1.2.3", 31 | "@lezer/highlight": "^1.2.1", 32 | "@lezer/json": "^1.0.3", 33 | "@mantine/core": "^8.3.1", 34 | "@mantine/hooks": "^8.3.1", 35 | "@opentelemetry/api-logs": "^0.205.0", 36 | "@opentelemetry/auto-instrumentations-web": "^0.51.0", 37 | "@opentelemetry/context-zone": "^2.1.0", 38 | "@opentelemetry/core": "^2.1.0", 39 | "@opentelemetry/exporter-logs-otlp-proto": "^0.205.0", 40 | "@opentelemetry/exporter-trace-otlp-proto": "^0.205.0", 41 | "@opentelemetry/instrumentation": "^0.205.0", 42 | "@opentelemetry/instrumentation-document-load": "^0.50.0", 43 | "@opentelemetry/instrumentation-fetch": "^0.205.0", 44 | "@opentelemetry/instrumentation-user-interaction": "^0.50.0", 45 | "@opentelemetry/instrumentation-xml-http-request": "^0.205.0", 46 | "@opentelemetry/otlp-exporter-base": "^0.205.0", 47 | "@opentelemetry/otlp-proto-exporter-base": "^0.51.1", 48 | "@opentelemetry/otlp-transformer": "^0.205.0", 49 | "@opentelemetry/propagator-b3": "^2.1.0", 50 | "@opentelemetry/resources": "^2.1.0", 51 | "@opentelemetry/sdk-logs": "^0.205.0", 52 | "@opentelemetry/sdk-trace-base": "^2.1.0", 53 | "@opentelemetry/sdk-trace-web": "^2.1.0", 54 | "@opentelemetry/semantic-conventions": "^1.22.0", 55 | "@tabler/icons-react": "^3.29.0", 56 | "@uiw/codemirror-theme-vscode": "^4.25.1", 57 | "@uiw/codemirror-themes": "^4.25.1", 58 | "@uiw/react-codemirror": "^4.25.1", 59 | "browser-extension-url-match": "^1.2.0", 60 | "codemirror-json-schema": "https://github.com/tbrockman/codemirror-json-schema/releases/download/otel-v1.0.1/codemirror-json-schema-0.7.11.tgz", 61 | "deepmerge-ts": "^7.1.4", 62 | "markdown-it": "^14.1.0", 63 | "react": "19.1.1", 64 | "react-dom": "19.1.1", 65 | "react-error-boundary": "^6.0.0", 66 | "ts-mixer": "^6.0.4", 67 | "uuidv7": "^1.0.2" 68 | }, 69 | "devDependencies": { 70 | "@ianvs/prettier-plugin-sort-imports": "4.4.1", 71 | "@parcel/config-default": "^2.13.3", 72 | "@parcel/packager-ts": "2.13.3", 73 | "@plasmohq/parcel-config": "^0.42.0", 74 | "@types/chrome": "0.1.11", 75 | "@types/jest": "^30.0.0", 76 | "@types/mocha": "^10.0.10", 77 | "@types/node": "24.3.3", 78 | "@types/react": "19.1.13", 79 | "@types/react-dom": "19.1.9", 80 | "chai": "^6.0.1", 81 | "cross-env": "^10.0.0", 82 | "esbuild-plugin-polyfill-node": "^0.3.0", 83 | "mocha": "^11.1.0", 84 | "mocha-suppress-logs": "^0.6.0", 85 | "npm-run-all": "^4.1.5", 86 | "parcel-resolver-inlinefunc": "^1.0.0", 87 | "plasmo": "^0.90.5", 88 | "postcss": "^8.5.1", 89 | "postcss-preset-mantine": "^1.13.0", 90 | "postcss-simple-vars": "^7.0.1", 91 | "prettier": "3.4.2", 92 | "process": "^0.11.10", 93 | "ts-json-schema-generator": "^2.3.0", 94 | "tsx": "^4.19.2", 95 | "typescript": "5.7.3", 96 | "yaml": "^2.8.1" 97 | }, 98 | "manifest": { 99 | "host_permissions": [ 100 | "http://localhost/*" 101 | ], 102 | "optional_host_permissions": [ 103 | "