Change the value of <input> with code

Add-ons Development
#1

Hey,
I recently started programming an Add-on for Firefox. I am trying to change the value of an input field with code. I tried using

document.getElementById("email").value = "test@test.com"

But that doesn’t work
(Error: Could not establish connection. Receiving end does not exist)
I could not find any documentation for Element.value so I don’t know if I am missing some permissions.

manifest.json

{

    "manifest_version": 2,

    "name": "Email Manager",

    "version": "1.0",

    "description": "Test Add-on",

    "icons": {

        "48": "test-icon.png"

    },

    "content_scripts": [

        {

            "matches": ["<all_urls>"],

            "js": ["email-manager.js"]

        }

    ]

}

email-manager.js

document.getElementById("email").value = "test@test.com"
#2

Error: Could not establish connection. Receiving end does not exist.

That kind of message usually occurs when sending a message to a tab or to the background, and the script that is listening for messages didn’t load or run properly. Since your manifest only shows one script, you probably are not using sendMessage().

I wonder whether that error is coming from another extension?

I could not find any documentation for Element.value so I don’t know if I am missing some permissions.

Probably not a permission issue. It’s a text input? .value looks correct to me based on https://developer.mozilla.org/docs/Web/HTML/Element/input/text.

Are you sure the element has that id? Sometimes form elements only have the name attribute and not an id…

1 Like
#3

Thanks for your quick answer!

I looked up my test website (Epic Games Login) again and the Id is indeed “email”:

<input aria-invalid="true" autocomplete="username" id="email" name="email" placeholder="E-Mail-Adresse" type="text" inputmode="text" aria-label="E-Mail-Adresse" autocorrect="off" autocapitalize="none" spellcheck="false" class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd" value="">

After disabling most of my Add-ons the provided error disappeared (thank you).
It even started pasting the email into the responding field (visually), but the value in the html input field only changes after typing the email manually, not with the code. When I manually clicked into the input field the value disappeared.

Is there a way to change the value of the html input field?

#4

That site appears to keep a log of user keystrokes to discourage automated form filling. For example, if I type an address, then move the cursor to the password field, then run a script to change the address (using the Web Console), it appears to change, but when I click back in the address field, it changes to the earlier address. Tough one.

#5

Thanks for your quick help.
So the code is right but only works on websites without this “protection”?
Or is there a way to simulate key presses?
Otherwise, if it is to complicated I’m just using this add-on for other websites, or I will try using python instead :smiley:

#6

What I think is happening is that when you type, your keystrokes are recorded somewhere else, and when you tab out of the field, that stored value is placed in the field in place of what the script inserts. I don’t know whether that is a common pattern.