Question

I am creating a simple Chrome extension that blocks the “Google” logo image on the Google homepage using a content script. I followed the directions on the content-script page, but it still does not seem to be working. Can anyone spot what I’m doing wrong?

---

EDIT: I have tested it with other website like flickr.com and it works perfectly. I’ve also searched through the Google homepage CSS and cannot figure out which CSS rule is overriding my CSS. Any ideas? How can I make a stronger CSS injection so that no other CSS can override mine?

---

manifest.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

Your code works for me. You are using straight USA Google, not an international version, right?

Just in case, change your matches to:

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

And target the logo more directly. This will work in most cases:

#hplogo {
    display: none !important;
}

---

---

For full-on, international Google support, change the content_scripts portion of your manifest to:

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

Optionally also using exclude_matches and/or exclude_globs as desired.

---

---

If it still doesn’t work, state the usual:

1. Exact URL
2. Chrome version
3. OS
4. Other extensions active