Chrome扩展开发求助：读取JSON填充指定表单失败排查

我帮你梳理了代码里的几个关键问题，给出修复方案如下：

问题点分析 #

1. URL匹配逻辑错误：background.js里用url.includes("https://www.police.rajasthan.gov.in/*")，这里的*会被当作普通字符串处理，根本匹配不到目标域名下的页面，应该去掉*直接检查域名。
2. 数据传递格式不匹配：background直接把JSON数据发出去，但content.js里判断的是message.formData，导致永远走错误分支。
3. 本地文件路径错误：扩展内的本地文件必须用chrome.runtime.getURL()获取正确路径，直接写文件名会导致fetch失败。
4. DOM未就绪就操作：content.js可能在页面元素还没加载完就执行查询，找不到表单元素白忙活。

修复后的代码 #

background.js #

chrome.runtime.onConnect.addListener(function (port) {
  if (port.name === "formData") {
    const url = port.sender.url;
    let filePath;

    // 修正URL匹配，去掉通配符，只检查域名
    if (url.includes("https://www.police.rajasthan.gov.in")) {
      // 获取扩展内文件的正确URL
      filePath = chrome.runtime.getURL("Records.json");
    } else {
      console.log("Error: Unknown URL");
      return;
    }

    fetch(filePath)
      .then((response) => {
        // 增加响应状态检查
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        return response.json();
      })
      .then((formData) => {
        // 按照content.js预期的格式封装数据
        port.postMessage({ formData: formData });
      })
      .catch((error) => {
        console.log("Error in fetching the data:", error);
      });
  }
});

content.js #

// 等待页面DOM完全加载后再执行
document.addEventListener('DOMContentLoaded', function() {
  const port = chrome.runtime.connect({ name: "formData" });

  port.onMessage.addListener(function (message) {
    if (message.formData) {
      const ServentUploadForm = document.querySelector("#ContentPlaceHolder1_pnlvisible");
      // 先检查表单容器是否存在
      if (!ServentUploadForm) {
        console.log("Error: 找不到表单容器");
        return;
      }

      // 获取所有表单元素
      const elements = {
        id: ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSIDNo"),
        fName: ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSFirstName"),
        lName: ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSLastName"),
        fFName: ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSFirstFName"),
        fLName: ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSLastFName")
      };

      // 检查是否有元素缺失
      if (Object.values(elements).some(el => !el)) {
        console.log("Error: 部分表单元素未找到");
        return;
      }

      const firstRecord = message.formData[0];
      if (!firstRecord) {
        console.log("Error: Records.json中没有数据");
        return;
      }

      // 填充数据
      elements.id.value = firstRecord.id;
      elements.fName.value = firstRecord.SFName;
      elements.lName.value = firstRecord.SLName;
      elements.fFName.value = firstRecord.FFName;
      elements.fLName.value = firstRecord.FLName;
    } else {
      console.log("Error in loading the data");
    }
  });

  // 发送数据请求
  port.postMessage({ action: "getFormData" });
});

额外要检查的配置 #

1. manifest.json必须正确配置：确保background、content script和资源都声明到位，以Manifest V3为例：

{
  "manifest_version": 3,
  "name": "表单填充工具",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://www.police.rajasthan.gov.in/*"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["Records.json"],
      "matches": ["https://www.police.rajasthan.gov.in/*"]
    }
  ]
}

如果用Manifest V2，调整成对应的语法即可。

2. Records.json格式要正确：确保是合法的JSON数组，比如：

[
  {
    "id": "S12345",
    "SFName": "Pankaj",
    "SLName": "Kumawat",
    "FFName": "Ramlal",
    "FLName": "Kumawat"
  }
]

3. 用控制台调试：在chrome://extensions/里打开background页的开发者工具看日志，目标页面按F12看content.js的报错，能更快定位问题。

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