如何实现禁用Grammarly支持后，点击时显示站点不支持提示？
2026-5-19
实现Grammarly站点不支持提示的可行方案
当然可行！而且实现起来有两种主要思路，一种是利用Grammarly自身的机制（和Medium、Quora用的是同一种），另一种是自定义提示内容，我给你详细拆解下：
方法一：利用Grammarly原生机制（推荐）
这是Medium、Quora这类站点采用的方式，完全依赖Grammarly扩展的自身逻辑，不需要额外写复杂的JS，稳定性最高：
- 添加页面级禁用元标签
在页面的<head>中加入以下元标签，告诉Grammarly整个站点都不支持它的功能：
<meta name="grammarly" content="off">
- 标记所有可编辑区域为禁用
对于页面上所有可编辑元素（比如<textarea>、设置了contenteditable="true"的<div>等），添加data-gramm="false"属性，确保Grammarly不会尝试在这些区域激活：
<!-- 示例：textarea --> <textarea data-gramm="false" name="user-content" id="user-content"></textarea> <!-- 示例：可编辑div --> <div contenteditable="true" data-gramm="false" class="rich-editor"></div>
做完这两步后，当用户点击Grammarly的悬浮图标时，它会自动弹出类似“[你的站点] 不支持Grammarly”的原生提示，和你看到的Medium、Quora效果完全一致。
方法二：自定义提示内容（可选）
如果你想要完全自定义提示的文案或样式，而不是用Grammarly的原生提示，可以通过监听Grammarly注入的按钮元素来实现：
// 用MutationObserver监听Grammarly悬浮按钮的出现 const grammarlyObserver = new MutationObserver((mutations) => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { // 识别Grammarly的扩展容器（类名可能随版本更新，需验证） if (node.classList?.contains('grammarly-extension')) { const grammarlyBtn = node.querySelector('.grammarly-button'); if (grammarlyBtn) { grammarlyBtn.addEventListener('click', (e) => { // 阻止Grammarly的默认提示 e.stopPropagation(); // 显示自定义提示，这里用原生alert举例，你可以换成自定义弹窗组件 alert('mysite.com 不支持Grammarly功能'); }); } } }); }); }); // 开始监听整个文档的DOM变化 grammarlyObserver.observe(document.body, { childList: true, subtree: true });
⚠️ 注意：这种方法依赖Grammarly扩展的DOM结构，一旦Grammarly更新了类名或元素结构，代码可能会失效，需要定期维护。
内容的提问来源于stack exchange，提问作者bipin patel
