Chrome记事本扩展点击无响应问题排查（无报错）

我开发了一款可在任意网页添加笔记的Chrome记事本扩展，已修复所有报错，但点击“Open Notepad”按钮无任何反应。目前仅发现service worker处于非活动状态，无法定位问题原因。以下是相关代码文件：

manifest.json #

{
  "manifest_version": 3,
  "name": "Notepad Extension",
  "version": "1.0",
  "description": "A simple notepad extension for Chrome",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "logo.png"
    }
  },
  "icons": {
    "16": "logo.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

content.js #

// Content script (content.js)
console.log("Content script loaded.");
console.log("Content script is running.");


function openNotepad() {
  const notepad = document.createElement("textarea");
  notepad.id = "notepad-extension";
  notepad.style.position = "fixed";
  notepad.style.top = "10px";
  notepad.style.left = "10px";
  notepad.style.width = "300px";
  notepad.style.height = "200px";
  notepad.style.zIndex = "9999";
  document.body.appendChild(notepad);
}

background.js #

// Callback function for chrome.tabs.query
console.log("Background script is running.");

function handleTabs(tabs) {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }

  // Find the active tab among the queried tabs
  const activeTab = tabs.find(tab => tab.active);

  if (activeTab) {
    chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      function: openNotepad,
    });
  } else {
    console.error("Active tab not found.");
  }
}

// Function to open the notepad in the content script
function openNotepad() {
  const notepad = document.createElement("textarea");
  notepad.id = "notepad-extension";
  notepad.style.position = "fixed";
  notepad.style.top = "10px";
  notepad.style.left = "10px";
  notepad.style.width = "300px";
  notepad.style.height = "200px";
  notepad.style.zIndex = "9999";
  document.body.appendChild(notepad);
}

// Add an event listener for when the extension icon is clicked
chrome.action.onClicked.addListener(function () {
  // Query all tabs to find the active tab
  chrome.tabs.query({}, handleTabs);
});

popup.js #

// Callback function for chrome.tabs.query
function handleTabs(tabs) {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }

  // Find the active tab among the queried tabs
  const activeTab = tabs.find(tab => tab.active);

  if (activeTab) {
    chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      function: openNotepad,
    });
  } else {
    console.error("Active tab not found.");
  }
}

// Function to open the notepad in the content script
function openNotepad() {
  const notepad = document.createElement("textarea");
  notepad.id = "notepad-extension";
  notepad.style.position = "fixed";
  notepad.style.top = "10px";
  notepad.style.left = "10px";
  notepad.style.width = "300px";
  notepad.style.height = "200px";
  notepad.style.zIndex = "9999";
  document.body.appendChild(notepad);
}

// Add an event listener for when the extension icon is clicked
chrome.action.onClicked.addListener(function () {
  // Query all tabs to find the active tab
  chrome.tabs.query({}, handleTabs);
});

popup.html #

<!DOCTYPE html>
<html>
<head>
  <title>Notepad Extension</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="openNotepadButton">Open Notepad</button>
</body>
</html>

问题原因及修复方案 #

1. 按钮未绑定点击事件

原popup.js中监听的是chrome.action.onClicked，但当扩展配置了default_popup时，点击扩展图标会弹出popup，该事件不会触发。需要给popup内的按钮单独绑定点击事件。

2. 缺少必要权限

使用chrome.scripting.executeScript需要在manifest中添加scripting权限，否则无法注入脚本到页面。

3. 代码逻辑冗余

background.js和popup.js中重复编写了相同的逻辑，popup内的操作直接在popup.js中处理即可。

具体修复步骤 #

修改manifest.json

添加scripting权限：

"permissions": ["activeTab", "scripting"]

修改popup.js

替换为以下代码，绑定按钮点击事件并简化标签查询逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const openBtn = document.getElementById('openNotepadButton');
  openBtn.addEventListener('click', () => {
    // 直接查询当前窗口的活跃标签
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError);
        return;
      }
      const activeTab = tabs[0];
      if (activeTab) {
        chrome.scripting.executeScript({
          target: { tabId: activeTab.id },
          function: openNotepad,
        });
      } else {
        console.error("未找到活跃标签页");
      }
    });
  });
});

function openNotepad() {
  const notepad = document.createElement("textarea");
  notepad.id = "notepad-extension";
  notepad.style.position = "fixed";
  notepad.style.top = "10px";
  notepad.style.left = "10px";
  notepad.style.width = "300px";
  notepad.style.height = "200px";
  notepad.style.zIndex = "9999";
  // 增加样式让记事本更显眼
  notepad.style.padding = "10px";
  notepad.style.border = "2px solid #4285F4";
  notepad.style.backgroundColor = "#ffffff";
  notepad.style.fontSize = "14px";
  document.body.appendChild(notepad);
}

关于service worker非活动状态

manifest v3的service worker会在闲置时自动休眠，这是正常行为，不会影响popup按钮的点击逻辑，无需额外处理。

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