Chrome扩展开发：如何获取选中文本所在的完整语句？

嘿，我懂你现在的困扰——你已经做了一个Chrome扩展，能在选中文本时弹出右键菜单，但现在只能拿到用户选中的那小段文本，想获取它所在的完整句子却不知道怎么实现，对吧？

问题的核心在于：chrome.contextMenus提供的info对象里的selectionText只能返回用户实际选中的内容，没法直接拿到完整语句。要实现这个需求，我们得借助内容脚本（Content Script）——它能直接访问页面的DOM结构，帮我们从选中的文本节点出发，找到完整的句子边界。

下面是具体的实现步骤和代码：

1. 配置Manifest文件 #

首先确保你的扩展Manifest里声明了必要的权限和内容脚本（这里以Manifest V3为例，V2的写法稍作调整即可）：

{
  "manifest_version": 3,
  "name": "完整语句提取工具",
  "version": "1.0",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网站，可按需修改
      "js": ["content.js"]
    }
  ]
}

2. 编写后台脚本（background.js） #

后台脚本负责创建右键菜单，并在菜单被点击时，向当前标签页的内容脚本发送请求：

// 扩展安装时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    title: "提取完整语句",
    contexts: ["selection"],
    id: "extractFullSentence"
  });
});

// 监听右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "extractFullSentence") {
    // 向当前标签页的内容脚本发送消息
    chrome.tabs.sendMessage(tab.id, { action: "getFullSentence" }, (response) => {
      if (response?.fullSentence) {
        console.log("提取到的完整语句:", response.fullSentence);
        // 这里可以添加你需要的后续逻辑，比如弹窗展示、保存到本地等
      }
    });
  }
});

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

内容脚本负责处理DOM，找到选中文本所在的完整句子：

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getFullSentence") {
    const selection = window.getSelection();
    if (!selection.rangeCount) {
      sendResponse({ fullSentence: null });
      return;
    }

    const range = selection.getRangeAt(0);
    let textNode = range.commonAncestorContainer;
    
    // 确保我们操作的是文本节点（避免元素节点）
    if (textNode.nodeType !== Node.TEXT_NODE) {
      textNode = textNode.firstChild;
    }

    const fullText = textNode.textContent;
    let startOffset = range.startOffset;
    let endOffset = range.endOffset;

    // 向前遍历，找到句子的开头（以句号、感叹号、问号为边界，可按需调整）
    let start = startOffset;
    while (start > 0 && !/[.!?]\s/.test(fullText[start - 1])) {
      start--;
    }
    // 跳过开头的空格
    if (fullText[start] === ' ') start++;

    // 向后遍历，找到句子的结尾
    let end = endOffset;
    while (end < fullText.length && !/[.!?]/.test(fullText[end])) {
      end++;
    }
    // 包含结尾的标点符号
    if (end < fullText.length) end++;

    // 提取并返回完整语句
    const fullSentence = fullText.slice(start, end).trim();
    sendResponse({ fullSentence });
  }
});

关键说明 #

• 句子边界的判断逻辑：这里用了英文的标点[.!?]，如果需要支持中文，只需把正则改成[。！？]即可，或者同时兼容中英文：[.!?。！？]。
• 文本节点的处理：有时候选中的内容可能跨多个元素节点，这里的代码处理了最常见的单文本节点情况，如果需要支持跨节点的复杂场景，可能需要进一步遍历相邻节点。
• Manifest V2兼容：如果你的扩展用的是V2，只需把background部分改成"scripts": ["background.js"]，去掉service_worker字段即可。

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