Request to insert the browser’s save password prompt “Would you like Bitwarden to save this password for you?” at the very top of the webpage, causing a shift in the entire page rather than overlaying it on top.
The scenario described is quite significant. For instance, when I register on a certain website, it might display a floating prompt box at the top. However, the appearance of “Would you like Bitwarden to save this password for you?” can obscure this prompt box. Typically, these prompt boxes are time-limited and may disappear after just 5 seconds. Therefore, I need to close the “Would you like Bitwarden to save this password for you?” prompt in order to see the specific content of the floating box. If there are instances where I register on websites and some content is not compliant—for example, if my password exceeds the required length specified by a website—it might pop up with a message saying “Your password exceeds the required length.” But then again, “Would you like Bitwarden to save this password for you?” pops up and covers this floating prompt, forcing me to close it first. This issue can be quite troublesome as its presence obstructs some web prompts from being seen clearly. Here’s an example below:
My requirement is to have the browser’s top prompt message, “Would you like Bitwarden to save this password for you?” appear as an additional element at the top of the webpage, rather than overlaying it. The second example image I provided clearly and explicitly illustrates this point
The “clearly” is very much hidden in the text in the image, I think…
And then I don’t understand the image. Such a prompt must be inside you red field, because if this is the entire website, then this is the entire browser window. Such a prompt must be somewhere in the browser window - it cannot be outside of the browser window. So the black field, as I understand it, must be somewhere (and completely) be within the red field… so there is nothing “clear and explicit” for me here.
It is possible that there was a misunderstanding in my diagram. I will briefly explain again. Currently, the prompt “Would you like Bitwarden to save this password?” appears as an “overlay” on top of the original webpage. The issue with “overlay” is that it obscures the original text because it covers it. What I need is an “insert at the top” approach, where the prompt “Would you like Bitwarden to save this password?” is inserted at the top without covering the original content. Do you understand now? I have drawn a new diagram, which makes it evident.
The red area represents the effect I need. The blue area represents the current implementation by Bitwarden.
If the reference diagram is still unclear, the following JavaScript reference code can be run in the browser’s console for an intuitive understanding of the effect.
Red: Implementation of inserting at the top:
const inputValue = prompt("Please enter the content to be displayed at the top of the page:");
const newDiv = document.createElement("div");
newDiv.style.height = "100px";
newDiv.style.backgroundColor = "blue";
newDiv.style.color = "white";
newDiv.style.padding = "20px";
newDiv.style.textAlign = "center";
newDiv.style.fontSize = "24px";
newDiv.style.fontWeight = "bold";
newDiv.textContent = inputValue;
document.body.insertBefore(newDiv, document.body.firstChild);
Blue: Implementation of overlaying at the top:
const inputValue = prompt("Please enter the content to be displayed at the top of the page:");
const newDiv = document.createElement("div");
newDiv.style.position = "fixed";
newDiv.style.top = "0";
newDiv.style.left = "0";
newDiv.style.width = "100%";
newDiv.style.height = "100px";
newDiv.style.backgroundColor = "blue";
newDiv.style.color = "white";
newDiv.style.padding = "20px";
newDiv.style.textAlign = "center";
newDiv.style.fontSize = "24px";
newDiv.style.fontWeight = "bold";
newDiv.style.zIndex = "9999";
newDiv.textContent = inputValue;
document.body.appendChild(newDiv);
Sounds reasonable to me - though I don’t use the save prompt very much and when, I never had that problem of then not being able to see something important.
I have no background in coding, but it seems to me that this change wouldn’t be too difficult (though I don’t know if there is more complication around it)…
PS: I hope it’s okay for you: I changed the title to something shorter.
In fact, I also believe that the title is overly lengthy; thank you for making the correction.
Indeed, from a programming perspective, this task is almost effortless and could be accomplished with just a few lines of code. However, the official team might need to consider issues related to compatibility and stability.
I frequently use save prompts (almost daily), as I need to register on many websites and therefore rely heavily on them. (Manually saving passwords can be quite cumbersome)
Manually saving passwords actually requires fewer clicks/keystrokes than using the “Save passwords” prompt, at least if you are generating random passwords for each new account (as you should).
When you have opened the account registration form in your browser (assuming that your Bitwarden browser extension is logged in but locked), simply go through the following steps, all within the browser extension:
Unlock the browser extension (click Bitwarden icon and verify your identity using a PIN or biometrics).
Click (or the “Add a Login” link).
Type the desired username (or generate a random one).
Click the icon the in Password field (generate password).
Click Select in the upper right corner.
Click Save in the upper right corner.
You will now see the new vault item listed at the top of the browser extension’s “Tab” page →click on the website name (which will transfer your username and password to the website’s account registration form.
Now the account registration form can be submitted to the website server with one additional click (or using Enter).
So, besides typing the username, it’s a total of 7 left-clicks of the mouse (if the username is randomly generated, it’s 9 left-clicks total). If you take stock of how much clicking/tabbing and typing that you do to first fill out the account registration form on the website, and then accepting the prompt to save the password (and unlocking your vault), you will find out that your method is actually more cumbersome.
I understand now. Your approach is to reverse the process, where instead of prompting users with a “Save” option after registration and login, we first generate an account and password, then use these credentials to autofill the webpage for automatic login.
icon and verify your identity using a PIN or biometrics).
(or the “Add a Login” link).
icon the in Password field (generate password).