Change content script -> background script communication mechanism (#19)

* Changes from relying on externally_connectable to CustomEvents (which will eventually work in Firefox)
* Adds patch to @opentelemetry/instrumentation-user-interaction so specified event listeners are always registered, regardless of whether any other page code has already registered listeners (see:
open-telemetry/opentelemetry-js-contrib#1749)
* Adds .github workflow files for (some) CI/CD
* Updates README.md

Author: tbrockman

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "pnpm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    labels:
+      - automerge

.github/workflows/build.yml

@@ -0,0 +1,36 @@
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install
+      - run: pnpm build
+      - uses: actions/upload-artifact@v4
+        with:
+          path: build
+          name: build

.github/workflows/publish.yml

@@ -0,0 +1,34 @@
+on: 
+  workflow_dispatch:
+      inputs:
+        version:
+          description: 'Version to publish'
+          required: true
+        verbose:
+          description: 'Verbose mode'
+          required: false
+          default: 'false'
+
+jobs:
+  run-bpp:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download artifact
+        uses: dawidd6/action-download-artifact@v3
+        with:
+          workflow: build.yml
+          workflow_conclusion: success
+          branch: main
+          event: push
+          name: build
+          path: build
+      - name: Browser Platform Publish
+        uses: PlasmoHQ/bpp@v3
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          chrome-file: 'build/chrome-mv3-prod.zip'
+          firefox-file: 'build/firefox-mv3-prod.zip'
+          edge-file: 'build/edge-mv3-prod.zip'
+          edge-notes: "Publishing latest extension version (${{ inputs.version }}) to the Edge Store."
+          # opera-file: 'build/opera-mv3-prod.zip'
+          verbose: ${{ inputs.verbose }}

.github/workflows/submit.yml

@@ -0,0 +1,33 @@
+name: Unit tests
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install
+      - run: pnpm test:unit
+      - run: pnpm build

.github/workflows/tests.yml

@@ -1,34 +1,40 @@
-# opentelemetry-browser-extension
+<div align="center">
+    <p style="font-size:2rem">Open<span style="font-weight:bold">Telemetry</span> Browser Extension</p>
+    <p>published builds available on:</p>
+    <a href="https://chromewebstore.google.com/detail/opentelemetry-browser-ext/bgjeoaohfhbfabbfhbafjihbobjgniag"><img src='./assets/chrome.svg' height=50 alt='chrome download'></img></a>
+    *
+    <a href=""><img src='./assets/safari.svg' height=50 alt='safari download'></img></a>
+    *
+    <a href=""><img src='./assets/edge.svg' height=50 alt='edge download'></img></a>
+    <p>...or <a href='#making-a-production-build'>build it yourself!</a></p>
+</div>
+
+
+## About
 
 > [!NOTE] 
-> This project is in very early development, and is likely to change abruptly *and* be broken. Forgive any missing documentation.
+> This project is in early development. Please forgive (or feel free to contribute) any missing documentation.
 
-A [Plasmo](https://docs.plasmo.com/) browser extension that automatically instruments webpages with [OpenTelemetry](https://opentelemetry.io/docs/what-is-opentelemetry/).
+A [Plasmo](https://docs.plasmo.com/)-based browser extension that automatically instruments webpages with [OpenTelemetry](https://opentelemetry.io/docs/what-is-opentelemetry/).
 
-[Download it](https://chromewebstore.google.com/detail/opentelemetry-browser-ext/bgjeoaohfhbfabbfhbafjihbobjgniag), refresh your pages, and start recording OTLP logs and traces in your browser.
+[Download it](https://chromewebstore.google.com/detail/opentelemetry-browser-ext/bgjeoaohfhbfabbfhbafjihbobjgniag), refresh your pages, and automatically start emitting OTLP logs and traces from webpages of your choosing.
 
 ## Preview
 
 <img src='./assets/store/popup.png' width='524' alt='An example view of the popup UI'/>
 
-## Download
-
-| Browser | Link |
-|-|-|
-|Chrome|[Download it from the Chrome web store](https://chromewebstore.google.com/detail/opentelemetry-browser-ext/bgjeoaohfhbfabbfhbafjihbobjgniag)|
-
 ## 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 support
+## Browser compatibility
 
-Currently, this extension has only been confirmed to work with compatible Chromium-based browsers (Chrome, Edge, etc) which support [manifest v3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) and `chrome.scripting.executeScript({ world: 'MAIN' })`.
+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](https://bugzilla.mozilla.org/show_bug.cgi?id=1736575)).
 
-## Getting Started
+## Developing
 
 Initialize submodules (we use a custom build of Plasmo):
 
@@ -55,12 +61,34 @@ 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 production build
+## Making a production build
 
 Run the following:
 
 ```bash
 pnpm build
 ```
+or, for targeting a specific browser:
+
+```bash
+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 command to convert the extension to a an XCode project:
+
+```bash
+cd build && xcrun safari-web-extension-converter safari-mv3-prod
+```
+
+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.

README.md

@@ -9,7 +9,7 @@ services:
     ports:
       - 7280:7280
     command: ["run"]
-    # attach: false
+    attach: false # comment this line if you'd like to view quickwit log output
 
   otel-collector:
     image: otel/opentelemetry-collector:latest

assets/chrome.svg

@@ -1,15 +1,24 @@
 {
   "name": "opentelemetry-browser-extension",
   "displayName": "OpenTelemetry Browser Extension",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "An extension for instrumenting webpages using OpenTelemetry",
   "author": "Theodore Brockman <iam@theo.lol>",
+  "packageManager": "pnpm@8.14.0",
   "scripts": {
     "preinstall": "pnpm install:plasmo && pnpm build:run-p && pnpm build:vendored",
     "install:plasmo": "pnpm -C ./vendored/plasmo/ install",
     "build:run-p": "pnpm -C ./vendored/plasmo/packages/rps build",
     "dev": "plasmo dev",
-    "build": "pnpm build:vendored && plasmo build",
+    "clean": "rm -fr build",
+    "build": "npm-run-all build:safari build:windows",
+    "build:windows": "npm-run-all build:chrome build:edge build:opera",
+    "build:chrome": "plasmo build --target=chrome-mv3 --zip --hoist",
+    "build:firefox": "echo '\\033[1;31mwarning: firefox build is not currently functional due to its incomplete scripting.executeScript() functionality.\nproceeding to build anyways\\033[0m\n' && plasmo build --target=firefox-mv3 --zip --hoist",
+    "build:edge": "plasmo build --target=edge-mv3 --zip --hoist",
+    "build:safari": "plasmo build --target=safari-mv3 --zip --hoist",
+    "convert:safari": "cd build && xcrun safari-web-extension-converter safari-mv3-prod",
+    "build:opera": "plasmo build --target=opera-mv3 --zip --hoist",
     "build:vendored": "run-p build:plasmo:cli build:plasmo:storage build:plasmo:messaging",
     "build:plasmo:cli": "pnpm -C ./vendored/plasmo build:cli",
     "build:plasmo:storage": "pnpm -C ./vendored/plasmo/api/storage build",
@@ -21,7 +30,7 @@
     "@mantine/core": "^7.6.1",
     "@mantine/hooks": "^7.6.1",
     "@opentelemetry/api-logs": "^0.49.1",
-    "@opentelemetry/auto-instrumentations-web": "^0.37.0",
+    "@opentelemetry/auto-instrumentations-web": "^0.36.0",
     "@opentelemetry/context-zone": "^1.22.0",
     "@opentelemetry/core": "^1.22.0",
     "@opentelemetry/exporter-logs-otlp-proto": "^0.49.1",
@@ -46,14 +55,15 @@
     "deepmerge-ts": "^5.1.0",
     "plasmo": "workspace:*",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "uuidv7": "^1.0.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@parcel/config-default": "^2.12.0",
     "@parcel/packager-ts": "2.12.0",
-    "@plasmohq/rps": "workspace:*",
     "@plasmohq/parcel-config": "workspace:*",
+    "@plasmohq/rps": "workspace:*",
     "@types/chrome": "0.0.262",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",
@@ -65,6 +75,7 @@
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "mocha": "^10.4.0",
     "mocha-suppress-logs": "^0.5.1",
+    "npm-run-all": "^4.1.5",
     "parcel": "^2.12.0",
     "postcss": "^8.4.35",
     "postcss-preset-mantine": "^1.13.0",
@@ -85,13 +96,7 @@
     "permissions": [
       "scripting",
       "storage"
-    ],
-    "externally_connectable": {
-      "matches": [
-        "https://*/*",
-        "http://localhost/*"
-      ]
-    }
+    ]
   },
   "overrides": {
     "@opentelemetry/instrumentation-xml-http-request": "0.49.1",
@@ -103,7 +108,8 @@
       "@protobufjs/inquire@1.1.0": "patches/@protobufjs__inquire@1.1.0.patch",
       "@opentelemetry/otlp-proto-exporter-base@0.49.1": "patches/@opentelemetry__otlp-proto-exporter-base@0.49.1.patch",
       "@opentelemetry/instrumentation-xml-http-request@0.49.1": "patches/@opentelemetry__instrumentation-xml-http-request@0.49.1.patch",
-      "@opentelemetry/instrumentation-fetch@0.49.1": "patches/@opentelemetry__instrumentation-fetch@0.49.1.patch"
+      "@opentelemetry/instrumentation-fetch@0.49.1": "patches/@opentelemetry__instrumentation-fetch@0.49.1.patch",
+      "@opentelemetry/instrumentation-user-interaction@0.35.0": "patches/@opentelemetry__instrumentation-user-interaction@0.35.0.patch"
     }
   },
   "parcel-resolver-inlinefunc": {

assets/edge.svg

@@ -0,0 +1,20 @@
+diff --git a/build/esm/instrumentation.js b/build/esm/instrumentation.js
+index 928b559ffdafaea1832ec9b6a119656f8f091558..511a277175d888445b8e39e419027fc2f1a19158 100644
+--- a/build/esm/instrumentation.js
++++ b/build/esm/instrumentation.js
+@@ -63,9 +63,14 @@ var UserInteractionInstrumentation = /** @class */ (function (_super) {
+             typeof (config === null || config === void 0 ? void 0 : config.shouldPreventSpanCreation) === 'function'
+                 ? config.shouldPreventSpanCreation
+                 : defaultShouldPreventSpanCreation;
++        _this.init();
+         return _this;
+     }
+-    UserInteractionInstrumentation.prototype.init = function () { };
++    UserInteractionInstrumentation.prototype.init = function () {
++        this._eventNames.forEach(event => {
++            window.addEventListener(event, () => { });
++        });
++    };
+     /**
+      * This will check if last task was timeout and will save the time to
+      * fix the user interaction when nothing happens