Changing the colour of Daily Mail links doesn't work on Google results pages

Question

I have an extension which consists essentially of this (using jQuery):

$('a[href*="dailymail"]').css({'background':'#333'})

and it works just fine on regular links.

It doesn't work on Google search results, however, because the href part of the link is actually a google redirect URL, and the actual URL is in a data-href attribute.

My problem is that

$('a[data-href*="dailymail"]').css({'background':'#333'})

doesn't work. Do I have a problem with matching the attribute/value, or with Google's search results page, or what?

TIA for any thoughts.

It would help if you could show us an example of the `` elements you're trying to select — Rory McCrossan, Jul 22 '16 at 09:30
@RoryMcCrossan Open a Google search for "dailymail", inspect the page - I think that was straightforward enough from OP. — Xan, Jul 22 '16 at 09:35
that selection should work: https://jsfiddle.net/jolmos/05gr9pfx/ — jolmos, Jul 22 '16 at 09:36
@Xan Google's SERPs can change between users. Hence my request to see a concrete example of what the OP wants to find. Not to mention every question should be self-contained. — Rory McCrossan, Jul 22 '16 at 09:37
@AmbroseChapel Maybe it's worth selecting by text in the link like in this SO [question](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text) Then you can select elements using: `$('a:contains("daily mail")') ` — Sinan Guclu, Jul 22 '16 at 09:43

Xan · Accepted Answer · 2016-07-22T09:56:55.497

Likely your problem is when the code executes.

Google page loads its search results dynamically (for example, for Instant purposes). If your code executes in a content script, that only guarantees that it executes after static DOM was parsed.

$(selector).css() operates by adding inline styles to elements that are matched by the time the code runs. So, results (that are added later) are unaffected.

The most obvious solution is to simply inject CSS, not JS code:

"content_scripts" : [{
  "matches": ["*://*/*"],
  "css": ["dailymail.css"]
}]

a[href*="dailymail"], a[data-href*="dailymail"] {
  background: #333;
}

This should be specific enough to apply; if not, try adding !important.

If you want to control this programmatically, consider adding a <style> element to the page.

Alternatively still, you can watch the page for newly added links.

Thanks for that. I didn't know you could inject CSS! I will test ASAP, but not in a position to do that right now. — AmbroseChapel, Jul 22 '16 at 21:07

Changing the colour of Daily Mail links doesn't work on Google results pages

1 Answers1