Question

免责声明：关于浏览器扩展和javascript的初学者。

背景我正在尝试开发一个概念验证 Chrome扩展程序，该扩展程序从加载到一个选项卡中的网页的HTML表单中的输入字段中选取文本，并在类似的文本中输入相同的文本另一个选项卡中的页面字段。

在我的特定示例中， source 页面是一个最小的本地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.js）和方法chrome.tabs.executeScript(..., file:... 读取源页面中的输入字段;但是当我尝试使用类似方法将值写入目标选项卡时，脚本不会运行（这就是我在代码中使用chrome.tabs.executeScript(..., code:...的原因）。知道会发生什么吗？

Answer 1

愚蠢我 （再次） ......一些console.log ging让我朝着正确的方向前进......

我没有逃避脚本中的值;这些行：

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;

但仍然不确定为什么只有数字值才有用。

除非新值严格为数字，否则无法设置DOM元素的值

1 个答案: