Chrome extension: Open new tab and click on button

Question

i have created an chrome extension which logs the user into his account. On the popup.html you can choose the login url (We have 2 portals EU and US) and type in your login credentials. After that you click the button "Login". Then a new tab with the url will open, and the extension will fill the login form with username and password. Then it should click the button on the new loginform, this wont work.

manifest.json

{
  "manifest_version": 2,

  "name": "mbCONNECT24 Login",
  "short_name": "MBCL_Login",
  "description": "This extension log you into your mbCONNECT24 account",
  "version": "1.7",
  "options_page": "options.html",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
            "128": "icon128.png" },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "author": "Johannes Regner <johannes.regner@mbconnectline.de>",
  "permissions": [
    "activeTab",
    "<all_urls>","*://*/*",
    "storage"

  ]
}

Popup.html

<!doctype html>
<html>
  <head>
    <title>mbCONNECT24 Login</title>
    <script src="popup.js"></script>
    <script src="options.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div style="padding:20px;">
      <img src="mbconnect24.png" />
    <form>

      <div class="form-group">
        <label for="portals">Server</label>
        <select id="portals" class="form-control">
          <option value="https://rsp.mbconnect24.net/portal/">mbCONNECT24 RSP EU</option>
          <option value="https://rsp.mbconnect24.us/portal/">mbCONNECT24 RSP US</option>
        </select>
      </div>
      <div class="form-group">
        <label for="username">Username</label>
      <input type="text" class="form-control" id="username" placeholder="Username">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
      <button id="gotoLogin" class="btn btn-success">Login</button>
    </form>

</div>
  </body>
</html>

My code in popup.js is the following:

window.addEventListener("load", function()
{
  document.getElementById("gotoLogin")
          .addEventListener("click", gotoLogin, false);
}, false);


function gotoLogin() {
  var selectlist = document.getElementById("portals");
  var url = selectlist.value;

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;


  var logincode = 'var loginField = document.getElementById("modlgn_username");'+
             'var passwordField = document.getElementById("modlgn_passwd");'+
             'loginField.value = "'+username+'";passwordField.value ="'+password+'";'+
             'document.getElementById("loginBtn").click();';

  var tabId = null;

  //var tabs = chrome.extension.getViews();
  //console.log(tabs);
  chrome.tabs.create({"url": url}, function(tab){
    tabId = tab.id;

    //chrome.tabs.executeScript(tab.id, {file: 'content.js', runAt: 'document_end',code: 'var myUsername = "'+username+'";'});
  });

   chrome.tabs.update(tabId, {url: url});
   chrome.tabs.executeScript(tabId, {code: logincode, runAt:"document_end",allFrames:true}, function(result){
   });

}

Maybe its the wrong way? Now it opens the new tab and fill the form, but don't click the button. If i type the command 'document.getElementById("loginBtn").click();' in console, the button will clicked.

Thank you!

Note: As discussed in [this answer](http://stackoverflow.com/a/40815514/3773011), not encoding the values you are passing results in a security hole (potential code injection). In addition, even in normal use, there is the possibility that your `code` will be corrupted if either the username or password contain a `"`, which is a perfectly valid character to be in a password (and maybe in a username). Using something like: `passwordField.value =JSON.parse('+JSON.stringify(password)+');'` for both the `password` and `username` should be sufficient. — Makyen, Nov 27 '16 at 10:13
What is shown in the console for both your popup and content script? See [this answer](http://stackoverflow.com/a/38920982/3773011) for more detail about the different consoles. — Makyen, Nov 27 '16 at 10:17
I have updatet the json thing, but now i got the error: Uncaught SyntaxError: Unexpected token u in JSON at position 0(…) — Johannes Regner, Nov 27 '16 at 10:28
Ok, i have found the json error, now it works: 'loginField.value = "'+JSON.parse(JSON.stringify(username))+'";'+ 'passwordField.value = "'+JSON.parse(JSON.stringify(password))+'";'+ — Johannes Regner, Nov 27 '16 at 10:37
From your comment, you are not doing what I described. What I described has the `JSON.stringify(password)` execute in *popup.js* while the `JSON.parse()` executes in the content context. The point is for the data move between the two contexts and be in the `code` string as JSON. This also results in escaping the contents into a valid string literal rather than perhaps containing characters which would make your `code` represent something you were not intending. As you have it, both `JSON.parse(JSON.stringify())` are performed in the popup context, which gives you no benefit. — Makyen, Nov 27 '16 at 18:07

score 0 · Answer 1 · answered Nov 28 '16 at 05:42

0

Context scripts run in the context of web pages.

So first you need to register content script as the document said.

Then after user submit the form in popup, you can save the account info in chrome extension storage.

When the page is accessed, you can get the account info from chrome extension storage and fill them in current page.

answered Nov 28 '16 at 05:42

Yang

389
2
15

1

But when i add context script, it executes everytime i visit the page. I have made a content script for this url, but it always trigger the login button... Its not optimal! – Johannes Regner Nov 28 '16 at 06:52
I think we you open a tab in popup, you can append some addition things. – Yang Nov 28 '16 at 10:09
And you can use [this](http://stackoverflow.com/a/4656873/2477886) to get query params. – Yang Nov 28 '16 at 10:13

Chrome extension: Open new tab and click on button

1 Answers1