Chrome扩展加载content.js失败致登录功能异常问题求助

咱们一步步拆解和解决你遇到的问题：

1. 先搞定Failed to load file: "content.js"错误 #

这个报错的核心是路径配置不对：

• chrome.tabs.executeScript里的文件路径是相对于扩展根目录的，不是当前脚本（eventPage.js）所在的js/目录。
• 从你的manifest能看到content.js放在js/文件夹下，所以得修正路径；另外你的消息监听逻辑还会导致重复回调，顺便优化下：

修改eventPage.js：

function getPageDetails(callback) {
  // 注入content.js（用根目录相对路径），注入完成后主动请求页面数据
  chrome.tabs.executeScript(null, { file: 'js/content.js' }, () => {
    // 找到当前活跃标签页，发送消息给content.js
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {action: "getPageDetails"}, (response) => {
        callback(response);
      });
    });
  });
};

对应的content.js需要添加消息响应逻辑（假设你是要从页面提取账号密码）：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getPageDetails") {
    // 这里替换成你实际获取页面信息的逻辑
    const pageDetails = {
      email: "", // 示例值，根据需求修改
      password: ""
    };
    sendResponse(pageDetails);
  }
});

2. 修复登录函数无输出的问题 #

你的登录函数有好几个细节错误，导致它根本跑不起来：

错误点1：没传事件参数，preventDefault()直接报错 #

登录函数没接收event参数，调用event.preventDefault()会直接抛出错误，打断函数执行。

错误点2：取DOM元素而不是输入值 #

你直接把<input>元素赋值给变量，而不是它的value属性，导致POST的数据是无效的DOM对象。

错误点3：Fetch请求参数写错 #

Fetch API里没有data参数，应该用body；而且要把JSON对象转成字符串，不然服务器解析不了。

错误点4：重复ID #

你的<form>和<button>都用了id="login"，违反HTML唯一性规则，会导致DOM选择出错。

先改popup.html（修正重复ID）：

<body>
  <div class="container-fluid wrapper">
    <div class="row center">
      <form id="login-form"> <!-- 改form的ID -->
        <div class="form-group">
          <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <button type="submit" id="login-btn" class="btn btn-primary">Login</button> <!-- 改button的ID -->
        <span id="status-display"></span>
      </form>
    </div>
  </div>
  <script src="../js/popup.js"></script>
</body>
</html>

再改popup.js里的登录逻辑：

function Login(event) {
  // 必须传event参数，才能阻止表单默认提交
  event.preventDefault();
  
  const postUrl = 'http://127.0.0.1:3008/users/sign_in';
  
  // 获取输入框的实际值，不是DOM元素本身
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  // 把JSON对象转成字符串，不然服务器读不懂
  const body = JSON.stringify({ email, password });
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');

  console.log('apiurl', postUrl, headers, { email, password });
  
  fetch(postUrl, {
    method: 'POST',
    headers: headers,
    body: body // 用body参数，不是data
  })
  .then(function(response){
    console.log('response ------>', response);
    return response.json();
  })
  .then(function(data){
    console.log('data ------->', data);
  })
  .catch(function(err){
    console.log('err ---->', err);
  });
}

// 页面加载时绑定事件，注意用修改后的form ID
window.addEventListener('load', function(evt) {
  statusDisplay = document.getElementById('status-display');
  console.log('document', document.getElementById('login-form'));
  document.getElementById('login-form').addEventListener('submit', Login);
  
  // 保留原有的getBackgroundPage逻辑
  chrome.runtime.getBackgroundPage(function(eventPage) {
    eventPage.getPageDetails(onPageDetailsReceived);
  });
});

3. 修正Manifest的潜在问题 #

你的manifest里把options_page设成了popup.html，这不对——options_page是扩展的设置页面，popup应该用action配置：

// 删掉错误的options_page配置
// "options_page": "html/popup.html",
// 添加popup的正确配置
"action": {
  "default_popup": "html/popup.html"
},

最后验证步骤 #

1. 重新加载扩展：在Chrome扩展管理页点击"重新加载"；
2. 打开popup的开发者工具：右键popup页面选"检查"，看Console有没有新错误；
3. 测试登录：输入账号密码点击登录，就能看到Console的日志输出了。

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