Chromium扩展开发问题：页面源码关键词解析脚本无响应

一、核心问题分析 #

你的脚本在浏览器控制台能正常运行，但放入扩展后无反应，主要是以下几个原因导致：

• 内容脚本注入时机过早，页面文本还未完全加载完成
• 扩展配置文件（manifest.json）缺少必要的匹配规则或权限声明
• 代码中误用HTML转义字符，导致关键词匹配失败
• 未在弹窗/后台脚本中监听消息，无法接收并展示提取到的关键词

二、分步修复 #

1. 修正内容脚本的注入时机与转义字符 #

默认情况下，content脚本可能在DOM未完全构建时执行，此时无法获取完整页面文本；同时代码里的"是HTML转义格式，在JS中需直接使用双引号"：

修改后的contentScript.js：

// 监听页面加载完成事件，确保能获取完整文本
document.addEventListener('DOMContentLoaded', () => {
  const keyword = '"keywords":';

  const pageText = document.body.innerText;
  const keywordIndex = pageText.indexOf(keyword);

  if (keywordIndex !== -1) {
    const startIndex = pageText.indexOf('[', keywordIndex);
    const endIndex = pageText.indexOf(']', keywordIndex);

    if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex) {
      const rawResults = pageText.substring(startIndex + 1, endIndex);
      const resultsArray = rawResults.split(',').map(value => 
        value.trim().replace(/"/g, '')
      );

      chrome.runtime.sendMessage({ results: resultsArray });
    } else {
      console.log(`未找到"${keyword}"后的关键词列表`);
    }
  } else {
    console.log(`页面中未找到"${keyword}"`);
  }
});

2. 完善manifest.json配置 #

确保扩展正确声明content脚本的匹配规则与执行时机：

{
  "manifest_version": 3,
  "name": "关键词提取工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可替换为你需要处理的特定域名，如"https://example.com/*"
      "js": ["contentScript.js"],
      "run_at": "document_idle" // 页面空闲时执行，确保内容加载完成
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": []
}

3. 添加弹窗脚本监听消息并展示结果 #

如果要在弹窗中展示关键词，需创建弹窗页面并监听content脚本发送的消息：

popup.html：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 300px; padding: 15px; }
    .keyword-item { padding: 4px 0; border-bottom: 1px solid #eee; }
  </style>
</head>
<body>
  <div id="keyword-list"></div>
  <script src="popup.js"></script>
</body>
</html>

popup.js：

// 弹窗打开时，主动向当前标签页的content脚本请求关键词
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, {type: "requestKeywords"}, (response) => {
    const listContainer = document.getElementById('keyword-list');
    if (response?.results?.length) {
      response.results.forEach(keyword => {
        const item = document.createElement('div');
        item.className = 'keyword-item';
        item.textContent = keyword;
        listContainer.appendChild(item);
      });
    } else {
      listContainer.textContent = "未提取到关键词";
    }
  });
});

同时调整contentScript.js，改为监听弹窗的请求再执行提取：

// contentScript.js
function extractKeywords() {
  const keyword = '"keywords":';
  const pageText = document.body.innerText;
  const keywordIndex = pageText.indexOf(keyword);

  if (keywordIndex !== -1) {
    const startIndex = pageText.indexOf('[', keywordIndex);
    const endIndex = pageText.indexOf(']', keywordIndex);

    if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex) {
      const rawResults = pageText.substring(startIndex + 1, endIndex);
      return rawResults.split(',').map(value => 
        value.trim().replace(/"/g, '')
      );
    }
  }
  return [];
}

// 监听来自弹窗的请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "requestKeywords") {
    const results = extractKeywords();
    sendResponse({results: results});
  }
});

4. 调试技巧 #

• 查看扩展日志：右键扩展图标 → 检查弹出窗口，在控制台查看错误信息
• 查看content脚本日志：打开页面开发者工具 → 控制台 → 顶部下拉框选择你的扩展ID，查看content脚本的输出

三、关键注意事项 #

• JS代码中不要使用HTML转义字符（如"），直接使用原生双引号"
• Manifest V3中后台脚本为service worker，需注意其生命周期限制
• 确保content脚本的matches规则覆盖你需要处理的目标网站

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