feat: add browser extension

[svrnm]

Which problem is this PR solving?

As discussed in #490, this PR provides code for a browser extension, that can be used to inject OpenTelemetry in an arbitrary website. The original repository at https://github.com/svrnm/opentelemetry-browser-extension/ is owned by me.

Short description of the changes

• Add browser-extension/ at the root level of the repository
• Add the source code to build the extension

[codecov]

Codecov Report

Merging #498 (131c142) into main (526f948) will decrease coverage by 1.91%.
The diff coverage is 95.49%.

❗ Current head 131c142 differs from pull request most recent head 13b830b. Consider uploading reports for the commit 13b830b to get more accurate results

@@            Coverage Diff             @@
##             main     #498      +/-   ##
==========================================
- Coverage   96.68%   94.77%   -1.92%     
==========================================
  Files          13      179     +166     
  Lines         634    10921   +10287     
  Branches      124     1086     +962     
==========================================
+ Hits          613    10350    +9737     
- Misses         21      571     +550     

Impacted Files	Coverage Δ
...er-extension-autoinjection/src/background/index.ts	0.00% <0.00%> (ø)
...extension-autoinjection/src/contentScript/index.ts	0.00% <0.00%> (ø)
...metry-browser-extension-autoinjection/src/types.ts	90.32% <90.32%> (ø)
...njection/src/instrumentation/WebInstrumentation.ts	97.22% <97.22%> (ø)
...rc/background/ProgrammaticContentScriptInjector.ts	100.00% <100.00%> (ø)
...ction/src/contentScript/InstrumentationInjector.ts	100.00% <100.00%> (ø)
...er-extension-autoinjection/test/background.test.ts	100.00% <100.00%> (ø)
...extension-autoinjection/test/contentScript.test.ts	100.00% <100.00%> (ø)
...tension-autoinjection/test/instrumentation.test.ts	100.00% <100.00%> (ø)
...etry-browser-extension-autoinjection/test/utils.ts	100.00% <100.00%> (ø)
... and 166 more

[obecny]

first pass, nice work, I have raised few issues.

1. Please move also the package to folder packages for now, if we figure out better place it can be moved later, but in general I would not keep it in main folder.
2. Can you please add some screenshots how it looks so we can see it too ?

[svrnm]

Thanks for taking the time to look into this!

1. Please move also the package to folder packages for now, if we figure out better place it can be moved later, but in general I would not keep it in main folder.

Sure!

2. Can you please add some screenshots how it looks so we can see it too ?

Yes, I can expand the "Usage" guide with some screenshots: "what to do" and "what to expect"

[dyladan]

In general we try to name packages opentelemetry-category-name. opentelemetry-injection-browser-extension is opentelemetry-name-category. I would prefer the name opentelemetry-browser-extension-injection, opentelemetry-browser-extension-autoinjection, opentelemetry-browser-ext-injection or similar.

[svrnm]

In general we try to name packages opentelemetry-category-name. opentelemetry-injection-browser-extension is opentelemetry-name-category. I would prefer the name opentelemetry-browser-extension-injection, opentelemetry-browser-extension-autoinjection, opentelemetry-browser-ext-injection or similar.

Ah okay, that makes sense! I'll change that.

[mhennoch]

I'll try to take a look tomorrow, we actually have something similar but haven't gotten around upstreaming it.

[svrnm]

I applied most of the suggestions and added some questions above. The latest commit also adds some images (and a gif) to the README.md -- a few questions from my site:

• Is the gif adding value or distracting?
• there is some "not-yet-ready" code for forwarding spans to the service worker, can this stay or should I keep it out until it is working? (I might need some help here to get the spans exported properly...)
• Any other tracers/libraries/things I should include for people to play around with?

Thanks,

[vmarchaud]

Is the gif adding value or distracting?

I think its worth adding gif to demo something thats visual, we sadly don't have a lot of visual things to demo generally ^^

there is some "not-yet-ready" code for forwarding spans to the service worker, can this stay or should I keep it out until it is working? (I might need some help here to get the spans exported properly...)

I would prefer to keep it out until everything works to avoid having people open issues for it

[vmarchaud]

overall lgtm, not a browser expert so i'll delegate actual approve to others

[obecny]

I think all my concerns have been addressed, meanwhile the new version has been released so I think it can be just upgraded to the latest. Gonna approve just please address upgrade to latest before merging, gr8 job :)

[svrnm]

I think all my concerns have been addressed, meanwhile the new version has been released so I think it can be just upgraded to the latest. Gonna approve just please address upgrade to latest before merging, gr8 job :)

Thanks to @dyladan that's fixed already:-)

[svrnm]

Can someone help me to understand the code coverage issue? when I click into the details I get some errors. I guess I need to increase coverage on the extension, but I would like to verify.

[Flarna]

I guess you have to add "codecov": "3.8.2" as dev dependency.

[svrnm]

Thanks @Flarna! Now it works, @dyladan :-)

[svrnm]

Thanks everyone for making this happen 🎉