免责声明：关于浏览器扩展和javascript的总初学者。
背景：我正在尝试开发一个概念验证的Chrome扩展程序，该扩展程序可以从加载到一个标签中的网页的HTML表单中的输入字段中提取文本，并在该页面的类似字段中输入相同的文本。另一个标签。
在我的特定示例中，源页面是带有两个输入字段（“用户名”和“密码”）的最小本地HTML文件，目标是Apple开发人员网站（https://developer.apple）的登录页面。 com / account /）。
在这里阅读官方指南和问题，我整理了一些似乎可行的代码。
问题：只有包含数字的文本（例如：“ 111111”）会从一个选项卡复制到另一个选项卡。只要我的输入字段包含字母（例如：“ 111111a”），都不会发生任何事情。
这是源页面（本地file:///）：
<html>
<head>
<title>Source Page</title>
<meta charset="utf-8" />
<script src="popup.js"></script>
</head>
<body>
<form>
<input id="accountname_src" name="appleId" placeholder="Apple ID" /><br />
<input id="accountpassword_src" name="password" placeholder="Password" />
</form>
</body>
</html>
目标HTML（Apple页面）具有类似的输入字段，分别具有元素ID为accountname和accountpassword。
我的扩展程序的脚本如下：
document.addEventListener('DOMContentLoaded', function(){
// The button in the browser action popup:
var button = document.getElementById('autofill');
var sourceTabID = null;
var destTabID = null;
// Get the SOURCE tab id:
chrome.tabs.query({'title': 'Source Page'}, function(tabArray){
sourceTabID = tabArray[0].id;
});
// Get the DESTINATION tab id:
chrome.tabs.query({'title': 'Sign in with your Apple ID - Apple Developer'}, function(tabArray){
destTabID = tabArray[0].id;
});
if (button !== null){
button.addEventListener('click', function(){
// Get entered text from Source page:
chrome.tabs.executeScript(sourceTabID, {file: "read_input.js"}, function(results){
var credentials = results[0];
var userName = String(credentials[0]);
var password = String(credentials[1]);
// Pass values to Apple login page:
var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"
var autofillCode = insertUserNameCode + insertPasswordCode;
chrome.tabs.executeScript(destTabID, {code:autofillCode});
});
//window.close();
});
}
});
当然，read_input.js的内容是：
var userName = document.getElementById("accountname_src").value;
var password = document.getElementById("accountpassword_src").value;
var attributes = [userName, password];
attributes // (Final expression, passed to callback of executeScript() as 'results')
感觉某个地方可能存在类型推断问题，但无法分辨出位置。
奖励问题：
我可以使用上面的外部脚本和方法读取源页面中的输入字段；但是当我尝试使用类似的方法将值写入目标选项卡时，脚本无法运行（这就是为什么我在代码中使用的原因）。知道会发生什么吗？read_input.jschrome.tabs.executeScript(..., file:...chrome.tabs.executeScript(..., code:...
愚蠢的我 （再次） ...console.log些许东西引导我朝着正确的方向...
我没有在脚本中转义该值；这些行：
var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"
...应该：
var insertUserNameCode = "document.getElementById('accountname').value = '" + userName + "';"
var insertPasswordCode = "document.getElementById('accountpassword').value = '" + password + "';"
（在值周围添加了单个刻度）
...以使代码最终显示为：
document.getElementById('accountname').value = '111111a';
...代替：
document.getElementById('accountname').value = 111111a;
不过，仍然不确定为什么仅数字值有效。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句