开发Firefox右键菜单扩展：实现选中手机号调用本地URL的点击拨号功能

看起来你在开发这款点击拨号扩展时遇到了几个关键卡点，尤其是右键菜单不生效的问题——根源是你混用了Add-on SDK和WebExtensions的API，这两套体系不兼容，导致代码无法正常工作。我帮你逐个解决疑问，同时给出完整的可运行代码：

1. 先解决右键菜单不生效的问题（核心问题） #

你当前的代码用了Add-on SDK的require("sdk/context-menu")，但你的manifest.json是WebExtensions格式（manifest_version:2），两者不能混用。我们改用WebExtensions标准的chrome.contextMenus API来创建右键菜单，同时需要在权限里声明contextMenus。

2. 获取并传递选中的手机号 #

右键菜单可以设置仅在选中文本时显示，点击菜单时直接通过API获取选中的文本内容，再传入本地URL即可。

3. 调用本地URL的方式 #

直接用chrome.tabs.create打开本地服务的URL（适合拨号场景，直观可见），如果不需要打开新标签，也可以用fetch发起静默请求，但前者更符合用户预期。

修正后的完整代码 #

manifest.json（补充权限+修正格式） #

{
  "manifest_version": 2,
  "name": "OBS_Extension",
  "version": "1.0",
  "background": {
    "scripts": ["OBS_Extension.js"]
  },
  "page_action": {
    "default_icon": "icons/dial.png"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "contextMenus"  // 新增右键菜单权限，必须添加！
  ]
}

OBS_Extension.js（改用WebExtensions API） #

// 创建右键菜单：仅选中文本时显示，标题自动带入选中内容
chrome.contextMenus.create({
  id: "click-to-dial",
  title: "点击拨号: %s",  // %s会自动替换为选中的手机号
  contexts: ["selection"],
  documentUrlPatterns: ["<all_urls>"]  // 允许在所有页面使用
});

// 监听菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  // 获取并清理选中的手机号
  const phoneNumber = info.selectionText.trim();
  
  // 可选：添加手机号格式校验，避免无效请求
  const validPhone = /^1[3-9]\d{9}$|^\d{7,11}$/.test(phoneNumber);
  if (!validPhone) {
    alert("请选择有效的手机号！");
    return;
  }

  // 拼接本地URL并打开新标签
  const dialUrl = `http://localhost:49324/Home/Index?tel=${encodeURIComponent(phoneNumber)}`;
  chrome.tabs.create({ url: dialUrl });
});

关键细节说明 #

• 权限必须加：contextMenus权限是创建右键菜单的前提，没加的话菜单根本不会显示。
• URL编码：用encodeURIComponent处理手机号，防止空格、+号等特殊字符导致URL解析错误。
• 格式校验：我加了简单的手机号正则，你可以根据自己的需求调整规则（比如支持国际号码）。
• 兼容性：这套代码在Firefox 55+完全兼容，符合WebExtensions标准，后续升级到manifest v3也容易迁移。

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