开发Web应用：获取浏览器选中文本与URL并展示及存储至DB

要实现这个需求，核心挑战是浏览器的同源策略限制——普通Web应用无法直接访问其他标签页的内容。因此我们需要借助浏览器扩展来突破这个限制，通过扩展的内容脚本捕获数据，再传递到你的Web应用中。下面是完整的实现方案：

一、核心架构思路 #

1. 内容脚本（Content Script）：注入到所有网页中，监听用户的文本选中操作，捕获URL和选中内容。
2. 扩展背景脚本：作为中转站，接收内容脚本的数据，定位到你的Web应用标签页并转发数据。
3. Web应用前端：监听来自扩展的消息，将数据填充到文本框，后续可提交到数据库。

二、分步实现（以Chrome扩展为例） #

1. 编写扩展配置文件 manifest.json #

这是扩展的核心配置，声明权限、脚本注入规则等：

{
  "manifest_version": 3,
  "name": "Selection Capture Tool",
  "version": "1.0",
  "permissions": ["activeTab", "scripting", "contextMenus"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 内容脚本 content.js：捕获选中数据 #

监听文本选中事件，当用户选中有效文本时，将数据发送给背景脚本：

// 监听选中文本变化事件
document.addEventListener('selectionchange', () => {
  const selectedText = window.getSelection().toString().trim();
  const currentUrl = window.location.href;

  // 仅当选中非空文本时发送数据
  if (selectedText) {
    chrome.runtime.sendMessage({
      type: 'SELECTION_CAPTURED',
      payload: {
        url: currentUrl,
        selectedText: selectedText
      }
    });
  }
});

3. 背景脚本 background.js：中转数据到Web应用 #

接收内容脚本的消息，找到你的Web应用标签页并转发数据：

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.type === 'SELECTION_CAPTURED') {
    // 替换为你的Web应用的URL规则
    chrome.tabs.query({ url: "https://your-web-app.com/*" }, (tabs) => {
      if (tabs.length > 0) {
        // 向Web应用标签页发送数据
        chrome.tabs.sendMessage(tabs[0].id, {
          type: 'RECEIVE_SELECTION_DATA',
          data: message.payload
        });
      }
    });
  }
});

// 可选：添加右键菜单让用户主动触发发送（更友好）
chrome.contextMenus.create({
  id: "sendToMyApp",
  title: "Send Selection to My App",
  contexts: ["selection"]
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "sendToMyApp") {
    const payload = {
      url: tab.url,
      selectedText: info.selectionText
    };
    chrome.tabs.query({ url: "https://your-web-app.com/*" }, (tabs) => {
      if (tabs.length > 0) {
        chrome.tabs.sendMessage(tabs[0].id, {
          type: 'RECEIVE_SELECTION_DATA',
          data: payload
        });
      }
    });
  }
});

4. Web应用前端代码：接收并展示数据 #

在你的Web应用中添加监听，接收扩展发来的数据并填充到文本框：

<!-- 你的Web应用中的文本框 -->
<input type="text" id="url-input" placeholder="捕获的URL">
<textarea id="selected-text-input" placeholder="捕获的选中文本"></textarea>

<script>
// 监听来自扩展的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'RECEIVE_SELECTION_DATA') {
    // 填充到文本框
    document.getElementById('url-input').value = message.data.url;
    document.getElementById('selected-text-input').value = message.data.selectedText;

    // 可选：自动提交到数据库
    // fetch('/api/save-selection', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(message.data)
    // })
    // .then(res => res.json())
    // .then(data => console.log('Saved successfully:', data));
  }
});
</script>

三、关键注意事项 #

• 浏览器兼容性：如果要支持Firefox，只需调整manifest.json的背景脚本配置（将service_worker改为scripts数组）。
• 权限配置：确保扩展的permissions包含必要的权限（如contextMenus用于右键菜单，<all_urls>用于注入内容脚本）。
• 用户体验：自动监听selectionchange可能会频繁触发，建议优先使用右键菜单的主动触发方式，避免打扰用户。
• 同源策略：你的Web应用必须在扩展配置的允许列表中，否则无法接收消息。

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