1
0
mirror of https://github.com/bitwarden/browser synced 2024-12-18 20:33:00 +01:00
bitwarden-estensione-browser/apps/browser
Jared Snider b3d4d9898e
[SG-1026 / PM-1125] - Document / Improve Form Detection in Notification Bar (#4798)
* SG-1026 - Documenting / slight refactoring of notification-bar - WIP

* SG-1026 - More documentation WIP

* SG-1026 - Continued documentation of notification bar + testing theories for specific sites as part of research to identify areas for possible improvement + added types where appropriate.

* SG-1026 - getSubmitButton docs

* SG-1026 - Autofill Service tweak - On account creation (ex: talkshoe.com), even if the pageDetails contained a valid form to watch, the loadPasswordFields method parameter for fillNewPassword being false for inputs with autoCompleteType of "new-password" would cause the account creation form to not be watched (null form data returned to notification bar). Setting this to true will help capture more account creations in the above specified scenario.

* SG-1026 - Additional documentation / comment clean up

* SG-1026 - Remove unused pageDetails array

* SG-1026 - These changes address form detection issues for the password change form on talkshoe.com:  (1) Update autofill.service getFormsWithPasswordFields(...) method to group autofill.js found password type fields under a single form in a very specific scenario where the most likely case is that it is a password change form with poorly designed mark up in a SPA (2) Notification bar - when listening to a form, we must use both the loginButtonNames and the changePasswordButton names as we don't know what type of form we are listening to (3) Notification bar - on page change, we must empty out the watched forms array to prevent forms w/ the same opId being added to the array on SPA url change (4) Notification bar - getSubmitButton update - If we cannot find a submit button within a form, try going up one level to the parent element and searching again (+ added save to changePasswordButtonNames). (5) Notification bar - when listening to a form with a submit button, we can attach the formOpId to the button so we can only have DOM traversal in one location and retrieve the form off the button later on in the form submission logic. For now, I'm just adding it as a fallback, but it could be the primary approach with more testing.

* SG-1026 - On first load of the notification-bar content script, we should start observing the DOM immediately so we properly catch rendered forms instead of waiting for a second. This was especially prevelant on refreshing the password change form page on talkshoe.com.

* SG-1026 - Due to the previous, timeout based nature of the calls to collectPageDetailsIfNeeded (now handlePageChange), the mutation observer could get setup late and miss forms loading (ex: refreshing a password change page on talkshoe.com). DOM observation is now setup as fast as possible on page load for SPAs/Non SPAs and on change for SPAs by having the mutation observer itself detect page change and deterministically calling handlePageChange().  However, with these changes, page detail collection still only occurs after a minimum of ~1 second whether or not it was triggered from the mutation observer detecting forms being injected onto the page or the scheduleHandlePageChange running (which has a theoretical maximum time to page detail collection of ~1.999 seconds but this does require the mutation observer to miss the page change in a SPA which shouldn't happen).

* SG-1026 - Identified issue with current form retrieval step in autofill service which prevents multi-step account creation forms from being returned to the notification-bar content script from the notification.background.ts script.

* SG-1026 - Add logic to formSubmitted to try and successfully process multi-step login form (email then password on https://login.live.com/login.srf) with next button that gets swapped out for a true submit button in order to prompt for saving user credentials if not in Bitwarden. This logic works *sometimes* as the submit button page change often stops the submit button event listeners from being able to fire and send the login to the background script. However, that is a separate issue to be solved, and sometimes is better than never. This type of logic might be useful in solving the multi-step account creation form on https://signup.live.com/signup but that will require additional changes to the autofill service which current intercepts forms without passwords and prevents them from reaching the notification-bar.ts content script.

* SG-1026 - Add note explaining the persistence of the content script

* SG-1026 - Update stack overflow link to improve clarity.

---------

Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
2023-04-13 15:59:31 -04:00
..
.vscode Multi root workspace tweaks (#2858) 2022-06-13 21:39:36 -05:00
config Login Flows (#4411) 2023-02-05 10:57:21 -05:00
src [SG-1026 / PM-1125] - Document / Improve Form Detection in Notification Bar (#4798) 2023-04-13 15:59:31 -04:00
store Autosync the updated translations (#5126) 2023-03-31 02:41:17 +02:00
.gitignore Simplify our gitignore files (#2925) 2022-06-17 15:33:51 +02:00
crowdin.yml Fix Crowdin Pull workflow (#2667) 2022-05-10 10:20:32 -04:00
gulpfile.js [Desktop/Browser] - Renew signing certificates (#4739) 2023-02-13 15:49:03 -07:00
jest.config.js [EC-423] Fix unit tests (#3265) 2022-08-11 11:35:08 +10:00
package.json Bumped browser version to 2023.3.1 (#5167) 2023-04-05 17:12:33 +01:00
README.md Update urls to match the contributing docs (#4192) 2022-12-06 11:20:27 +01:00
test.setup.ts [PS-1306] Context Menu for MV3 (#3910) 2023-01-06 19:31:32 -05:00
tsconfig.json [PM-1415] [BEEEP] Angular 15 (#4719) 2023-03-22 18:26:04 +01:00
tsconfig.spec.json [EC-423] Fix unit tests (#3265) 2022-08-11 11:35:08 +10:00
webpack.config.js [EC-475] Auto-save password prompt enhancements (#4808) 2023-03-09 08:12:43 +10:00

Github Workflow build browser on master Crowdin Join the chat at https://gitter.im/bitwarden/Lobby

Bitwarden Browser Extension

The Bitwarden browser extension is written using the Web Extension API and Angular.

My Vault

Documentation

Please refer to the Browser section of the Contributing Documentation for build instructions, recommended tooling, code style tips, and lots of other great information to get you started.