Chrome 扩展获取选择 - Javascript

Chrome 扩展是 Chrome 浏览器的一项功能，它允许开发者通过 JavaScript、CSS 和 HTML 编写应用程序，提供扩展浏览器功能、修改网站外观等功能。

在 Chrome 扩展中，获取用户当前页面中的选择内容是一个常见的需求。这可以通过以下方式实现：

1. 使用 window.getSelection() 获取选择内容

const selection = window.getSelection().toString();

if (selection) {
  console.log(selection); // 输出选择的内容
}

这个方法会返回当前页面中被用户选中的文本，如果没有选中文本则返回空字符串。但是需要注意的是，这种方式只适用于获取页面中用户实际选中的文本，对于输入框等表单元素中的内容无法获取。

2. 使用 chrome.tabs.query() 获取当前选中的标签页

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
  const currentTab = tabs[0];
  console.log(currentTab.title, currentTab.url); // 输出当前标签页的标题和 URL
});

这个方法会返回当前浏览器活动窗口（即当前选中的标签页），并可以通过遍历标签页的 DOM 元素获取选中的内容。这种方式可以获取除纯文本以外的页面内容，但需要注意的是，需要在扩展的 manifest.json 文件中声明 tabs 权限。

3. 使用 chrome.runtime.onMessage 在扩展间通信

// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
  const currentTab = tabs[0];
  chrome.tabs.sendMessage(currentTab.id, 'getSelection', selectedText => {
    console.log(selectedText); // 输出选中的内容
  });
});

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message === 'getSelection') {
    const selection = window.getSelection().toString();
    sendResponse(selection);
  }
});

这个方法通过 chrome.runtime.onMessage API 实现扩展间的通信，可以从弹出窗口向当前页面发送消息，并在页面中处理消息。这种方式需要在 popup 和 content 两个 JavaScript 文件中分别编写相应的逻辑，并在 manifest.json 文件中声明需要通信的页面 URL。