2016-11-27 189 views
0

我已創建了一個Chrome擴展程序,可將用戶登錄到他的帳戶中。 在popup.html上,您可以選擇登錄網址(我們有2個門戶網站歐盟和美國)並輸入您的登錄憑證。之後,您點擊「登錄」按鈕。然後一個帶有URL的新選項卡將打開,並且該擴展將用用戶名和密碼填寫登錄表單。然後它應該點擊新的登錄表單上的按鈕,這將無法正常工作。Chrome擴展程序:打開新標籤並點擊按鈕

的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 <[email protected]>", 
    "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){ 
    }); 

} 

也許它錯誤的方式?現在它打開新標籤並填寫表單,但不要單擊按鈕。如果我輸入命令'document.getElementById(「loginBtn」)。click();'在控制檯中,按鈕將被點擊。

謝謝!

+1

請編輯問題爲主題:包括一個**完整** [mcve]複製問題。包括一個* manifest.json *,一些背景*和*內容腳本。尋求調試幫助的問題(「**爲什麼不是這個代碼工作?」)必須包括:►期望的行爲,►特定問題或錯誤*和*►在問題中重現問題所需的最短代碼**本身**。沒有明確問題陳述的問題對其他讀者無益。請參閱:「**如何創建[mcve] **」,[我可以在此處詢問哪些主題?](http://stackoverflow.com/help/on-topic)和[問]。 – Makyen

+1

具體來說,我們需要* manifest.json *和足夠的頁面和彈出窗口的HTML來複制問題。 – Makyen

+1

注意:正如[本答案](http://stackoverflow.com/a/40815514/3773011)中所述,不對正在傳遞的值進行編碼會導致安全漏洞(潛在的代碼注入)。此外,即使在正常使用情況下,如果用戶名或密碼中包含一個'「'',那麼''''代碼就會被破壞,這是一個非常有效的密碼字符(也可能是用戶名) 。'passwordField.value = JSON.parse('+ JSON.stringify(password)+');'''password'和'username'應該是足夠的 – Makyen

回答

0

Context scripts在網頁上下文中運行。

所以首先你需要註冊內容腳本作爲document說。

然後在用戶提交表格popup後,您可以將帳號信息保存在chrome extension storage

當頁面被訪問時,您可以從chrome擴展存儲獲取帳戶信息並將其填入當前頁面。

+1

但是,當我添加上下文腳本,它每次訪問頁面時執行。我爲這個URL創建了一個內容腳本,但它總是觸發登錄按鈕...它不是最優的! –

+0

我想我們你在彈出窗口中打開一個標籤,你可以附加一些額外的東西。 – Yang

+0

例如'www.google.com?fromPopup = true'。 – Yang

相關問題