本教程详细阐述在浏览器环境中，特别是针对chrome扩展开发，如何正确访问和操作网页的css样式表。我们将探讨使用 `document.stylesheets` 获取 `cssstylesheet` 对象，并通过 `cssrules` 属性遍历和检查样式规则。文章还将指导如何读取和修改css自定义属性，并强调处理跨域样式表时的安全限制。
在开发浏览器扩展时，经常需要动态地读取或修改网页的CSS样式以实现特定的功能，例如根据用户偏好调整网站主题颜色。然而，直接通过 fetch 请求CSS文件并尝试解析其内容，或错误地访问 CSSStyleSheet 对象的属性，是常见的误区。本文将详细介绍在浏览器环境中正确访问和操作CSS样式表的标准方法。
理解CSS样式表访问机制
浏览器加载的每个HTML文档都有一个 document.styleSheets 属性，它是一个 StyleSheetList 集合，包含了当前文档中所有通过 标签、
错误方法示例分析： 在提供的原始代码中，尝试通过 fetch 请求一个CSS文件，然后期望从 response.text() 返回的字符串中直接访问 stylesheet.cssStyleSheet 或 rule.cssVariables。这是不正确的，原因如下：
- fetch 返回的是CSS文件的纯文本内容，它是一个字符串，不具备 CSSStyleSheet 对象的任何DOM API属性。
- CSSStyleSheet 对象是浏览器解析和构建DOM时创建的，它提供了结构化的API来访问样式规则。
- cssVariables 并不是 CSSRule 或 CSSStyleSheet 的标准属性，用于获取CSS自定义属性（CSS Variables）。
正确方法： 要访问和操作DOM中已加载的CSS样式表，应始终通过 document.styleSheets 入口。
获取和遍历CSSStyleSheet对象
document.styleSheets 返回一个 StyleSheetList，它是一个类数组对象，包含了文档中所有可用的 CSSStyleSheet 对象。
// 遍历文档中所有的CSSStyleSheet对象
for (let i = 0; i < document.styleSheets.length; i++) {
const sheet = document.styleSheets[i];
console.log(`样式表 ${i}:`, sheet.href || '内联样式表');
// 进一步处理每个样式表
// ...
}每个 sheet 对象都是一个 CSSStyleSheet 实例，它提供了诸如 href (外部样式表的URL)、ownerNode (关联的DOM节点) 和最重要的 cssRules 属性。
立即学习“前端免费学习笔记（深入）”；
深入CSSRule列表
CSSStyleSheet 对象的 cssRules 属性是一个 CSSRuleList 集合，包含了该样式表中的所有CSS规则。这些规则可以是 CSSStyleRule (如 body { color: red; })、CSSMediaRule (如 @media screen {})、CSSKeyframesRule 等。
遍历CSSRuleList：
function processStyleSheet(sheet) {
try {
const ruleList = sheet.cssRules; // 获取样式表中的所有CSS规则
if (!ruleList) {
console.warn('无法访问样式表规则或样式表为空:', sheet.href || '内联样式表');
return;
}
for (let j = 0; j < ruleList.length; j++) {
const rule = ruleList[j];
console.log(`规则 ${j}:`, rule.cssText); // 打印规则的完整CSS文本
// 根据规则类型进行处理
if (rule instanceof CSSStyleRule) {
// 这是一个普通的样式规则，如 'div { color: red; }'
console.log('选择器:', rule.selectorText);
console.log('样式声明:', rule.style.cssText);
// 进一步处理CSS自定义属性
findAndLogCssVariables(rule.style);
} else if (rule instanceof CSSMediaRule) {
// 这是一个媒体查询规则，如 '@media screen {}'
console.log('媒体查询:', rule.media.mediaText);
// 可以递归处理媒体查询内的规则
for (let k = 0; k < rule.cssRules.length; k++) {
const innerRule = rule.cssRules[k];
if (innerRule instanceof CSSStyleRule) {
console.log(' 媒体查询内选择器:', innerRule.selectorText);
findAndLogCssVariables(innerRule.style);
}
}
}
// 其他规则类型如 CSSKeyframesRule, CSSFontFaceRule 等
}
} catch (e) {
// 捕获可能出现的SecurityError
console.error('处理样式表时出错:', sheet.href || '内联样式表', e);
}
}
// 示例：处理第一个样式表
if (document.styleSheets.length > 0) {
processStyleSheet(document.styleSheets[0]);
}处理CSS自定义属性（变量）
对于 CSSStyleRule 对象，其 style 属性是一个 CSSStyleDeclaration 对象，它包含了该规则的所有CSS声明。我们可以通过 getPropertyValue() 方法读取CSS自定义属性，并通过 setProperty() 方法进行修改。
/**
* 查找并记录CSSStyleDeclaration中的所有CSS自定义属性（变量）
* @param {CSSStyleDeclaration} styleDeclaration
*/
function findAndLogCssVariables(styleDeclaration) {
for (let i = 0; i < styleDeclaration.length; i++) {
const propName = styleDeclaration[i];
// CSS自定义属性以 '--' 开头
if (propName.startsWith('--')) {
const propValue = styleDeclaration.getPropertyValue(propName).trim();
console.log(` CSS变量: ${propName} = ${propValue}`);
// 示例：如果变量是颜色，可以进一步处理或修改
// if (propValue.startsWith('#') || propValue.startsWith('rgb') || propValue.startsWith('hsl')) {
// console.log(` 这是一个颜色变量！`);
// // 修改变量示例：
// // styleDeclaration.setProperty(propName, 'red');
// }
}
}
}
// 完整示例函数：获取所有颜色变量
async function getColorVariablesFromDocument() {
const colorVariables = {};
for (let i = 0; i < document.styleSheets.length; i++) {
const sheet = document.styleSheets[i];
try {
const ruleList = sheet.cssRules;
if (!ruleList) continue;
for (let j = 0; j < ruleList.length; j++) {
const rule = ruleList[j];
// 只处理CSSStyleRule和CSSMediaRule（递归）
if (rule instanceof CSSStyleRule) {
extractVariablesFromStyleDeclaration(rule.style, colorVariables);
} else if (rule instanceof CSSMediaRule) {
for (let k = 0; k < rule.cssRules.length; k++) {
const innerRule = rule.cssRules[k];
if (innerRule instanceof CSSStyleRule) {
extractVariablesFromStyleDeclaration(innerRule.style, colorVariables);
}
}
}
}
} catch (e) {
// 捕获SecurityError等
console.warn(`无法完全处理样式表 ${sheet.href || '内联样式表'}:`, e);
}
}
return colorVariables;
}
/**
* 从CSSStyleDeclaration中提取颜色变量
* @param {CSSStyleDeclaration} styleDeclaration
* @param {Object} targetObject 存储变量的对象
*/
function extractVariablesFromStyleDeclaration(styleDeclaration, targetObject) {
for (let i = 0; i < styleDeclaration.length; i++) {
const propName = styleDeclaration[i];
if (propName.startsWith('--')) {
const propValue = styleDeclaration.getPropertyValue(propName).trim();
// 检查是否为颜色值（简单判断）
if (propValue.startsWith('#') || propValue.startsWith('rgb') || propValue.startsWith('hsl')) {
targetObject[propName] = propValue;
}
}
}
}
// 运行示例
(async () => {
const allColorVariables = await getColorVariablesFromDocument();
console.log('提取到的所有颜色变量:', allColorVariables);
})();跨域样式表的限制与安全考量
一个重要的注意事项是，出于安全原因，当样式表是从不同源（不同域名、端口或协议）加载时，浏览器会限制对 CSSStyleSheet 对象的 cssRules 属性的访问。尝试访问这些跨域样式表的 cssRules 会抛出 SecurityError。
对于浏览器扩展，如果目标网页加载了来自CDN或其他域名的CSS文件，你的扩展将无法直接通过 document.styleSheets[i].cssRules 访问其内部规则。在这种情况下，你需要考虑其他策略：
- 注入CSS： 如果目的是修改样式，可以直接通过 chrome.scripting.insertCSS 或 chrome.scripting.executeScript 注入新的CSS规则来覆盖原有样式。
- 内容脚本与DOM操作： 对于某些特定的样式修改，可以通过内容脚本直接操作DOM元素的 style 属性或添加/移除CSS类。
- 部分信息可用： 即使 cssRules 不可访问，CSSStyleSheet 对象的 href 和 ownerNode 等属性通常仍然是可访问的，这可以帮助你识别样式表的来源。
总结与最佳实践
在浏览器环境中访问和操作CSS样式表时，请遵循以下最佳实践：
- 使用 document.styleSheets： 这是获取所有 CSSStyleSheet 对象的标准入口。
- 遍历 cssRules： 通过 CSSStyleSheet.cssRules 属性来获取并遍历样式规则。
- 检查 CSSRule 类型： 使用 instanceof 操作符（如 rule instanceof CSSStyleRule）来判断规则类型，并进行相应的处理。
- 利用 CSSStyleDeclaration： 对于 CSSStyleRule，通过 rule.style 访问其 CSSStyleDeclaration 对象，使用 getPropertyValue() 和 setProperty() 方法来读写CSS属性，包括自定义属性。
- 处理跨域限制： 预见并妥善处理 SecurityError，对于跨域样式表，考虑注入CSS或直接DOM操作作为替代方案。
- 错误处理： 在访问 cssRules 时，始终使用 try...catch 块来捕获潜在的 SecurityError，以增强代码的健壮性。
通过以上方法，你可以有效地在浏览器扩展中访问和修改网页的CSS样式，实现更丰富的用户体验定制功能。
