Extension won't submit form correctly, but console will

Question

I am trying to create an extension that will log me into a website as soon as it detects that I'm not logged in - ignore the fact that my background.js does not do this now, it's not the problem. - The website I am trying to log in to has my username and password already filled in the fields through my Chrome passwords. All the script has to do is click the login button.

Essentially it seems to work, except for the fact that it doesn't log in. Whenever the script tries to log in I get the message that my username/password is incorrect. When I execute the script through the console instead of injecting it through my background.js, it works perfectly.

background.js

chrome.tabs.onUpdated.addListener(function(id, info, tab){
    if (tab.status !== "complete"){
        return;
    }
        chrome.tabs.executeScript(null, {"file": "login.js"});
});

login.js (the form id is loginForm)

document.getElementById("loginForm").submit();

Any and all help is appreciated. Thanks!

possible duplicate of [Building a Chrome Extension - Inject code in a page using a Content script](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) — Xan, Oct 16 '14 at 22:31
My problem is not submitting the form, it works fine. It submits the form. The thing is that the website tells me afterwards that the username/password is wrong even though they're correct. — Rico Clark, Oct 16 '14 at 22:32
Then you should tell us more details about the website and what's the logic behind your script, otherwise we can't do much... — Marco Bonelli, Oct 16 '14 at 22:33
If something works from the console but doesn't from the extension, it's usually a context problem. By the way, you should inject the script using `id` instead of `null`, or you risk doing it in the wrong tab. — Xan, Oct 16 '14 at 22:35
It is also possible that autocomplete-inserted passwords cannot be submitted without user input. But I'm only guessing. — Xan, Oct 16 '14 at 22:36
@Xan That could be the case, setting the username value and password value through my script before running the submit command doesn't work either. — Rico Clark, Oct 16 '14 at 22:39
Try the injection in the page context route. It may help. If it doesn't, then back to brainstorming. — Xan, Oct 16 '14 at 22:40
I fixed this problem by saving a preset username and password to ` chrome.storage` and setting them as values for the form when submitting. I don't know why simply using the Chrome saved password or hardcoding values doesn't work, but oh well. — Rico Clark, Oct 16 '14 at 23:06
By the way thanks @Xan. I am now using `tab.id` instead of `null`. The script now works on the tab even if I have another tab focused. — Rico Clark, Oct 16 '14 at 23:42

Rico Clark · Accepted Answer · 2014-10-16T23:48:01.107

I don't know why submitting the form with Chrome saved account info wouldn't work, but I made a workaround by making the user save his account info before using the extension.

popup.html

<!DOCTYPE html>
<html>
<head><title>Such Activity Options</title></head>
<body>

Username
<label>
  <input type="text" id="username">
 </label>
<br>
Password
<label>
  <input type="password" id="password">
 </label>


<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>
</html>

options.js

function saveAccount() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  chrome.storage.sync.set({
    userName: username,
    passWord: password
  }
}

And then inject this script to read those and set them as values for the form before submitting

function clickLogin() {
        document.getElementById("loginForm").submit();
}

function enterLoginInfo() {
  chrome.storage.sync.get({
    userName: 'username',
    passWord: 'password'
  }, function(items) {
    document.getElementById('usernameLogin').value = items.userName;
    document.getElementById('passwordLogin').value = items.passWord;
  });
        delay = Math.floor((Math.random() * (360000)) + 30000);
        setTimeout(function(){clickLogin()}, delay);
}

enterLoginInfo();

Why putting that `document.getElementById("loginForm").submit();` out of the callback of `chrome.storage.sync.get()` then? It gets called before the callback is executed... so is the same as calling it directly... — Marco Bonelli, Oct 16 '14 at 23:18
I need the login to work with a delay, but I figured I didn't need to post that here as it is not related to the problem. Edited it to the script I'm actually using now. — Rico Clark, Oct 16 '14 at 23:25
Well, Marco is absolutely right. You don't need the delay at all, you just need to put your `clickLogin()` inside the callback. Async functions and all that jazz. — Xan, Oct 17 '14 at 07:03

Extension won't submit form correctly, but console will

1 Answers1