如何在Chrome中永久保存特定网页的自定义修改样式？

你手动在控制台修改的DOM样式属于临时内存修改，页面跳转、刷新时浏览器会重新拉取页面源码渲染，修改自然会丢失，以下三种方案均可实现永久生效，按易用性排序：

方案1：Chromium内核浏览器本地覆盖（零依赖首选） #

Chrome、Edge等浏览器自带的Local Overrides功能可以持久化你在开发者工具里做的所有DOM、样式修改：

• 按F12打开开发者工具，切换到Sources面板
• 在左侧栏找到Overrides选项（隐藏的话点侧边栏的>>按钮展开），选择一个本地空文件夹作为存储路径，在浏览器弹出的权限申请弹窗中点击「允许」
• 回到Elements面板，找到你之前修改的grid网格容器，在Styles侧边栏把grid-template-columns的值改为repeat(2, 500px)，grid-template-rows的值改为repeat(5, 500px)
• 修改完成后浏览器会自动把改动存到本地，后续访问该页面、翻页时都会自动应用修改，不需要重复操作。

页面原始网格容器代码如下：

<div style="display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(3, 500px); gap: 60px; height: 100%; margin: 0px;"><div 

修改后的目标代码如下：

<div style="display: grid; grid-template-columns: repeat(2, 500px); grid-template-rows: repeat(5, 500px); gap: 60px; height: 100%; margin: 0px;"><div 

方案2：油猴脚本自动注入样式 #

如果你安装了Tampermonkey/Violentmonkey等用户脚本管理器，可以通过脚本自动注入样式，适配全品类浏览器：

• 新建空白用户脚本，将匹配规则设置为SRT工具的访问地址
• 填入以下代码保存即可：

// ==UserScript==
// @name         SRT 5行2列布局适配
// @match        *://填写SRT工具的实际访问域名和路径*
// @run-at       document-end
// ==/UserScript==
const injectStyle = () => {
  const gridContainer = document.querySelector('div[style*="grid-template-columns: repeat(3, 500px)"][style*="grid-template-rows: repeat(3, 500px)"]');
  if (gridContainer) {
    gridContainer.style.gridTemplateColumns = 'repeat(2, 500px)';
    gridContainer.style.gridTemplateRows = 'repeat(5, 500px)';
  }
  // 监听页面动态渲染，适配翻页无刷新的场景
  setTimeout(injectStyle, 1000);
}
injectStyle();

脚本会循环检测页面的网格容器，不管是首次加载还是翻页动态渲染内容，都会自动把布局改成你要的5行2列效果。

方案3：自定义CSS扩展注入 #

如果你用Stylus之类的自定义样式管理扩展，可以直接写入以下CSS规则，注意加!important覆盖内联样式优先级：

div[style*="grid-template-columns: repeat(3, 500px)"][style*="grid-template-rows: repeat(3, 500px)"] {
  grid-template-columns: repeat(2, 500px) !important;
  grid-template-rows: repeat(5, 500px) !important;
}

注意：如果后续Facebook官方迭代SRT工具修改了默认网格的内联样式值、DOM结构，你只需要对应调整选择器规则即可，以上方案在浏览器不清理缓存、不删除对应配置的情况下会一直生效。

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