Autofill from URL in the Chrome extension

user_1784128 0
Viewed 965

I want to prepare a Chrome Extension for my password manager program. The password manager program keeps the usernames and passwords encrypted locally and is therefore not on any server. Instead of copying and pasting every time, I send the usernames and passwords to the Google address line as follows:

https://stackoverflow.com/users/login?user_name=USERNAME&password=PASSWORD

I want the Google Extension to automatically add the username and password in the address line to the corresponding textboxes. Unfortunately, I have no idea for this. I downloaded and reviewed Google Extensions like Daslane, but they are all very complicated and I could not understand. Your ideas and examples, if possible, on how to do this very simply are very valuable for me.

google-chrome-extension google-chrome javascript
2 Answers

First you need to find simple chrome extension sample code.

This is the simple source from chrome developer page.

After that, you have to detect the control name using chrome developer tool and use this script to auto fill and click login button.

function AutoFill() {
    var html = window.location.href + "\n\n";

    if (html.includes("example.com") == true)
    {
        document.getElementById("username").value = "username"
        document.getElementById("password").value = "password"
        document.getElementsByName("login")[0].click();
    }       
    return html;
}
chrome.extension.sendRequest(AutoFill());
user_109674850

To fill the form on the document you need access to the document. You can use for this content scripts - https://developer.chrome.com/extensions/content_scripts

I'm not sure why you would like to pass credentials via URL. I think it is a bad practice and it can break website behavior. It is better to get credentials from background script - https://developer.chrome.com/extensions/background_pages

Communication between content script and background page can be implemented via chrome.runtime.onMessage event.

If you really need to get parameters from URL, you can do this in the content script by using URLSerachParams - https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Example:

var url = new URL(location.href);
console.log(url.searchParams.get('user_name'));
user_20320970
Related