Chrome扩展能否通过content.js或Manifest的content_scripts注入CSS？样式未生效求助

一、CSS注入方式确认 #

• 完全可以通过Manifest.json的content_scripts参数注入CSS：你当前配置里的"css": ["my-styles.css"]是标准写法，只要文件路径和名称匹配，扩展会自动向符合matches规则的页面注入CSS。
• 也能通过content.js脚本注入CSS：可以动态创建style元素插入页面，示例代码如下：

// content.js
const customStyle = document.createElement('style');
customStyle.textContent = `
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Poppins:wght@500&display=swap');
* { font-family: 'Flow Circular' !important; }
`;
document.head.appendChild(customStyle);

二、字体未生效的问题排查 #

1. 文件名不匹配：你的Manifest中配置的CSS文件名是my-styles.css，但实际文件名为my-style.css（少了末尾的"s"），这会导致扩展无法找到CSS文件，修正文件名或Manifest中的路径即可。
2. CSS优先级不足：页面自身的CSS规则优先级可能高于你写的全局*选择器，建议给字体属性添加!important强制覆盖：

* {
    font-family: 'Flow Circular' !important;
}

3. Chrome内部页面限制：若要修改Chrome主菜单（如chrome://settings/这类内部页面），默认的"<all_urls>"不包含chrome://协议页面。需在Manifest中添加"host_permissions": ["<all_urls>", "chrome://*/*"]，且注意Chrome对内部页面的修改有严格限制，部分区域无法通过常规CSS调整。
4. 扩展加载问题：content_scripts是自动注入匹配页面的，无需点击扩展图标激活。但修改代码后，需在扩展管理页面重新加载扩展，确保新配置生效。

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