javascript - 获取css规则，chrome扩展

Question

我正在开发 Chrome 扩展程序，需要访问 document.styleSheets cssRules .它适用于某些网站，例如 w3school ，但其他人没有，例如 stackoverflow .
我收到一个错误:

Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

我知道 Chrome 浏览器的 CORS 策略，但我使用这种方法将脚本嵌入到页面中:

chrome.tabs.executeScript(tabId, {file:'script.js'});

在我看来，问题是因为样式文件是从其他域下载的，但我不清楚为什么我会收到错误，脚本嵌入在页面上并且代码在网站范围内执行。你能澄清一下，有什么问题吗？
chrome.debugger 的东西也不起作用:

chrome.debugger.attach(debuggeeId, "1.3", () => {
    chrome.debugger.sendCommand(debuggeeId, "Page.enable", null, (r) => {
        chrome.debugger.sendCommand(debuggeeId, "Page.getResourceTree", null, (res) => {
            const cssResources = getCSSResources(res.frameTree.resources);
            for(let url of cssResources) {
                chrome.debugger.sendCommand(debuggeeId, "Page.getResourceContent", {frameId: toString(tabId), url: url}, (resp) => {
                    console.log(resp)
                })
            }
        })
    })
})

Answer 1

扩展的内容脚本遵循与它运行的页面相同的跨域规则，就像它不能读取跨域样式表的页面一样。这是设计使然。
唯一可靠的方法是使用 chrome.debugger API 与 Page.getResourceTree命令获取已加载资源的完整列表，然后使用 Page.getResourceContent在每个返回的资源 URL 上获取与页面上加载完全相同的实际内容，而无需发出新的网络请求。
稍微不太可靠的方法是使用内容脚本从 document.styleSheets 读取条目。 : 那些成功的将是同源的，那些失败的将是跨源的，所以你可以积累一个他们的 URL 列表并告诉后台脚本来获取它们(manifest.json 中的 permissions 必须允许这些 URL，因为例如 "*://*/")。