bitwarden:main ← quexten:feature/browser-totp-capture
opened 01:14AM - 08 Aug 23 UTC
## Type of change
```
- [ ] Bug fix
- [x] New feature development
- [ …] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other
```
## Objective
Some sites don't provide the TOTP secret directly, but only a QR code. Additionally, copying and pasting is an additional step for the user. Finally, copying the TOTP secret temporarily exposes it to the clipboard, which might be snooped on by other applications / browser extensions.
This PR adds a button next to the TOTP secret field, which when pressed captures a screenshot of the current webpage, extracts the TOTP QR code and reads it.
Closes https://community.bitwarden.com/t/totp-screenshot-feature/7043/2
## Code changes
- messages.json: Add the i18n messages for English
- manifest.json / manifestv3: Add <all_urls> permission for chrome.tabs.captureVisibleTab to work (on chrome, just giving "activeTab" works, but firefox requires <all_urls>)
- browser-api.ts: Add a function to capture the visible tab
- add-edit.component.ts: Add the code to capture the tab, decode the QR code and - if parsed correctly - set the cipher's TOTP secret entry
- add-edit.component.html: Add the button to capture the TOTP code from the webpage
- package.json: Add the qrcode-parser library for QR code parsing
## Screenshots
https://user-images.githubusercontent.com/11866552/258958273-463c7fc5-050a-4bff-a8ab-ee1683aeb76c.webm
## Before you submit
- Please add **unit tests** where it makes sense to do so (encouraged but not required)
- If this change requires a **documentation update** - notify the documentation team
- If this change has particular **deployment requirements** - notify the DevOps team
- Ensure that all UI additions follow [WCAG AA requirements](https://contributing.bitwarden.com/contributing/accessibility/)