Google Chrome 扩展中的 CSS 内容脚本问题

Question

我正在创建一个简单的 Chrome 扩展程序，它使用 content script 阻止 Google homepage 上的 "Google" logo image。我按照内容脚本页面上的说明进行操作，但它似乎仍然无法正常工作。谁能发现我做错了什么？

---

编辑：我已经用flickr.com 等其他网站对其进行了测试，并且效果很好。我还搜索了 Google 主页 CSS，但无法确定哪个 CSS 规则覆盖了我的 CSS。有任何想法吗？如何进行更强大的 CSS 注入，以便没有其他 CSS 可以覆盖我的？

---

ma​​nifest.json：

{
  "manifest_version": 2,
  "name": "Google Logo Blocker",
  "description": "This extension blocks the Google logo image.",
  "version": "1.0",

  "content_scripts": [
   {
     "matches": ["http://www.google.com/"],
     "css": ["blocker.css"]
   }
  ],

  "browser_action": {
    "default_icon": "icon.png"
  }
}

blocker.css：

img {
    display: none !important;
}

Answer 1

您的代码对我有用。您使用的是美国 Google，而不是国际版，对吧？

以防万一，请将您的 matches 更改为：

"matches": ["http://*.google.com/", "https://*.google.com/"],

更直接地定位徽标。这在大多数情况下都有效：

#hplogo {
    display: none !important;
}

---

---

要获得全面的国际 Google 支持，请将清单的 content_scripts 部分更改为：

"content_scripts": [ {
    "matches":          ["http://*/*", "https://*/*"],
    "include_globs":    ["http://*.google.*/*", "https://*.google.*/*"],
    "css":              ["blocker.css"]
} ],

还可以根据需要使用exclude_matches 和/或exclude_globs。

---

---

如果还是不行，就照常说：

1. 准确网址
2. Chrome 版本
3. 操作系统
4. 其他扩展有效

Answer 2

现代版是<img>标签，国际版是带有背景图片的<div>标签。无论如何，它们具有相同的id = hplogo 的差异，所以这对你有用。

Click for Larger Image

使用

#hplogo{
       display:none !important;
}

它将删除 google 徽标。