如何实现Chrome扩展将选中文本与URL通过POST请求发送至外部API？

我来帮你搞定这个需求！要把选中的文本和当前页面URL通过POST发送到外部API，你需要对popup.js做一些扩展，同时确保你的扩展有足够的权限。下面是具体的步骤和代码示例：

1. 修改popup.js代码 #

根据你使用的Chrome扩展Manifest版本（V2或V3），代码会略有不同，我都给你列出来：

如果你用的是Manifest V3（推荐） #

// 获取当前激活的标签页
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  const currentTab = tabs[0];
  const pageUrl = currentTab.url;

  // 注入脚本获取页面选中的文本
  chrome.scripting.executeScript({
    target: { tabId: currentTab.id },
    func: () => window.getSelection().toString()
  }, function(selectionResults) {
    const selectedText = selectionResults[0].result;

    // 准备要发送给API的数据
    const postData = {
      selected_text: selectedText,
      page_url: pageUrl
    };

    // 发送POST请求到外部API
    fetch('https://your-api-endpoint.com/your-path', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
        // 如果API需要认证，这里可以添加Authorization头，比如 'Authorization': 'Bearer YOUR_TOKEN'
      },
      body: JSON.stringify(postData)
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(apiResponse => {
      // 请求成功后，给用户显示反馈
      document.getElementById("output").innerHTML = "数据已成功发送！";
      console.log('API返回的数据:', apiResponse);
    })
    .catch(error => {
      // 处理请求失败的情况
      document.getElementById("output").innerHTML = `发送失败: ${error.message}`;
      console.error('请求出错:', error);
    });
  });
});

如果你用的是Manifest V2 #

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  const currentTab = tabs[0];
  const pageUrl = currentTab.url;

  // 获取页面选中的文本
  chrome.tabs.executeScript({ code: "window.getSelection().toString();" }, function(selectionResults) {
    const selectedText = selectionResults[0];

    // 准备POST数据
    const postData = {
      selected_text: selectedText,
      page_url: pageUrl
    };

    // 发送POST请求
    fetch('https://your-api-endpoint.com/your-path', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .then(data => {
      document.getElementById("output").innerHTML = "数据已成功发送！";
      console.log('API响应:', data);
    })
    .catch(error => {
      document.getElementById("output").innerHTML = "发送失败，请重试。";
      console.error('请求错误:', error);
    });
  });
});

2. 更新manifest.json权限 #

不管用V2还是V3，都需要在manifest文件中添加必要的权限，确保扩展能访问当前标签页和目标API：

Manifest V3 权限配置 #

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://your-api-endpoint.com/*"]
}

Manifest V2 权限配置 #

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "https://your-api-endpoint.com/*"]
}

关键说明 #

• 把https://your-api-endpoint.com/your-path替换成你实际的外部API地址。
• 如果API需要特定的请求头（比如认证令牌），直接在headers对象中添加即可。
• 代码里添加了成功和失败的反馈，你可以根据需求调整显示的内容。

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