[PM-17564] Prompt Browser Extension

[nick-livefront]

🎟️ Tracking

PM-17564

📔 Objective

When /browser-extension-prompt route is accessed, the extension will automatically open.

Implementation Notes

• This uses the postMessage to send messages from the web vault to the extension and back.
  • This follows the same onboarding pattern implemented here.
  • Messages are sent back and forth for checking if the extension is installed and then attempting to open it.
  • If there is a more idiomatic way of approaching this I would love to know 😅
• The openPopup within main.background was refactored to open the popup, utilizing the openPopup method.
• There is a long opened bug for FireFox where opening the extension is not possible without user interaction. In this case messaging will be shown to manually open the extension.
• Refactored VaultOnboardingMessages to be VaultMessages and added openPopup and popupOpened message commands to the enum

Decision Chart

flowchart TD
    A[browser-extension-prompt] --> B{isMobileBrowser}
    B -->|Yes| C[Show Mobile Messaging]
    B -->|No| D{Is Firefox?}
    D -->|Yes| E[Show Manual Open State]
    D -->|No| F[Check Extension Installed]
    F --> H{Extension Installed?}
    H -->|Yes| I[Open Extension Popup]
    H -->|No| J[Show Error State]
    I --> K{Popup Opened?}
    K -->|Yes| L[Show Success State]
    K -->|No| J

Loading

📸 Demo

Videos

Chrome - Success	Safari - Error
browser-prompt-chrome.mov	browser-prompt-safari.mov

Screenshots

Firefox	Mobile

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

Attention: Patch coverage is 72.80000% with 34 lines in your changes missing coverage. Please review.

Project coverage is 35.25%. Comparing base (543cf0f) to head (7f434c7).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
apps/browser/src/background/runtime.background.ts	0.00%	14 Missing ⚠️
apps/browser/src/background/main.background.ts	0.00%	3 Missing ⚠️
...owser/src/vault/content/send-popup-open-message.ts	0.00%	3 Missing ⚠️
...nsion-prompt/browser-extension-prompt.component.ts	83.33%	1 Missing and 2 partials ⚠️
...er/src/autofill/content/content-message-handler.ts	50.00%	2 Missing ⚠️
...ser/src/vault/content/send-on-installed-message.ts	0.00%	2 Missing ⚠️
apps/web/src/app/oss-routing.module.ts	0.00%	2 Missing ⚠️
...vault/services/browser-extension-prompt.service.ts	95.74%	0 Missing and 2 partials ⚠️
libs/common/src/vault/enums/vault-messages.enum.ts	0.00%	2 Missing ⚠️
...ompt/browser-extension-prompt-install.component.ts	95.23%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13349      +/-   ##
==========================================
+ Coverage   35.20%   35.25%   +0.05%     
==========================================
  Files        3126     3132       +6     
  Lines       92563    92673     +110     
  Branches    16857    16869      +12     
==========================================
+ Hits        32590    32676      +86     
- Misses      57516    57535      +19     
- Partials     2457     2462       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Checkmarx One – Scan Summary & Details – 5afacbe8-d3cb-4bdb-9ebc-6e8d67c10bbb

New Issues (2)

Checkmarx found the following issues in this Pull Request

Severity	Issue	Source File / Package	Checkmarx Insight
	Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt-install.component.html: 1	details The value used in shouldShow$ at /apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt-install.component.html in lin... Attack Vector
	Angular_Usage_of_Unsafe_DOM_Sanitizer	/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts: 36	details Usage of an unsafe class bypassSecurityTrustHtml, which overrides output sanitization, was found at /apps/web/src/app/vault/components/browser-exte... Attack Vector