Question

我创建了一个chrome扩展程序，可以将用户登录到他的帐户中。在popup.html上，您可以选择登录URL（我们有2个门户网站EU和US）并输入您的登录凭据。之后，单击按钮＆＃34;登录＆＃34;。然后会打开一个带有url的新选项卡，扩展名将使用用户名和密码填充登录表单。然后它应该单击新登录表单上的按钮，这不会起作用。

的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>

我在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){
   });

}

也许是错误的方式？现在它打开新选项卡并填写表单，但不要单击该按钮。如果我输入命令＆＃39; document.getElementById（＆＃34; loginBtn＆＃34;）。click（）;＆＃39;在控制台中，按钮会被点击。

谢谢！

Answer 1

Context scripts在网页上下文中运行。

首先，您需要注册内容脚本，如document所述。

然后，当用户在popup中提交表单后，您可以将帐户信息保存在chrome extension storage。

访问该页面时，您可以从Chrome扩展程序存储中获取帐户信息，并将其填入当前页面。

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

1 个答案: