Chrome扩展开发：如何获取并修改指定progress元素样式？

1. 精准定位目标元素 #

你的原选择器仅匹配带titleCard-progress类的所有元素，但未限定为<progress>标签，可能导致误选或未命中目标。修正选择器为：

const nodeList = document.querySelectorAll("progress.titleCard-progress");

2. 确保脚本在正确时机执行 #

如果目标元素是页面动态加载的，或脚本运行时DOM未完全渲染，会出现获取不到元素的情况：

• 静态元素：在manifest.json中明确配置内容脚本的run_at为document_idle（默认值，但显式配置更稳妥）
• 动态元素：使用MutationObserver监听DOM变化，捕获新增的目标元素：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      document.querySelectorAll("progress.titleCard-progress").forEach(el => {
        el.style.visibility = "hidden";
      });
    }
  });
});
observer.observe(document.body, { childList: true, subtree: true });

3. 处理样式优先级冲突 #

若页面原有CSS使用了!important或更高优先级的选择器，直接修改行内style会失效，此时插入全局样式表更可靠：

const styleEl = document.createElement('style');
styleEl.textContent = `progress.titleCard-progress { visibility: hidden !important; }`;
document.head.appendChild(styleEl);

这种方式优先级最高，可覆盖页面所有原有样式。

4. 验证扩展权限配置 #

检查manifest.json的content_scripts是否正确匹配目标网站域名，示例配置：

"content_scripts": [
  {
    "matches": ["https://目标网站完整域名/*"],
    "js": ["你的脚本文件名.js"],
    "run_at": "document_idle"
  }
]

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