Question

I’m trying to build a Chrome extension that will automatically disable the webkit-text-size-adjust CSS rule on LinkedIn. This is so I can get the text to zoom when I zoom on the page.

Using Chrome’s developer tools in the Elements Styles window, I can change the webkit-text-size-adjust from “none” to “0”, and this lets the text change size when I zoom.

However, I can’t figure out how to disable this rule with JavaScript. I have written a Chrome extension that executes a function when I visit linkedin.com/* but I need to write a function to remove/modify the webkit-text-size-adjust rule.

I’ve tried a few things, but they don’t work.

document.getElementsByTagName('html')[0].style.webkitTextSizeAdjust="0"

I’ve also tried recursively going through each childNode from document.body and using removeProperty to turn it off, but this doesn’t work for me either.

function remtextadj(node){
  node.style.removeProperty('-webkit-text-size-adjust');
  for(var i=0;i<node.childNodes.length;i++){
     var nod=node.childNodes[i];
     remtextadj(nod);
     }
  }

  remtextadj(document.body);

So how could I go about removing this rule with javascript? I’m no expert on CSS or JavaScript, so I imagine I’m missing something simple…

Answer 1

Inject the following CSS, which should force the browser to use the style:

*{-webkit-text-size-adjust:0 !important}

The !important flag causes the declaration to take the highest available precedence. Add the custom styles to a page via the manifest file:

 ...
 "content_scripts": [{
    "matches": ["http://sitehere/*"],
    "css": ["customstyle.css"]
 }],
 ...