如何解决Grammarly Chrome扩展自动为body标签添加padding-top的问题

• 优先级最高的CSS强制覆盖
  直接给全局样式添加如下规则，!important 优先级可以覆盖浏览器扩展注入的内联样式：

body {
  padding-top: 0 !important; /* 如果你网站原生需要特定top padding，替换0为对应数值即可 */
}

如果不想全局覆盖，也可以针对性限定只处理Grammarly触发的场景，匹配Grammarly添加的自定义属性：

body[data-gr-ext-installed][style*="padding-top"] {
  padding-top: 0 !important;
}

• 直接禁用Grammarly对页面的修改权限
  给body标签添加Grammarly官方认可的禁用属性，扩展识别到后就不会对页面元素做样式修改，也不会注入功能：

<body data-gramm="false" data-grammarly="false">

如果你只是不想被加padding，还允许用户在输入框使用Grammarly，可以只给输入框之外的根元素加这个属性，或者单独给输入框加data-gramm="true"开启权限。

• 用JS监听body样式变更自动重置
  如果以上方案都不适用，可以通过MutationObserver监听body的style属性变化，一旦检测到Grammarly注入的padding-top就立刻重置：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'style') {
      const body = document.body;
      if (body.style.paddingTop === '72px' && body.hasAttribute('data-gr-ext-installed')) {
        body.style.paddingTop = '0'; // 替换为你需要的数值
      }
    }
  });
});

observer.observe(document.body, { attributes: true });

内容的提问来源于stack exchange，提问作者Rohit Ramachandran