Chrome扩展开发问题：Manifest V3下点击图标执行JS遇alert未定义错误

问题场景 #

开发一款无HTML的Chrome扩展，基于Manifest V3的background service-worker架构，期望点击图标时运行JS弹出包含页面DOM元素（如某DIV的ID）的提示框，但运行时报错：

Uncaught ReferenceError: alert is not defined

相关代码如下：
manifest.json

{
  "manifest_version": 3,
  "name": "Practice",
  "description": "Practice",
  "version": "1.0",
  "action": {
    "default_icon": "practice.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["practice.js"],
    "run_at": "document_end"
  }]
}

background.js

chrome.tabs.onUpdated.addListener(function () {
  chrome.tabs.executeScript(null, { file: "practice.js" });
});

practice.js

var elem = document.getElementById("myDiv");
alert(elem ? 'found: ' + elem.id : 'not found');

错误原因 #

1. API废弃与权限缺失：Manifest V3中chrome.tabs.executeScript已被废弃，需使用chrome.scripting.executeScript，且未声明scripting权限。
2. 执行上下文错误：alert是页面DOM上下文的API，而service-worker是独立的后台环境，无DOM访问能力也不支持alert。同时当前代码监听tabs.onUpdated事件，与“点击图标触发”的需求不匹配。

修正方案 #

1. 更新manifest.json #

添加scripting权限和对应宿主权限，移除不必要的自动注入配置（若需自动注入可保留，但需注意重复执行问题）：

{
  "manifest_version": 3,
  "name": "Practice",
  "description": "Practice",
  "version": "1.0",
  "action": {
    "default_icon": "practice.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["scripting"],
  "host_permissions": ["<all_urls>"]
}

2. 修改background.js #

监听扩展图标点击事件，使用新API将脚本注入到当前激活的标签页：

chrome.action.onClicked.addListener(async (tab) => {
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["practice.js"]
  });
});

3. 保留practice.js不变 #

脚本注入到页面上下文后，即可正常访问document和alert：

var elem = document.getElementById("myDiv");
alert(elem ? 'found: ' + elem.id : 'not found');

效果说明 #

修改完成后，点击扩展图标时，脚本会注入到当前打开的页面上下文执行，能正常弹出包含DOM元素信息的提示框，不再出现alert未定义的错误。

内容的提问来源于stack exchange，提问作者gene b.