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

最新推荐文章于 2024-07-27 20:57:03 发布

llrraa2010

最新推荐文章于 2024-07-27 20:57:03 发布

阅读量53

点赞数 2

分类专栏： AI chrome 文章标签： chrome 前端 python

本文链接：https://blog.csdn.net/llrraa2010/article/details/140740261

版权

AI 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

chrome

2 篇文章 0 订阅

订阅专栏

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搜索所选文本。

请注意，上述代码仅为示例，实际开发中可能需要进一步的调整和完善。此外，由于Chrome插件API的更新，部分API可能有变动，请根据最新的Chrome插件开发文档进行适配。

llrraa2010

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写一个Chrome插件，网页选择文字后，右键出现菜单“search with bing”，选择菜单后用bing搜索文字

请注意，上述代码仅为示例，实际开发中可能需要进一步的调整和完善。此外，由于Chrome插件API的更新，部分API可能有变动，请根据最新的Chrome插件开发文档进行适配。kimi ai 生成，测试可用，需要自行准备图标文件。
复制链接

扫一扫

专栏目录