Chrome扩展注入字体“缺失”问题调试及网站可用字体查看方法

以下是针对问题的具体排查步骤：

• 检查内部网站的内容安全策略（CSP）
  内部网站可能设置了严格的CSP规则，禁止从扩展URL加载字体资源。打开Chrome DevTools的「控制台」，查看是否有类似Refused to load the font 'chrome-extension://xxx' because it violates the Content Security Policy directive的报错。如果存在这类报错，说明网站CSP限制了扩展资源的加载，需确认企业是否允许调整CSP，或尝试其他注入方式。

• 验证扩展字体资源路径的正确性
  即使其他网站正常，内部站可能存在路径大小写敏感等问题：

  1. 找到你的扩展ID（Chrome扩展管理页面开启「开发者模式」后可查看）
  2. 在内部站控制台执行fetch('chrome-extension://[你的扩展ID]/fonts/hack-regular.woff2')
  3. 如果返回404，检查扩展内字体文件的实际路径是否与CSS中的一致（注意文件名大小写）

• 排查样式优先级被覆盖的情况
  虽然你用了!important，但网站可能用了更具体的选择器或内联样式覆盖规则：

  • 在DevTools「元素」面板选中目标元素（如<code>）
  • 查看「Styles」面板中你的Hack字体规则是否被划掉
  • 如果被覆盖，调整CSS选择器权重，比如使用html body code或增加选择器层级

• 确认扩展是否成功注入到内部网站
  检查扩展的content script是否正常加载：

  • 打开DevTools的「Sources」面板，切换到「Content scripts」标签
  • 查看是否存在你的扩展的fonts.css和content script条目
  • 如果未加载，确认扩展的matches规则是否覆盖了内部网站的URL（比如是否包含子域名、特殊路径等），同时排查企业浏览器是否有扩展屏蔽机制

• 检查字体文件本身的有效性
  确认字体文件未损坏：

  • 直接在浏览器中访问chrome-extension://[你的扩展ID]/fonts/hack-regular.woff2，看是否能下载或预览字体
  • 如果无法访问，重新替换字体文件，确保文件完整且格式正确

• 调试扩展注入的样式表
  若无法直接查看扩展样式表：

  • 在DevTools「Elements」面板的「Styles」面板右上角点击「...」，勾选「Show user agent stylesheets」和「Show inherited styles」
  • 或者在「Sources」面板的「Content scripts」中找到你的扩展资源，查看fonts.css的内容是否正确注入

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