如何通过控制台/扩展脚本覆盖CSS变量？以谷歌搜索页为例

问题分析 #

你之前没获取到--rhs-width变量，主要是两个原因：

1. 该变量定义在.srp类选择器下，而非:root根元素，所以从:root的计算样式里拿不到。
2. 如果执行脚本时.srp元素还未加载完成，document.querySelector('.srp')会返回null；另外若变量未被元素的其他样式引用，部分浏览器可能不会在计算样式中暴露它。

开发者控制台临时修改方法 #

方法1：直接给目标元素设置行内样式

行内样式优先级高于类选择器样式，直接给.srp元素赋值变量：

const srpElement = document.querySelector('.srp');
if (srpElement) {
  // 替换成你需要的宽度值
  srpElement.style.setProperty('--rhs-width', '450px');
}

方法2：动态插入高优先级CSS规则

通过创建style标签插入新样式，用!important确保覆盖原有规则，所有.srp元素都会生效：

const styleTag = document.createElement('style');
styleTag.textContent = `
.srp {
  --rhs-width: 450px !important;
}
`;
document.head.appendChild(styleTag);

浏览器扩展注入脚本实现 #

如果要持久化修改，需在扩展的content script中执行代码，步骤如下：

1. 在扩展的manifest.json中配置谷歌搜索域名的匹配权限：

{
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

2. 在content.js中写入修改逻辑（推荐用插入style标签的方式，稳定性更高）：

document.addEventListener('DOMContentLoaded', () => {
  const styleTag = document.createElement('style');
  styleTag.textContent = `.srp { --rhs-width: 450px !important; }`;
  document.head.appendChild(styleTag);
});

验证变量是否存在的正确方式 #

等待DOM加载完成后再获取，确保元素已存在：

document.addEventListener('DOMContentLoaded', () => {
  const srpElement = document.querySelector('.srp');
  if (srpElement) {
    const computedStyle = getComputedStyle(srpElement);
    console.log(computedStyle.getPropertyValue('--rhs-width'));
  }
});

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