当前位置：首页 > news >正文

编写一个Chrome插件，网页选择文字后，右键出现菜单“search with bing”，选择菜单后用bing搜索文字

news 2025/8/15 15:04:56

kimi ai 生成，测试可用，需要自行准备图标文件
创建一个简单的Chrome插件来实现选择文本后的搜索功能，你需要完成以下几个步骤：

创建插件的基础文件夹和文件：
- 创建一个文件夹用于存放插件的所有文件。
- 在该文件夹中创建以下文件：
  - manifest.json：插件的配置文件。
  - popup.html：右键菜单选择后的弹出页面。
  - popup.js：弹出页面的JavaScript逻辑。
  - background.js：后台脚本，用于处理搜索逻辑。

配置manifest.json：

{"manifest_version": 3,"name": "Bing Search","version": "1.0","description": "Search selected text with Bing","permissions": ["contextMenus"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup.html","default_icon": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"}},"icons": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"}
}

请确保你的插件文件夹中包含图标文件。

创建popup.html：

<!DOCTYPE html>
<html>
<head><title>Search with Bing</title><script src="popup.js"></script>
</head>
<body><h1>Search with Bing</h1>
</body>
</html>

编写popup.js：

document.addEventListener('DOMContentLoaded', function() {document.body.addEventListener('click', function(event) {if (event.target.tagName === 'A') {chrome.runtime.sendMessage({searchQuery: window.getSelection().toString()});}});
});

编写background.js：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {if (request.searchQuery) {const searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(request.searchQuery)}`;chrome.tabs.create({ url: searchUrl });}}
);

添加右键菜单项：

你需要在background.js中添加逻辑来创建上下文菜单项。

chrome.contextMenus.create({id: "searchWithBing",title: "Search with Bing",contexts: ["selection"]
});chrome.contextMenus.onClicked.addListener(function(info) {if (info.menuItemId === "searchWithBing") {chrome.tabs.create({url: `https://www.bing.com/search?q=${encodeURIComponent(info.selectionText)}`});}
});

加载插件到Chrome：
- 打开Chrome，进入chrome://extensions/。
- 开启“开发者模式”。
- 点击“加载已解压的扩展程序”，选择你的插件文件夹。
测试插件：
- 在网页上选择文本，右键点击，应该看到“Search with Bing”选项。
- 选择该选项，应打开一个新的标签页并用Bing搜索所选文本。