【发布时间】：2017-04-11 04:33:13
【问题描述】：
我创建了一个 chrome 扩展程序，可将用户登录到他的帐户。 在 popup.html 中，您可以选择登录网址（我们有 2 个欧盟和美国门户网站）并输入您的登录凭据。之后，您单击“登录”按钮。然后将打开一个带有 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){
});
}
也许是错误的方式？现在它会打开新选项卡并填写表单，但不要单击按钮。如果我输入命令'document.getElementById("loginBtn").click();'在控制台中，该按钮将被点击。
谢谢！
【问题讨论】：
-
注意：正如this answer 中所讨论的，不对您传递的值进行编码会导致安全漏洞（潜在的代码注入）。此外，即使在正常使用中，如果用户名或密码包含
"，您的code也有可能被损坏，这是一个完全有效的密码字符（可能在用户名中） .对password和username使用类似：passwordField.value =JSON.parse('+JSON.stringify(password)+');'就足够了。 -
控制台中显示的弹出窗口和内容脚本的内容是什么？有关不同控制台的更多详细信息，请参阅this answer。
-
我已经更新了 json 的东西，但现在我得到了错误： Uncaught SyntaxError: Unexpected token u in JSON at position 0(...)
-
好的，我找到了 json 错误，现在它可以工作了：'loginField.value = "'+JSON.parse(JSON.stringify(username))+'";'+ 'passwordField.value = "'+JSON.parse(JSON.stringify(password))+'";'+
-
从您的评论来看，您没有按照我的描述进行操作。我所描述的
JSON.stringify(password)在 popup.js 中执行，而JSON.parse()在内容上下文中执行。重点是数据在两个上下文之间移动，并在code字符串中作为 JSON。这也导致将内容转义为有效的字符串文字，而不是可能包含会使您的code代表您不想要的东西的字符。正如您所拥有的，JSON.parse(JSON.stringify())都在弹出上下文中执行，这对您没有任何好处。
标签： javascript jquery google-chrome google-chrome-extension