如何通过Chrome扩展content.js调用网页元素右键菜单且不替换页面内容？

针对你的两个问题，直接给你可行的实现方案，完全基于content.js完成：

1. 正确触发自定义右键菜单不替换页面内容 #

问题出在你直接修改了目标元素（textarea）的innerHTML，把原内容覆盖了。正确的做法是创建一个独立的右键菜单DOM元素，挂载到页面的body上，而不是修改目标元素本身。这样既不会破坏原页面内容，还能灵活控制菜单的显示位置。

2. 替代innerHTML的方法 #

用原生DOM API（document.createElement、appendChild等）来构建菜单元素，比innerHTML更安全（避免XSS风险），也能更精细地控制每个元素的事件和样式。

完整content.js实现代码 #

// 先获取你已经高亮的元素（替换成你的实际元素选择器或集合）
const webElements = document.querySelectorAll('.your-highlight-class');

// 创建右键菜单容器
const contextMenu = document.createElement('div');
contextMenu.style.cssText = `
  position: fixed;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 150px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 999999; /* 确保菜单在最上层 */
`;
document.body.appendChild(contextMenu);

// 给菜单添加选项
const menuItems = ['Option1', 'Option2', 'Option3'];
menuItems.forEach(itemText => {
  const item = document.createElement('div');
  item.style.cssText = `
    padding: 8px 16px;
    cursor: pointer;
  `;
  item.textContent = itemText;
  
  // 菜单项点击逻辑
  item.addEventListener('click', () => {
    console.log(`执行${itemText}操作`);
    // 这里添加你的业务逻辑，比如处理当前选中的textarea
    contextMenu.style.display = 'none';
  });
  
  // 鼠标hover样式
  item.addEventListener('mouseover', () => {
    item.style.background = '#f0f0f0';
  });
  item.addEventListener('mouseout', () => {
    item.style.background = 'transparent';
  });
  
  contextMenu.appendChild(item);
});

// 给每个高亮元素绑定右键事件
webElements.forEach(el => {
  el.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // 阻止浏览器默认右键菜单
    
    // 定位菜单到鼠标点击位置
    contextMenu.style.left = `${e.clientX}px`;
    contextMenu.style.top = `${e.clientY}px`;
    contextMenu.style.display = 'block';
  });
});

// 点击页面其他区域隐藏菜单
document.addEventListener('click', () => {
  contextMenu.style.display = 'none';
});

关键说明 #

• 菜单是独立的DOM元素，挂载在body下，完全不会影响原页面的任何元素内容。
• 用clientX/clientY定位菜单到鼠标右键点击的位置，符合用户操作习惯。
• 全局点击监听实现菜单自动隐藏，提升交互体验。
• 用DOM API构建菜单，比innerHTML更安全，也更容易维护每个菜单项的事件逻辑。

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