请求协助实现Chrome扩展密码验证触发ContentScript执行功能

我来帮你搞定这个密码验证触发Content Script的问题，你之前在popup里直接跳转JS文件的做法完全不符合Chrome扩展的运行逻辑，下面是分步的解决方案：

1. 修正Manifest.json配置 #

首先我们要调整权限，把自动注入的Content Script改为动态注入模式：

{
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  },
  "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
  "description": "A great tool that interacts with the FIFA 21 WEB APP to highlight the best deals going!",
  "icons": {
    "128": "icon128.png",
    "16": "icon16.png",
    "48": "icon48.png"
  },
  "manifest_version": 2,
  "name": "kappas x",
  "permissions": [
    "storage",
    "identity",
    "identity.email",
    "activeTab"  // 添加该权限，用于向当前激活标签页动态注入脚本
  ],
  "update_url": "https://clients2.google.com/service/update2/crx",
  "version": "12.9.3"
}

注：我移除了原来的content_scripts数组，因为我们要在密码验证通过后才手动注入脚本，而不是自动匹配URL注入

2. 重构Popup的HTML与验证逻辑 #

我优化了popup的结构和样式，同时修正了密码验证后的核心逻辑，使用Chrome扩展API来注入脚本：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 260px;
      padding: 18px;
      font-family: system-ui, Arial, sans-serif;
      margin: 0;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      font-size: 1.2rem;
    }
    .logo-icon {
      width: 36px;
      height: 36px;
    }
    .version {
      font-size: 0.7rem;
      color: #666;
    }
    .modal-content {
      text-align: center;
    }
    form {
      margin-top: 22px;
    }
    #pswd {
      margin: 10px 0;
      padding: 7px;
      width: 85%;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    input[type="button"] {
      padding: 7px 15px;
      cursor: pointer;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
    }
    input[type="button"]:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="modal-header">
    <h1 class="logo">
      <img class="logo-icon" src="icon128.png" />Kappas <span class="version">(12.9.3)</span>
    </h1>
  </div>
  <div class="modal-content">
    <p>Number #1 Web App Tool For Fifa 21!</p>
    <form>
      <label for="pswd">Enter your password:</label><br>
      <input type="password" id="pswd" placeholder="输入密码"><br>
      <input type="button" value="Submit" onclick="checkPswd();" />
    </form>
  </div>

  <script type="text/javascript">
    function checkPswd() {
      const correctPassword = "admin";
      const password = document.getElementById("pswd").value.trim();

      if (password === correctPassword) {
        // 获取当前激活的标签页
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          const currentTab = tabs[0];
          // 验证当前页面是否是目标FIFA Web App
          if (currentTab.url.match(/.*:\/\/www.ea.com\/.*fifa\/ultimate-team\/web-app\/.*/)) {
            // 先注入jQuery，再注入你的业务脚本
            chrome.tabs.executeScript(currentTab.id, {file: "jquery.min.js"}, function() {
              chrome.tabs.executeScript(currentTab.id, {file: "js/contentScript.js"}, function() {
                alert("验证成功！脚本已启动");
                window.close(); // 自动关闭弹窗
              });
            });
          } else {
            alert("请在FIFA 21 Web App页面使用此工具！");
          }
        });
      } else {
        alert("密码错误，请重试！");
        document.getElementById("pswd").value = "";
        document.getElementById("pswd").focus();
      }
    }
  </script>
</body>
</html>

3. 确保Content Script正常运行 #

你的contentScript.js不需要大幅修改，只要保证它在注入后能执行预期逻辑即可，示例如下：

// contentScript.js
$(document).ready(function() {
  console.log("Content Script已成功注入FIFA Web App");
  // 在这里编写你的FIFA Web App交互逻辑，比如高亮优惠等
});

核心逻辑说明 #

• 使用chrome.tabs.executeScript是Chrome扩展中动态注入脚本的标准方式，能精准控制脚本执行时机
• activeTab权限允许扩展访问当前激活的标签页，是动态注入脚本的必要权限
• 增加了URL匹配验证，避免在非目标页面执行无效操作
• 优化了用户体验：密码错误时自动清空输入框并聚焦，验证成功后自动关闭弹窗

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