Chrome扩展程序：打开新标签页，然后点击按钮

Question

i have created an chrome extension which logs the user into his account. 我创建了一个chrome扩展程序，将用户登录到他的帐户中。 On the popup.html you can choose the login url (We have 2 portals EU and US) and type in your login credentials. 在popup.html上，您可以选择登录URL（我们有2个门户网站EU和US）并输入您的登录凭据。 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. 然后会打开一个带有url的新选项卡，扩展名将使用用户名和密码填充登录表单。 Then it should click the button on the new loginform, this wont work. 然后它应该单击新登录表单上的按钮，这不会工作。

manifest.json 的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 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: 我在popup.js中的代码如下：

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();' 如果我输入命令'document.getElementById（“loginBtn”）。click（）;' in console, the button will clicked. 在控制台中，将单击该按钮。

Thank you! 谢谢！

Answer 1

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 . 然后，用户在popup提交表单后，您可以将帐户信息保存在Chrome扩展存储中。

When the page is accessed, you can get the account info from chrome extension storage and fill them in current page. 访问该页面时，您可以从Chrome扩展存储中获取帐户信息并将其填入当前页面。

Chrome扩展程序：打开新标签页，然后点击按钮

问题描述

1 个解决方案

解决方案1
0 2016-11-28 05:42:30

Chrome扩展程序：打开新标签页，然后点击按钮

问题描述

1 个解决方案

解决方案1 0 2016-11-28 05:42:30

解决方案1
0 2016-11-28 05:42:30