Chrome扩展开发求助：读卡器数据无法自动填充WaveApps支付字段

我是编程新手，正在解决读卡器适配WaveApps开票软件的问题。该读卡器无原生适配，模拟USB键盘输出特定格式的刷卡数据：%B0000000000000000^LASTNAME/FIRSTNAME^YYMM#################################，格式规则是%B开头+16位卡号，接着^{+姓氏/名字}+两位年份+两位月份+后缀字符。直接在WaveApps支付页面的卡号字段刷卡会乱码，所以开发了Chrome扩展，计划在扩展输入框刷卡后点击按钮，自动把解析后的卡号、姓名、有效期填充到WaveApps对应字段，但点击按钮后完全没效果。

扩展代码 #

popup.js #

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('submit2');
  
  checkPageButton.addEventListener('click', function() {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.executeScript(
                tabs[0].id
                ,{code:
                    function() {
                        //Get fields with card info
                        var inputField = document.getElementById('submit');
                        var inputValue = inputField.value;
                        
                        //Chop up card info and store into individual variables
                        var cardNumber = inputValue.slice(2, 18);
                        var nameStartIndex = inputValue.indexOf("^") + 1;
                        var nameEndIndex = inputValue.indexOf("^", nameStartIndex);
                        var name = inputValue.slice(nameStartIndex, nameEndIndex).replace("/", " ");
                        var dateStartIndex = inputValue.indexOf("^", nameEndIndex) + 1;
                        var year = inputValue.slice(dateStartIndex, dateStartIndex + 2);
                        var month = inputValue.slice(dateStartIndex + 2, dateStartIndex + 4);
                        var date = month + year;
                        
                        //Get fields to put values into
                        var cardNumber_f = document.getElementById("CreditCardNumber");
                        var name_f = document.getElementById("NameOnCard");
                        var date_f = document.getElementById("ExpiryDate");

                        cardNumber_f.value = cardNumber;
                        name_f.value = name;
                        date_f.value = date;
                    }
                }
            );
        });
    });
});

manifest.json #

{
  "manifest_version": 2,
  "name": "Card Swipe to Wave",
  "version": "0.1",
  "description": "This extension allows you to use a card swipe reader on WaveApps",
  "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["https://*.waveapps.com/*", "http://*.waveapps.com/*"],
      "js": ["jquery.mini.js","content.js","popup.js"],
    "html": ["popup.html"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["popup.js"]
  }
}

popup.html #

<!DOCTYPE html>
<html>
  <head>
    <title>Submit Form</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h2>Click after swiping</h2>
    <input type="text" id="submit">
    <button id="submit2">Submit</button>
  </body>
</html>

问题排查与修复方案 #

1. executeScript代码上下文错误 #

你在chrome.tabs.executeScript里直接传入函数，且函数内尝试访问popup的DOM元素——这完全错误：

• executeScript的code参数需要字符串形式的代码，不能直接传函数
• 该代码是运行在当前WaveApps页面的上下文，无法访问popup里的#submit输入框

修复：
先在popup上下文获取并解析刷卡数据，再把填充逻辑以字符串形式传入executeScript：

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('submit2');
  
  checkPageButton.addEventListener('click', function() {
      // 1. 在popup内获取输入值并解析
      var inputValue = document.getElementById('submit').value;
      if (!inputValue) return;

      var cardNumber = inputValue.slice(2, 18);
      var nameStartIndex = inputValue.indexOf("^") + 1;
      var nameEndIndex = inputValue.indexOf("^", nameStartIndex);
      var name = inputValue.slice(nameStartIndex, nameEndIndex).replace("/", " ");
      var dateStartIndex = inputValue.indexOf("^", nameEndIndex) + 1;
      var year = inputValue.slice(dateStartIndex, dateStartIndex + 2);
      var month = inputValue.slice(dateStartIndex + 2, dateStartIndex + 4);
      var date = month + year;

      // 2. 向页面注入填充代码
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.executeScript(
                tabs[0].id,
                {
                  code: `
                    var cardNumber_f = document.getElementById("CreditCardNumber");
                    var name_f = document.getElementById("NameOnCard");
                    var date_f = document.getElementById("ExpiryDate");

                    // 填充值并触发输入事件（确保页面检测到变化）
                    if (cardNumber_f) {
                      cardNumber_f.value = "${cardNumber}";
                      cardNumber_f.dispatchEvent(new Event('input', {bubbles: true}));
                    }
                    if (name_f) {
                      name_f.value = "${name}";
                      name_f.dispatchEvent(new Event('input', {bubbles: true}));
                    }
                    if (date_f) {
                      date_f.value = "${date}";
                      date_f.dispatchEvent(new Event('input', {bubbles: true}));
                    }
                  `
                }
            );
        });
    });
});

2. manifest.json配置冗余错误 #

• content_scripts不需要包含popup.js和popup.html，popup资源由browser_action.default_popup单独指定
• background字段不需要加载popup.js，popup脚本仅在弹窗打开时运行
• content_scripts里的html字段是无效配置，Chrome扩展不支持该字段

修复后的manifest.json：

{
  "manifest_version": 2,
  "name": "Card Swipe to Wave",
  "version": "0.1",
  "description": "This extension allows you to use a card swipe reader on WaveApps",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

3. 页面元素ID可能不匹配 #

WaveApps的实际字段ID可能和你假设的CreditCardNumber、NameOnCard、ExpiryDate不一致。右键页面对应字段选择「检查」，确认实际元素ID或选择器，比如替换成：

// 示例：用name属性定位卡号字段
var cardNumber_f = document.querySelector('input[name="card[number]"]');

4. 动态页面元素加载问题 #

如果WaveApps是单页应用，字段可能是动态生成的，直接用getElementById可能找不到。可以添加延迟重试逻辑：

code: `
  function fillCardInfo() {
    var cardNumber_f = document.getElementById("CreditCardNumber");
    var name_f = document.getElementById("NameOnCard");
    var date_f = document.getElementById("ExpiryDate");
    
    if (cardNumber_f && name_f && date_f) {
      cardNumber_f.value = "${cardNumber}";
      name_f.value = "${name}";
      date_f.value = "${date}";
      
      cardNumber_f.dispatchEvent(new Event('input', {bubbles: true}));
      name_f.dispatchEvent(new Event('input', {bubbles: true}));
      date_f.dispatchEvent(new Event('input', {bubbles: true}));
    } else {
      setTimeout(fillCardInfo, 100);
    }
  }
  fillCardInfo();
`

内容的提问来源于stack exchange，提问作者OctaviusAugustus