CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extensioncontent-script
JSW189
JSW189

Reputation: 6325

CSS content script issue in Google Chrome extension

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;
}

Upvotes: 2

Views: 941

Answers (2)

Brock Adams
Brock Adams

Reputation: 93443

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

Upvotes: 3

Sudarshan
Sudarshan

Reputation: 18524

It is <img> tag in modern version and is a <div> tag with background image for international version. Regardless, of the differences they bear same id = hplogo, so this can work for you.

Click for Larger Image

enter image description here

Use

#hplogo{
       display:none !important;
}

it will remove google Logo.

Upvotes: 1

Related Questions