Chrome扩展修改网页样式时insertCSS失效，是否有更优实现方案？

报错核心原因 #

出现Cannot read properties of undefined (reading 'insertCSS')报错的原因有三个：

• 使用的是Manifest V2版本扩展配置，本身不支持chrome.scriptingAPI
• Manifest V3配置中未声明scripting权限
• 未同时声明activeTab和对应站点的host_permissions，无标签页操作权限

修复步骤 #

1. 修正manifest.json配置 #

使用Manifest V3，补充必要权限配置，示例如下：

{
  "manifest_version": 3,
  "name": "维基百科面板宽度调整",
  "version": "1.0",
  "permissions": ["scripting", "activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": ["https://en.wikipedia.org/*"],
  "web_accessible_resources": [
    {
      "resources": ["styles.css"],
      "matches": ["https://en.wikipedia.org/*"]
    }
  ]
}

2. 修正弹窗注入逻辑 #

调整注入代码，指定origin: 'AUTHOR'保证!important修饰符生效，同时支持自定义宽度输入和样式撤销，示例代码如下：

let isStyleInjected = false;
let currentWidth = '20em';

$('.format').click(async function() {
  // 可从弹窗输入框获取自定义宽度值
  currentWidth = $('#widthInput').val() || '20em';
  const [activeTab] = await chrome.tabs.query({currentWindow: true, active: true});
  
  if (!isStyleInjected) {
    await chrome.scripting.insertCSS({
      target: { tabId: activeTab.id },
      css: `#mw-panel {
        width: ${currentWidth} !important;
        position: absolute;
        top: 0;
        left: 0;
      }`,
      origin: 'AUTHOR'
    });
    isStyleInjected = true;
    $(this).text('撤销修改');
  } else {
    // 撤销注入参数需与注入时完全一致
    await chrome.scripting.removeCSS({
      target: { tabId: activeTab.id },
      css: `#mw-panel {
        width: ${currentWidth} !important;
        position: absolute;
        top: 0;
        left: 0;
      }`,
      origin: 'AUTHOR'
    });
    isStyleInjected = false;
    $(this).text('调整宽度');
  }
});

更稳定的替代实现方案（无需scripting API） #

如果需要更好的兼容性，可以用content script实现，逻辑更简单，不会有权限问题：

1. 新增content.js配置 #

在manifest.json中声明content script：

"content_scripts": [
  {
    "matches": ["https://en.wikipedia.org/*"],
    "js": ["content.js"]
  }
]

2. 编写content.js逻辑 #

chrome.runtime.onMessage.addListener((message) => {
  const panel = document.querySelector('#mw-panel');
  if (!panel) return;
  if (message.type === 'setWidth') {
    // 直接修改行内样式，优先级最高，无需!important
    panel.style.width = message.width;
  } else if (message.type === 'resetWidth') {
    // 清空行内样式即可恢复默认
    panel.style.width = '';
  }
});

3. 弹窗触发逻辑调整 #

let isStyleInjected = false;
let currentWidth = '20em';

$('.format').click(async function() {
  currentWidth = $('#widthInput').val() || '20em';
  const [activeTab] = await chrome.tabs.query({currentWindow: true, active: true});
  if (!isStyleInjected) {
    await chrome.tabs.sendMessage(activeTab.id, {type: 'setWidth', width: currentWidth});
    isStyleInjected = true;
    $(this).text('撤销修改');
  } else {
    await chrome.tabs.sendMessage(activeTab.id, {type: 'resetWidth'});
    isStyleInjected = false;
    $(this).text('调整宽度');
  }
});

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