page.addstyletag()仅支持内联css或http(s) url，不支持本地文件路径；推荐用content注入内联样式，url需托管于http服务；避免evaluate手动插入style/link，注意csp与注入时机。
不能直接用 page.addStyleTag() 注入外部 CSS 文件路径（如 "./style.css"），它只接受内联内容或 url，且本地文件路径会被忽略。
用 page.addStyleTag() 注入内联 CSS 最可靠
这是 Puppeteer 原生支持、无需额外请求、执行时机可控的方式。适用于小段样式或动态生成的规则。
- 支持
content字符串（直接写 CSS 文本）和url（必须是可被浏览器直接 fetch 的 HTTP(S) 地址） - 注入后样式立即生效，且作用域为当前页面文档，无需等待 DOM 加载完成（但建议在
page.goto()后、操作元素前调用） - 注意：CSS 内容里的引号需转义，避免 JS 字符串解析出错；推荐用模板字符串 +
css`...`标签函数封装（需自行实现或用lit-html等辅助）
await page.addStyleTag({
content: 'body { background: #f0f0f0; } .highlight { color: red; }'
});
注入外部 CSS 文件必须走 url，不能用本地路径
很多人误以为可以传 file:///path/to/style.css 或相对路径，但 Chromium 在无头模式下会拒绝加载本地 file:// 资源（CORS 和安全策略限制）。
- 正确做法：启动一个最小静态服务（如
serve -s ./public），把 CSS 放在可访问的 HTTP 路径下，再用url: "http://localhost:3000/style.css" - 不推荐用
page.evaluate()手动创建<link>标签——它绕过 Puppeteer 的资源生命周期管理，可能因加载时序问题导致样式未生效 - 如果必须离线运行，唯一可行方案是读取本地 CSS 文件内容，再传给
page.addStyleTag({ content: cssString })
用 page.evaluate() 动态插入 <style></style> 是备选，但有隐患
虽然能绕过 addStyleTag() 的限制，但它在页面上下文中执行，无法捕获 Node.js 层的错误，调试困难，且容易因 CSP 策略被拦截（尤其目标站启用了 style-src 'self'）。
- 仅当需要根据页面运行时状态生成样式（如读取某个元素尺寸后计算 margin）时才考虑
- 务必用
try/catch包裹，并检查document.styleSheets.length是否增加 - 避免在
evaluate中使用外部变量，应显式传参，否则容易引发序列化失败
const css = 'header { display: none; }';
await page.evaluate((cssStr) => {
const style = document.createElement('style');
style.textContent = cssStr;
document.head.appendChild(style);
}, css);
别忽略 CSP 和加载顺序这两个隐形杀手
即使代码跑通，样式也可能不生效——常见于目标网站设置了严格的 Content-Security-Policy，或你注入太晚（比如在 networkidle2 之后才加样式，而关键 DOM 已渲染完毕）。
- 优先在
page.goto()的waitUntil: 'domcontentloaded'阶段后立即注入，确保样式在布局计算前就位 - 若目标站有 CSP，
addStyleTag({ content: ... })通常不受影响（属于内联样式），但url方式大概率被style-src拦截 - 可通过
page.metrics()或监听console事件捕获 CSP violation 报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
