Chrome浏览器可定制CSS注入教程-个性化网页样式

Chrome浏览器可定制CSS注入教程

来源：Chrome浏览器官网 时间：2025/07/29

Chrome浏览器可定制CSS注入教程1

1. 创建扩展文件夹：在电脑中新建一个文件夹（如“My CSS Injector”），用于存放扩展程序的文件。打开记事本或代码编辑器，在文件夹内创建`manifest.json`文件，输入以下内容：
json
{
"manifest_version": 2,
"name": "自定义样式扩展",
"version": "1.0",
"permissions": ["activeTab", "tabs", "https://*/*"],
"content_scripts": [
{
"matches": ["https://*/*"],
"css": ["styles.css"]
}
]
}
这段代码定义了扩展的名称、版本、权限以及需要加载的CSS文件。
2. 编写CSS规则：在同一文件夹下创建`styles.css`文件，输入自定义样式。例如，将网页背景改为浅灰色，可添加：
css
body {
background-color: f0f0f0;
}
若需隐藏特定广告元素（假设类名为`.ad-banner`），可添加：
css
.ad-banner {
display: none;
}
保存文件后，CSS规则将自动应用到匹配的网页中。
3. 加载扩展程序：打开Chrome浏览器，点击右上角三个点→“扩展程序”。打开右上角的“开发者模式”（勾选开关）。点击“加载已解压的扩展程序”，选择之前创建的文件夹（如“My CSS Injector”）。浏览器会提示“扩展程序已添加”，此时自定义样式生效。
4. 动态注入与调试：如果需要根据页面条件动态调整样式，可创建`content.js`文件，并在`manifest.json`的`content_scripts`中添加：
json
"js": ["content.js"]
在`content.js`中编写代码，例如：
javascript
const style = document.createElement('style');
style.innerHTML = 'body { font-size: 16px; }';
document.head.appendChild(style);
按`F12`打开开发者工具，在“Elements”面板中实时修改样式，确认效果后保存到`styles.css`。
5. 管理扩展权限：若某些网站样式未生效，检查`manifest.json`中的`matches`规则是否覆盖目标网址。如需注入HTTP网站，添加`"http://*/*"`到`permissions`和`matches`中。

上一篇: 2025年Chrome浏览器网页渲染性能提升下一篇: 谷歌浏览器移动设备适配引擎插件兼容层级评估