Chrome扩展中window.getSelection()无法获取选中内容的问题排查

问题背景 #

我正在开发一款Chrome扩展，给右键菜单新增了一个选项，希望右键点击网页文本后，通过该选项获取点击元素的innerText。在普通HTML页面中，用window.getSelection()能正常拿到内容：

window.oncontextmenu = (e) => {
    s = window.getSelection();
    const wholeText = s.focusNode.data;
    // 后续逻辑
}

但在Chrome扩展环境中，window.getSelection()仅返回一个包含空对象的数组，无法获取需要的内容。以下是我的扩展配置和代码：

Manifest配置 #

{
  "manifest_version": 2,
  "name": "Test scan text",
  "version": "1.0",
  "description": "Find email address in the right clicked text",

  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "permissions": [
    "contextMenus", "activeTab", "tabs"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

后台脚本（background.js） #

function genericOnClick(info, tab) {
        let s;
        chrome.tabs.executeScript(tab.id, { code: `window.getSelection()` }, (result) => {
            console.log(result);
            console.log(result.focusNode.data);
        });
  }

  function theCallback() {
    console.log('something went wrong');
  }

chrome.runtime.onInstalled.addListener(async () => {
        chrome.contextMenus.create(
            {
                "title": 'Check if an email',
                "contexts": ["all"],
                "id": "contextMenu123",
                "onclick": genericOnClick
            },
            theCallback
        ); 
  });

输出结果 #

[{…}]0: {}[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()length: 1[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()findLast: ƒ findLast()findLastIndex: ƒ findLastIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {at: true, copyWithin: true, entries: true, fill: true, find: true, …}[[Prototype]]: Object
_generated_background_page.html:1

Error handling response: TypeError: Cannot read properties of undefined (reading 'data')

问题原因 #

1. 跨上下文序列化限制：window.getSelection()返回的Selection对象属于页面的主执行上下文。当通过chrome.tabs.executeScript将这个对象传递到后台脚本时，Chrome会对对象进行序列化，但Selection这类复杂对象的内部属性无法被完整序列化，导致传递到后台后变成空对象。

2. 上下文隔离机制：Chrome扩展的后台脚本和页面脚本运行在完全隔离的环境中，无法直接共享复杂对象。只有可序列化的简单数据（字符串、数字、普通对象）才能在两个上下文之间传递。

3. 代码逻辑错误：chrome.tabs.executeScript的回调参数result是一个数组（对应多个脚本注入的返回值），你直接访问result.focusNode.data本身就是错误的，正确的访问方式应该是result[0]，但即便如此，因为序列化问题，里面的属性已经丢失。

解决方案 #

修改executeScript的注入代码，在页面上下文里直接提取需要的具体值（比如选中的文本、focusNode的data），再将这个简单值传递回后台：

方案1：获取选中的文本内容 #

function genericOnClick(info, tab) {
    chrome.tabs.executeScript(tab.id, { 
        code: `window.getSelection().toString()` 
    }, (result) => {
        const selectedText = result[0];
        console.log('选中的文本:', selectedText);
        // 这里可以添加你的邮件检测逻辑
    });
}

方案2：获取focusNode.data #

function genericOnClick(info, tab) {
    chrome.tabs.executeScript(tab.id, { 
        code: `
            const sel = window.getSelection();
            sel.focusNode ? sel.focusNode.data : ''
        ` 
    }, (result) => {
        const focusNodeData = result[0];
        console.log('focusNode.data:', focusNodeData);
    });
}

注意：你的扩展使用的是Manifest V2，Chrome目前推荐使用Manifest V3。在V3中，chrome.tabs.executeScript需要替换为chrome.scripting.executeScript，同时需要在manifest中添加scripting权限。

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