Firefox WebExtension：如何在menus.onClicked中调用getElementsByClassName

错误原因 #

你遇到的TypeError: tabs.getElementsByClassName is not a function有两个核心原因：

1. browser.tabs.query()返回的是Promise对象，不是DOM节点，直接调用DOM方法肯定报错；
2. 扩展的背景脚本（background.js）运行在独立的隔离上下文，完全无法直接访问网页的DOM结构，必须通过**内容脚本（Content Script）**来操作页面元素。

解决方案步骤 #

核心思路是：背景脚本负责监听菜单点击事件，通过消息通信让内容脚本去获取DOM内容，再把结果传回背景脚本，最后完成剪贴板复制。

1. 编写内容脚本（content.js） #

内容脚本运行在网页上下文，可直接访问DOM，负责获取目标元素的HTML：

// 监听来自背景脚本的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getTargetHtml') {
    // 获取目标元素（注意类名的写法：用点连接多个类）
    const targetElement = document.querySelector('.central-featured-lang.lang1');
    if (targetElement) {
      sendResponse({ html: targetElement.innerHTML });
    } else {
      sendResponse({ error: '未找到目标元素' });
    }
  }
});

2. 修正背景脚本（background.js） #

背景脚本负责菜单注册、点击监听，以及和内容脚本通信、剪贴板操作：

// 注册右键菜单（若已注册可忽略）
browser.menus.create({
  id: 'divcopy-link',
  title: '复制目标元素HTML',
  contexts: ['page']
});

// 菜单点击事件处理
browser.menus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId !== 'divcopy-link') return;

  try {
    // 向当前标签页的内容脚本发送请求
    const response = await browser.tabs.sendMessage(tab.id, { action: 'getTargetHtml' });
    
    if (response.html) {
      // 将内容写入剪贴板
      await navigator.clipboard.writeText(response.html);
      console.log('目标元素HTML已复制到剪贴板');
    } else {
      console.error(response.error);
    }
  } catch (err) {
    console.error('操作失败:', err);
  }
});

3. 配置manifest.json #

需要声明权限和内容脚本的匹配规则：

{
  "manifest_version": 3,
  "name": "复制目标元素HTML",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可限制为你需要的网站域名，比如"*://*.example.com/*"
      "js": ["content.js"]
    }
  ],
  "permissions": ["menus", "activeTab", "clipboardWrite"]
}

关键注意点 #

• 内容脚本和背景脚本通过browser.runtime.sendMessage/browser.tabs.sendMessage实现跨上下文通信；
• 必须在manifest.json中声明clipboardWrite权限才能写入剪贴板；
• 若仅在特定网站生效，将matches字段改为对应域名，避免不必要的脚本注入。

内容的提问来源于stack exchange，提问作者g1ra