Chrome.scripting无作用致扩展功能失效，求故障原因

我在完成Chrome扩展入门教程的「向活动标签注入脚本」部分时，复制了示例扩展文件，但页面无法切换为简洁布局。扩展操作徽章能在「ON」和「OFF」间切换，但chrome.scripting模块的注入操作完全无效——无论是注入CSS还是执行脚本都没有效果。通过排查确认代码执行到了注入步骤，但极简测试CSS（如p {background-color: blue;}）也不生效。所有测试均在教程指定的https://developer.chrome.com/docs/页面进行。

相关代码文件 #

Manifest.json

{"manifest_version": 3,"name": "Focus Mode","description": "Enables focus mode on Chrome's official Extensions and Chrome Web Store documentation","version": "1.0","icons": {"16": "images/icon-16.png","32": "images/icon-32.png","48": "images/icon-48.png","128": "images/icon-128.png"},"background": {"service_worker": "background.js"},"action": {"default_icon": {"16": "images/icon-16.png","32": "images/icon-32.png","58": "images/icon-48.png","128": "images/icon-128.png"}},"permissions": ["activeTab","scripting"]}

background.js

chrome.runtime.onInstalled.addListener(() => {chrome.action.setBadgeText({text: "OFF"});});const chromeDocs = "https://developer.chrome.com/docs/";chrome.action.onClicked.addListener(async (tab) => {if (tab.url.startsWith(chromeDocs)) {const prevState = await chrome.action.getBadgeText({ tabId: tab.id});const nextState = (prevState === "ON") ? "OFF" : "ON";await chrome.action.setBadgeText({tabId: tab.id,text: nextState,});if (nextState === "ON") {chrome.scripting.insertCSS({css: "FocusMode.css",target: { tabId: tab.id },});} else if (nextState === "OFF") {chrome.scripting.removeCSS({css: "FocusMode.css",target: { tabId: tab.id },});}}});

FocusMode.css

* {display: none !important;}html,body,*:has(article),article,article * {display: revert !important;}[role='navigation'] {display: none !important;}article {margin: auto;max-width: 700px;}

可能的故障原因 #

• insertCSS参数使用错误：Manifest V3中chrome.scripting.insertCSS的css字段要求传入CSS字符串，而非本地文件名。若要注入本地CSS文件，需改用files数组参数，例如files: ["FocusMode.css"]。当前代码相当于注入了字符串"FocusMode.css"作为CSS规则，自然不会产生任何效果，这是最核心的问题。
• 权限范围限制：虽然已声明activeTab和scripting权限，但可尝试在manifest.json中添加明确的站点权限："host_permissions": ["https://developer.chrome.com/docs/*"]，确保scripting模块能访问目标站点。
• Service Worker运行异常：在Chrome扩展管理页面的「Service Worker」选项卡查看日志，排查是否有未捕获的错误导致注入代码中断执行。
• 标签ID有效性问题：极少数情况下可能存在标签ID过期或无效的情况，可在注入前通过chrome.tabs.get(tab.id)验证标签是否存在。

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