Chrome扩展仅在调试弹窗时生效问题求助

我开发了一款基于JavaScript的Chrome专注扩展，功能是让用户添加URL到封禁列表（存储在chrome.storage.local），当标签页更新时自动关闭匹配封禁列表的标签页。但现在扩展只有在打开弹窗控制台时才生效——正常打开封禁网站没反应，打开弹窗调试并刷新标签页时才会关闭标签页，不符合预期。

原脚本代码：

document.addEventListener('DOMContentLoaded', () => {
    /* URL Data from the extension UI (HTML file) */
    /* -> InterfaceType: Buttons */
    const confirmAddButton = document.getElementById("confirmAddButton"); // Confirm add url from 'urlToAdd' textbox
    const confirmRemoveButton = document.getElementById("confirmRemoveButton"); // Confirm remove url from 'urlToRemove' textbox
    /* -> InterfaceType: Textboxes */
    const urlToAdd = document.getElementById("urlToAdd"); // User inputted url to be added to the list of banned urls.
    const urlToRemove = document.getElementById("urlToRemove"); // User inputted url to be added to the list of banned urls.

    /* Clear Everything from a particular storage key */
    /* -> InterfaceType: Buttons*/
    const clearAllUrls = document.getElementById("clearAllUrls"); // Removes all data from the storage key 'urlKey'

    /* Display*/
    const display = document.getElementById("display"); // The display

    // When confirmAddButton is clicked:
    confirmAddButton.addEventListener('click', () => {
        // Get all data from 'urlKey' storage
        chrome.storage.local.get(['urlKey']).then((result) => {
            let bannedUrlsList = result.urlKey // Assign result to temporary list
            // Checks to see if the urlToAdd is already in the list of bannedUrls 
            if (bannedUrlsList.includes(urlToAdd.value) == false) { // If it is not, add it to the list
                bannedUrlsList = bannedUrlsList.concat(urlToAdd.value) // Add urlToAdd.value to the temporary list
                // set the 'urlKey' storage to the temporary list which has the added url in it
                chrome.storage.local.set({'urlKey': bannedUrlsList}).then(() => {
                    display.innerHTML = `${urlToAdd.value} was added to the list of banned urls`
                })
            } else { // Else, alert the user that the url is already in the list
                display.innerHTML = `${urlToAdd.value} is already in the list`
            }
        })
    });

    // When clearAllUrls is clicked:
    clearAllUrls.addEventListener('click', () => {
        chrome.storage.local.set({'urlKey': []}).then(() => {
            display.innerHTML = `The list of banned urls has been completely wiped`
        })
    });

    // Function checks all tabs to make sure they aren't banned, closes them if they are
    function isValidTab() {
        // Get all the open tabs from chrome
        chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
            for (let i = 0; i < tabs.length; i++) {
                const currentTabUrl = tabs[i].url; //For each tab, assign the tabs URL to a value 'currentTabUrl'
                // Get the list of banned URLs from the 'urlKey' storage
                chrome.storage.local.get(['urlKey']).then((result) => {
                    let bannedUrlsList = result.urlKey // Assign result to temporary list
                    // If the list of banned urls contains the url of the current tab, close the tab, else, leave it be
                    if (bannedUrlsList.includes(currentTabUrl)) {
                        chrome.tabs.remove(tabs[i].id) // Closes the current tab
                        display.innerHTML = `${currentTabUrl} was closed`
                    } else {
                        _ = 1 // Do nothing
                    }
                })
            }
        })
    };

    // Every time a tab is updated or changed, or a new tab is created, close all banned tabs
    chrome.tabs.onUpdated.addListener(() => {
        isValidTab()
    });
}); 

原manifest.json配置：

{
    "permissions": [
        "tabs",
        "storage"
    ],
    "background": [
        "service_worker": "Code.js"
    ]
}

核心问题分析 #

1. Manifest格式错误：background字段配置错误，正确的Service Worker配置应为对象而非数组；且原脚本包含DOM操作（如document.getElementById），Service Worker是无DOM环境，无法执行这类代码。
2. 代码职责混淆：原脚本同时包含弹窗UI交互逻辑和后台监听逻辑，弹窗脚本仅在弹窗打开时运行，导致chrome.tabs.onUpdated监听只有弹窗打开时才生效，这就是功能仅在调试弹窗时工作的原因。

修复步骤 #

1. 修正Manifest.json格式 #

采用Chrome扩展V3标准，拆分弹窗脚本与后台脚本：

{
  "manifest_version": 3,
  "name": "专注助手",
  "version": "1.0",
  "permissions": ["tabs", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 拆分代码为两个独立文件 #

后台脚本（background.js）

负责后台监听标签页事件，无DOM操作：

// 监听标签页加载完成事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    checkAndCloseBannedTab(tab);
  }
});

// 监听新标签页创建事件
chrome.tabs.onCreated.addListener((tab) => {
  checkAndCloseBannedTab(tab);
});

// 检查单个标签页是否在封禁列表并关闭
async function checkAndCloseBannedTab(tab) {
  const { urlKey = [] } = await chrome.storage.local.get('urlKey');
  if (urlKey.includes(tab.url)) {
    chrome.tabs.remove(tab.id);
  }
}

弹窗脚本（popup.js）

仅处理弹窗UI交互，在弹窗打开时运行：

document.addEventListener('DOMContentLoaded', () => {
  const confirmAddButton = document.getElementById("confirmAddButton");
  const clearAllUrls = document.getElementById("clearAllUrls");
  const urlToAdd = document.getElementById("urlToAdd");
  const display = document.getElementById("display");

  // 添加URL到封禁列表
  confirmAddButton.addEventListener('click', async () => {
    const inputUrl = urlToAdd.value.trim();
    if (!inputUrl) {
      display.innerHTML = "请输入有效URL";
      return;
    }
    const { urlKey = [] } = await chrome.storage.local.get('urlKey');
    if (urlKey.includes(inputUrl)) {
      display.innerHTML = `${inputUrl} 已在封禁列表中`;
    } else {
      await chrome.storage.local.set({ urlKey: [...urlKey, inputUrl] });
      display.innerHTML = `${inputUrl} 已添加到封禁列表`;
      urlToAdd.value = '';
    }
  });

  // 清空所有封禁URL
  clearAllUrls.addEventListener('click', async () => {
    await chrome.storage.local.set({ urlKey: [] });
    display.innerHTML = "封禁列表已清空";
  });
});

3. 弹窗HTML页面（popup.html） #

确保正确引入弹窗脚本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>专注助手</title>
  <style>
    body { width: 300px; padding: 15px; }
    .input-group { margin-bottom: 10px; }
    button { margin-right: 5px; }
  </style>
</head>
<body>
  <div class="input-group">
    <input type="text" id="urlToAdd" placeholder="输入要封禁的URL">
    <button id="confirmAddButton">添加</button>
  </div>
  <button id="clearAllUrls">清空所有</button>
  <div id="display" style="margin-top: 10px;"></div>
  <script src="popup.js"></script>
</body>
</html>

额外优化建议 #

• 优化URL匹配逻辑，改为检查域名而非完整URL，避免因URL参数差异导致匹配失败；
• 添加URL格式校验，确保用户输入的是合法的HTTP/HTTPS链接；
• 在后台脚本中监听chrome.storage.onChanged事件，当封禁列表更新时自动检查所有现有标签页。

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