Chrome扩展如何将项目标题悬浮提示改为右键上下文菜单触发选项

实现需要结合**content script（页面注入脚本）和background service worker（扩展后台脚本）**配合完成，核心逻辑是右键时先判断点击区域是否为项目节点，再控制菜单显隐、传递对应标题数据。

第一步：调整manifest.json扩展配置 #

需先声明用到的权限和脚本注入规则，以下是Manifest V3版本的配置示例：

{
  "manifest_version": 3,
  "name": "项目标题提示工具",
  "version": "1.0",
  "permissions": ["contextMenus", "storage", "activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["https://你的企业网站域名/*"], // 替换为实际站点地址
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

第二步：编写content.js（页面注入脚本） #

负责监听页面右键事件，判断点击区域是否属于项目节点，同步状态到扩展存储：

// 监听页面右键点击
document.addEventListener('contextmenu', (e) => {
  // 查找当前点击元素最近的.project-name父节点
  const targetProject = e.target.closest('.project-name');
  if (targetProject) {
    // 匹配到项目区域，提取标题存入存储
    const title = targetProject.querySelector('.project-name.ng-binding')?.getAttribute('title');
    chrome.storage.local.set({
      isInProjectArea: true,
      currentProjectTitle: title || ''
    });
  } else {
    // 不在项目区域，清空状态标记
    chrome.storage.local.set({
      isInProjectArea: false,
      currentProjectTitle: ''
    });
  }
});

第三步：编写background.js（扩展后台脚本） #

负责注册右键菜单、动态控制显隐、处理点击触发逻辑：

// 扩展安装完成时注册右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'alert_project_title',
    title: "Alert Project Title",
    contexts: ["all"],
    visible: false // 默认隐藏
  });
});

// 右键菜单展示前触发，更新显隐状态
chrome.contextMenus.onShown.addListener(async () => {
  const { isInProjectArea } = await chrome.storage.local.get('isInProjectArea');
  chrome.contextMenus.update('alert_project_title', {
    visible: !!isInProjectArea
  });
});

// 右键菜单点击触发弹窗
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId !== 'alert_project_title') return;
  const { currentProjectTitle } = await chrome.storage.local.get('currentProjectTitle');
  // 调用页面脚本弹出标题
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: (title) => alert(title),
    args: [currentProjectTitle]
  });
});

补充说明 #

如果仍在使用Manifest V2版本，只需将background的service_worker配置改为普通background页，chrome.scripting.executeScript替换为chrome.tabs.sendMessage通知content script触发alert即可。该方案无需遍历绑定所有项目节点，对动态加载的项目列表也能正常生效。

内容的提问来源于stack exchange，提问作者John-Henry