Chrome词典扩展：实现右键单次点击打开侧边栏并显示释义

问题原因 #

你的代码存在两个核心问题：

• 脚本上下文混淆：将service-worker.js同时作为后台服务工作者和侧边栏页面的脚本使用。后台服务工作者运行在独立的无DOM环境中，调用showDef函数时根本无法访问侧边栏的DOM元素，直接导致第一次点击失效。
• 时序问题：第一次点击时侧边栏页面刚初始化，后台脚本尝试操作侧边栏DOM时，页面还未加载完成，自然无法生效；第二次点击时侧边栏已加载，但原逻辑仍依赖错误的上下文调用，本质是侥幸生效而非正确逻辑。

修复方案 #

1. 拆分脚本文件 #

创建独立的sidepanel.js负责侧边栏的DOM操作和消息接收，不再复用后台脚本。

2. 修改service-worker.js #

后台脚本仅负责创建右键菜单、打开侧边栏，并向侧边栏发送选中的单词：

// Copyright 2023 Google LLC
// 省略许可证注释

function setupContextMenu() {
  chrome.contextMenus.create({
    id: 'define-word',
    title: 'WordBank It!',
    contexts: ['selection']
  });
}

chrome.runtime.onInstalled.addListener(() => {
  setupContextMenu();
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'define-word') {
    // 等待侧边栏完全打开
    await chrome.sidePanel.open({ windowId: tab.windowId });
    // 向侧边栏发送选中的单词
    chrome.runtime.sendMessage({
      type: 'SHOW_DEFINITION',
      word: info.selectionText
    });
  }
});

3. 创建sidepanel.js #

负责接收后台发送的单词，更新侧边栏DOM（需将你的本地词典数据words定义在此）：

// 示例本地词典数据，请替换为你的实际数据
const words = {
  "hello": "用于问候的常用语",
  "apple": "一种常见的水果，多为红色或绿色"
};

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'SHOW_DEFINITION') {
    showDef(message.word);
  }
});

function showDef(word) {
  // 隐藏提示文本
  document.getElementById('select-a-word').style.display = 'none';
  
  // 获取单词释义
  const lowerWord = word.toLowerCase();
  const definition = words[lowerWord] || "未找到该单词的释义";
  
  // 更新DOM内容
  document.getElementById('definition-word').textContent = word;
  document.getElementById('definition-text').textContent = definition;
}

4. 修改sidepanel.html #

引入新的sidepanel.js，移除对service-worker.js的引用：

<html>
  <head>
    <title>Dictionary Side Panel</title>
  </head>
  <body>
    <h1>Dictionary</h1>
    <hr />
    <p id="select-a-word">Select a word to see the definition.</p>
    <div>
      <h2 id="definition-word"></h2>
      <p id="definition-text"></p>
    </div>
    <script src="sidepanel.js"></script>
  </body>
</html>

5. 保持manifest.json不变 #

原配置无需修改，确保side_panel路径正确即可。

关键逻辑说明 #

• 利用chrome.sidePanel.open()的异步特性，等待侧边栏完全加载后再发送消息，解决时序问题。
• 通过Chrome扩展的消息通信机制，在后台脚本和侧边栏页面之间传递数据，确保DOM操作在正确的上下文执行。
• 将本地词典数据放在侧边栏脚本中，直接用于释义展示，避免跨上下文数据访问的问题。

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