chrome如何编写插件将任意图片或选择的文字发送给localhost的http api?
网友回复
可以通过创建一个 Chrome 插件,利用其强大的 API 来实现这个功能。核心思路是:
添加右键菜单:当用户右键点击图片或选中文字时,在上下文菜单中显示我们的自定义选项。
捕获数据:
对于图片,Chrome 的上下文菜单 API 会直接提供图片的 URL (srcUrl)。
对于文字,我们需要向当前页面注入一个脚本来获取用户选中的文本。
发送数据:在后台脚本中,使用 fetch API 将捕获到的数据以 JSON 格式发送到你本地的 HTTP API。
下面是详细的步骤和代码。
第1步:创建 manifest.json
这是插件的配置文件,定义了插件的基本信息和所需的权限。
{
"manifest_version": 3,
"name": "Send to Localhost",
"version": "1.0",
"description": "Send selected text or images to a local HTTP API.",
"permissions": [
"contextMenus", // 用于创建右键菜单
"activeTab", // 用于获取当前活动标签页的权限
"scripting" // 用于向页面注入脚本(获取选中文本)
],
"host_permissions": [
"http://localhost/*", // 关键:允许插件向 localhost 发起请求
"https://localhost/*"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"48": "icon.png"
}
} 权限解释:
contextMenus: 创建和管理右键菜单。
activeTab + scripting: 这对组合是 Manifest V3 中向当前页面临时注入脚本的标准方式,用于获取选中的文字。
host_permissions: 这是最重要的权限。它明确允许你的插件向 http://localhost 或 https://localhost 下的任何端口和路径发起网络请求。没有这个,fetch 请求会被浏览器的安全策略阻止。
第2步:创建后台脚本 background.js
这是插件的核心逻辑所在,负责创建菜单、处理点击事件和发送数据。
// 在插件安装时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
// 为选中的文字创建菜单项
chrome.contextMenus.create({
id: "send-text",
title: "发送选中的文字到 Localhost",
contexts: ["selection"] // 只在用户选中文字时显示
});
// 为图片创建菜单项
chrome.contextMenus.create({
id: "send-image",
title: "发送图片到 Localhost",
contexts: ["image"] // 只在用户右键点击图片时显示
});
});
// 监听右键菜单的点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "send-text") {
// 处理发送文字
handleSendText(tab.id);
} else if (info.menuItemId === "send-image") {
// 处理发送图片
handleSendImage(info.srcUrl);
}
});
// 处理发送文字的逻辑
async function handleSendText(tabId) {
// 向当前标签页注入一个脚本来获取选中的文字
const results = await chrome.scripting.executeScript({
target: { tabId: tabId },
function: ...点击查看剩余70%


