Как отключить webkit-text-size-Adjust с помощью JavaScript

Question

Я пытаюсь создать расширение Chrome, которое автоматически отключит правило CSS webkit-text-size-Adjust в LinkedIn.Это позволяет увеличить масштаб текста при масштабировании страницы.

Используя инструменты разработчика Chrome в окне «Стили элементов», я могу изменить webkit-text-size-Adjust с «none» на «0 ", и это позволяет тексту изменять размер при масштабировании.

Однако я не могу понять, как отключить это правило с помощью JavaScript.Я написал расширение для Chrome, которое выполняет функцию при посещении linkedin.com/*, но мне нужно написать функцию для удаления / изменения правила webkit-text-size-Adjust.

Я пробовалнекоторые вещи, но они не работают.

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

Я также попытался рекурсивно пройти через каждый childNode из document.body и использовать removeProperty, чтобы отключить его, но это тоже не работает для меня.

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

Итак, как я могу удалить это правило с помощью javascript?Я не эксперт по CSS или JavaScript, поэтому я думаю, что мне не хватает чего-то простого ...

Answer 1

Вставьте следующий CSS, который должен заставить браузер использовать стиль:

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

Флаг !important заставляет объявление иметь самый высокий доступный приоритет.Добавьте пользовательские стили на страницу через файл manifest:

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

Answer 2

var myStyle = document.createElement('style');
myStyle.innerHTML = 'body * {-webkit-text-size-adjust:none !important;}';
document.head.appendChild(myStyle);