Manifest V3 Chrome插件开发：监听用户选择文本并注入下拉框

使用Manifest V3打造监听用户操作的Chrome插件：文本选择触发下拉框

本文将带你使用 Manifest V3 和 Chrome 扩展 API 开发一个 Chrome 插件。这个插件能够监听用户的文本选择操作，并在当前页面注入一段 HTML 代码，实现一个默认不展开、鼠标悬停时展开的下拉选择框。

一、配置清单文件 (manifest.json)

首先，我们需要在插件的清单文件 manifest.json 中声明必要的权限和事件监听器：

{
  'manifest_version': 3,
  'name': 'Dropdown Select',
  'version': '1.0',
  'permissions': [
    'activeTab'
  ],
  'background': {
    'service_worker': 'background.js'
  },
  'action': {
    'default_popup': 'popup.html'
  },
  'icons': {
    '16': 'icon.png',
    '48': 'icon.png',
    '128': 'icon.png'
  }
}

在这个清单文件中，我们声明了以下内容：

background.js：后台脚本，用于监听用户操作和注入 HTML。
popup.html：插件的弹出窗口页面。
activeTab 权限：允许插件访问当前活动的选项卡。

二、编写后台脚本 (background.js)

接下来，我们需要编写 background.js 文件，实现监听用户操作并注入 HTML 的功能：

chrome.action.onClicked.addListener(function(tab) {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: injectHTML
  });
});

function injectHTML() {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { action: 'injectHTML' });
  });
}

代码解释：

使用 chrome.action.onClicked 事件监听用户点击插件图标的动作。
调用 chrome.scripting.executeScript 方法在当前活动选项卡中执行 injectHTML 函数。
injectHTML 函数通过 chrome.tabs.sendMessage 方法向当前活动选项卡发送消息，通知其注入 HTML 代码。

三、编写内容脚本 (content.js) 并注入 HTML

我们需要编写 content.js 文件，接收来自 background.js 的消息，并根据消息内容执行相应的操作：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'injectHTML') {
    injectDropdown();
  }
});

function injectDropdown() {
  var dropdown = document.createElement('select');
  dropdown.innerHTML = '<option value='option1'>Option 1</option><option value='option2'>Option 2</option>';

  dropdown.addEventListener('mouseover', function() {
    this.size = this.options.length;
  });

  dropdown.addEventListener('mouseout', function() {
    this.size = 1;
  });

  document.body.appendChild(dropdown);
}

代码解释：

使用 chrome.runtime.onMessage 事件监听来自 background.js 发送的消息。
当接收到 action 为 'injectHTML' 的消息时，调用 injectDropdown 函数。
injectDropdown 函数创建一个下拉选择框，并设置其默认不展开，鼠标悬停时展开，移出时收起。
最后将下拉选择框添加到页面中 (document.body.appendChild(dropdown))

四、创建弹出页面 (popup.html)

最后，我们需要创建一个 popup.html 文件来显示插件的弹出页面。你可以根据自己的需要自定义这个页面，例如添加一些按钮或设置选项等。

总结

至此，我们已经完成了使用 Manifest V3 开发 Chrome 插件的基本步骤。你可以根据自己的需求，进一步扩展插件的功能，例如：

监听不同的用户操作，例如鼠标点击、键盘输入等。
根据用户选择的文本内容，动态生成下拉选择框的选项。
为下拉选择框添加更多的样式和交互效果。

希望这篇文章能够帮助你入门 Chrome 插件开发。 Happy coding! 😜