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

36 阅读 0 评论 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插件开发文档进行适配。

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 编写一个Chrome插件，网页选择文字后，右键出现菜单“search with bing”，选择菜单后用bing搜索文字

点赞(0) 打赏

本文分类：文章资讯
本文标签：编写一个Chrome插件，网页选择文字后，右键出现菜单“search with bing”，选择菜单后用bing搜索文字
浏览次数：36 次浏览
本文链接：https://freeymw.com/article/19426.html

上一篇 > C++HTTP简易留言板
下一篇 > AJAX(1)——axios库的使用

评论列表共有 0 条评论

暂无评论

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

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复