Chrome扩展开发：实现选中文本在HTML弹窗展示并更新

我来帮你一步步实现这个功能，结合你现有的background.js，我们需要调整几个核心部分来支持选中文本收集、弹窗展示以及扩展内的文本更新需求：

1. 先更新扩展配置文件（manifest.json） #

首先确保你的扩展配置正确声明了所需权限、内容脚本和后台脚本。如果是使用Manifest V3（推荐），配置如下：

{
  "manifest_version": 3,
  "name": "Word Correction Editor",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_icon": "icon.png" // 替换成你的图标文件路径
  }
}

如果还在使用Manifest V2，把background.service_worker改成background.scripts: ["background.js"]即可。

2. 编写内容脚本（content.js） #

这个脚本会注入到所有页面中，监听用户的文本选中事件，获取选中内容并通知后台脚本，同时接收弹窗传回的修正文本更新页面：

// 监听鼠标松开事件，检测是否有选中的文本
document.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString().trim();
  if (selectedText) {
    // 向后台脚本发送选中的文本
    chrome.runtime.sendMessage({ type: 'SELECTED_TEXT', data: selectedText });
  }
});

// 接收弹窗传回的修正文本，替换页面中的选中内容
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'CORRECTED_TEXT') {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      range.deleteContents();
      range.insertNode(document.createTextNode(message.data));
    }
  }
});

3. 改造后台脚本（background.js） #

保留你原来的点击图标打开弹窗逻辑，同时新增处理内容脚本消息的逻辑，实现选中文本后自动打开弹窗并传递内容：

// 原有的点击图标打开弹窗逻辑（打开空弹窗，提示用户选中文本）
chrome.action.onClicked.addListener(() => {
  openEditorPopup();
});

// 监听来自内容脚本的消息，打开弹窗并传入选中的文本
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'SELECTED_TEXT') {
    openEditorPopup(message.data);
  }
});

// 封装打开弹窗的通用函数
function openEditorPopup(selectedText = '') {
  // 通过URL参数传递选中的文本
  const encodedText = encodeURIComponent(selectedText);
  const popupUrl = chrome.runtime.getURL(`Editor.html?text=${encodedText}`);
  window.open(popupUrl, "Words Misspelled", "width=600,height=400");
}

4. 完善弹窗页面（Editor.html） #

这个页面负责展示选中的文本、检测拼写错误，以及将修正后的文本传回页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Word Correction Editor</title>
  <style>
    body { padding: 20px; font-family: Arial, sans-serif; }
    #selectedText { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 50px; }
    .control-area { margin-bottom: 20px; }
    #correctionResult { padding: 10px; background-color: #f5f5f5; border-radius: 4px; }
    button { padding: 8px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h3>Selected Text</h3>
  <div id="selectedText"></div>

  <div class="control-area">
    <button id="checkMisspelled">Check Misspelled Words</button>
    <button id="applyCorrection" style="margin-left: 10px; display: none;">Apply Correction</button>
  </div>

  <div id="correctionResult"></div>

  <script>
    // 从URL参数中获取选中的文本
    const urlParams = new URLSearchParams(window.location.search);
    const originalText = urlParams.get('text') || 'No text selected. Please select text on the page first.';
    let correctedText = originalText;
    
    document.getElementById('selectedText').textContent = originalText;

    // 模拟拼写错误检测（你可以替换成专业的拼写检查API或逻辑）
    document.getElementById('checkMisspelled').addEventListener('click', () => {
      const misspelledWords = findMisspelledWords(originalText);
      const resultDiv = document.getElementById('correctionResult');
      
      if (misspelledWords.length > 0) {
        resultDiv.innerHTML = `<strong>Detected misspelled words:</strong><br>${misspelledWords.join(', ')}<br><br>
        <input type="text" id="correctedInput" style="width: 100%; margin-top: 10px;" value="${correctedText}">`;
        document.getElementById('applyCorrection').style.display = 'inline-block';
        // 绑定输入框的修改事件，实时更新修正文本
        document.getElementById('correctedInput').addEventListener('input', (e) => {
          correctedText = e.target.value;
        });
      } else {
        resultDiv.textContent = 'No misspelled words found!';
        document.getElementById('applyCorrection').style.display = 'none';
      }
    });

    // 将修正后的文本传回页面
    document.getElementById('applyCorrection').addEventListener('click', () => {
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, { type: 'CORRECTED_TEXT', data: correctedText });
        window.close(); // 可选：关闭弹窗
      });
    });

    // 示例：简单的拼写错误检测函数
    function findMisspelledWords(text) {
      // 这里可以替换成你自己的正确单词库或调用第三方API
      const validWords = ['hello', 'world', 'example', 'chrome', 'extension', 'spelling'];
      const words = text.toLowerCase().split(/\W+/);
      return [...new Set(words.filter(word => word && !validWords.includes(word)))];
    }
  </script>
</body>
</html>

功能说明 #

• 当用户在页面选中文本后，会自动触发打开弹窗并展示选中内容；
• 点击弹窗中的「Check Misspelled Words」按钮可以检测拼写错误（示例用了简单的词库，你可以替换成更专业的实现）；
• 修改修正后的文本后，点击「Apply Correction」可以将修正内容同步回原页面的选中位置；
• 点击扩展图标也可以打开空弹窗，提示用户选中文本。

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