一、通过扩展程序注入CSS
1. 创建扩展文件
- 在电脑中新建文件夹（如“My CSS Injector”），存放扩展程序文件。
- 在该文件夹内创建`manifest.json`文件，内容如下：
json
{
"name": "自定义CSS扩展",
"version": "1.0",
"description": "用于注入自定义CSS样式",
"permissions": ["activeTab"],
"content_scripts": [{
"matches": ["
"css": ["styles.css"]
}]
}
- 创建`styles.css`文件，编写需要注入的CSS规则（例如：`body { background-color: white; } h1 { color: red; }`）。
2. 加载扩展程序
- 打开Chrome浏览器，进入`chrome://extensions/`页面，勾选右上角“开发者模式”。
- 点击“加载已解压的扩展程序”，选择之前创建的文件夹。
3. 验证效果
- 打开任意网页（如百度首页），背景颜色变为白色，h1文字变为红色，说明CSS注入成功。
二、使用开发者工具临时修改CSS
1. 打开开发者工具
- 按`F12`或右键点击网页→“检查”，调出开发者工具。
2. 修改样式
- 在“Elements”面板中，选中需要修改的元素，直接在右侧“Styles”区域编辑CSS属性（如修改`color`或`font-size`）。
- 若需长期保留，可右键点击修改后的样式→“Add as new style selector”，将规则保存到“Styles”面板的持久化样式表中。
三、通过书签脚本快速注入CSS
1. 创建书签
- 在书签栏新建书签，名称自定义（如“自定义CSS”），网址填写以下代码（替换`your-css-code`为实际CSS）：
javascript
javascript：(function() {
var style = document.createElement('style');
style.innerHTML = 'your-css-code';
document.head.appendChild(style);
})();
- 例如，设置所有文字为蓝色：
javascript
javascript：(function() {
var style = document.createElement('style');
style.innerHTML = '* { color: blue !important; }';
document.head.appendChild(style);
})();
2. 使用书签
- 访问目标网页后，点击该书签，页面会立即应用自定义CSS。此方法适合临时调整，刷新页面后样式消失。
四、高级技巧：动态注入与调试
1. 动态条件注入
- 在扩展程序中添加`content.js`文件，通过JavaScript判断网页条件后动态插入CSS。例如：
javascript
if (document.querySelector('.target-element')) {
var style = document.createElement('style');
style.innerHTML = '.target-element { display: none; }';
document.head.appendChild(style);
}
2. 调试优化
- 使用开发者工具的“Styles”面板实时修改样式，观察效果后复制到扩展程序或书签脚本中。
- 在“Console”面板输入`document.styleSheetList`查看所有生效的样式表。
若遇到复杂情况，建议访问谷歌官方支持社区获取帮助。
