如何在Chrome扩展中定位目标网站<head>而非popup.html<head>插入样式表

你的核心问题是：popup里的JS运行在独立的隔离上下文，代码里的document指向的是popup自身的DOM，不是目标网站的页面，所以样式才会被加到popup里。要实现向目标网站注入样式，得用Manifest V3的chrome.scripting API来操作。

下面是具体修改步骤：

1. 更新manifest配置 #

首先要添加scripting权限，同时明确目标网站的host_permissions（原来的content_scripts如果不需要可以删掉，因为现在是按需注入）：

{
  "manifest_version": 3,
  "name": "Dark Mode Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "activeTab", "storage", "notifications", "scripting"],
  "host_permissions": ["*://*.WEBSITEHERE.com/*"]
}

把WEBSITEHERE替换成你实际要适配的域名，要是想适配所有网站，改成"<all_urls>"就行

2. 修改popup的JS代码 #

替换原来的点击事件处理逻辑，用chrome.scripting.insertCSS直接向当前活跃标签页注入你的样式文件：

function activateDarkMode() {
  alert('You have activated dark mode!');
  // 获取当前窗口的活跃标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTabId = tabs[0].id;
    // 向目标标签页注入CSS文件
    chrome.scripting.insertCSS({
      target: {tabId: activeTabId},
      files: ['css/dark-mode.css']
    });
  });
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('darkMode').addEventListener('click', activateDarkMode);
});

可选：动态创建link标签的方式 #

如果一定要通过创建<link>标签的方式注入（而不是直接用文件注入），可以用chrome.scripting.executeScript把创建标签的代码注入到目标页面的上下文里：

function activateDarkMode() {
  alert('You have activated dark mode!');
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      func: () => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        // 用chrome.runtime.getURL获取扩展内资源的绝对路径
        link.href = chrome.runtime.getURL('css/dark-mode.css');
        document.head.appendChild(link);
      }
    });
  });
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('darkMode').addEventListener('click', activateDarkMode);
});

这种方式需要在manifest里添加web_accessible_resources，让目标页面能访问到你的CSS文件：

"web_accessible_resources": [
  {
    "resources": ["css/dark-mode.css"],
    "matches": ["*://*.WEBSITEHERE.com/*"]
  }
]

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