Chrome扩展Manifest V3如何向当前标签页注入远程CSS文件

chrome.scripting.insertCSS的files参数仅支持加载扩展安装包内的本地文件，不支持传入远程HTTP/HTTPS链接，所以无论怎么配置权限都会触发加载失败报错。你之前配置的web_accessible_resources是用于允许外部网页访问扩展本地资源的规则，和当前需求无关，可以直接删除。

以下是两种无需把远程CSS下载到扩展包内的可行实现方案： #

方案1：拉取远程CSS内容后注入 #

通过fetch请求拉取远程CSS的文本内容，再通过insertCSS的css参数注入，代码示例：

chrome.tabs.query({active: true, currentWindow: true}, async function(tabs) {
    const activeTabId = tabs[0].id;
    // 拉取远程CSS内容
    const cssResponse = await fetch('https://fonts.googleapis.com/css2?family=Acme');
    const remoteCssContent = await cssResponse.text();
    // 先注入字体CSS
    await chrome.scripting.insertCSS({
        target: { tabId: activeTabId },
        css: remoteCssContent
    });
    // 再注入自定义字体规则
    await chrome.scripting.insertCSS({
        target: { tabId: activeTabId },
        css: 'body{font-family:Acme !important;}'
    });
});

需要确保manifest.json中已经配置以下权限：

"permissions": ["scripting", "tabs"],
"host_permissions": [
    "https://fonts.googleapis.com/*",
    "https://fonts.gstatic.com/*"
]

方案2：向页面动态插入link标签 #

通过执行脚本向页面的head中插入指向远程CSS的link标签，无需拉取CSS内容，代码示例：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    const activeTabId = tabs[0].id;
    chrome.scripting.executeScript({
        target: { tabId: activeTabId },
        func: () => {
            const linkEl = document.createElement('link');
            linkEl.rel = 'stylesheet';
            linkEl.href = 'https://fonts.googleapis.com/css2?family=Acme';
            document.head.appendChild(linkEl);
            // 插入自定义样式
            const styleEl = document.createElement('style');
            styleEl.textContent = 'body{font-family:Acme !important;}';
            document.head.appendChild(styleEl);
        }
    });
});

这个方案除了上述的权限配置外，不需要额外调整其他规则。

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