时间戳

首页 > 解决方案 > 获取css规则，chrome扩展

javascript - 获取css规则，chrome扩展

问题描述

我正在开发 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)
                })
            }
        })
    })
})

标签： javascriptgoogle-chrome-extension

解决方案

扩展的内容脚本遵循与它运行的页面相同的跨域规则，就像它无法读取跨域样式表的页面一样。这是设计使然。

唯一可靠的方法是使用带有Page.getResourceTree命令的chrome.debugger API来获取加载资源的整个列表，然后在每个返回的资源 URL 上使用Page.getResourceContent来获取其实际内容，就像它在页面上加载时一样，而无需创建新的网络请求。

稍微不太可靠的方法是使用内容脚本从以下位置读取条目document.styleSheets：成功的将是同源的，失败的将是跨域的，因此您可以累积它们的 URL 列表并告诉后台脚本获取它们（manifest.json 中的权限必须允许这些 URL，例如"*://*/"）。

推荐阅读