如何阻止浏览器扩展在Next.js PWA中运行？

你可以通过以下几种方式阻止Google Translate扩展自动翻译你的Next.js PWA内容：

全局禁用翻译 #

直接在HTML根标签添加属性，让Google Translate忽略整个页面。在Next.js中，需要修改自定义的_document.tsx（JavaScript项目用_document.js）文件，这是控制全局HTML结构的入口：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html translate="no">
        <Head>
          {/* 额外添加meta标签强化规则 */}
          <meta name="google" content="notranslate" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

针对特定元素禁用翻译 #

如果不需要全局禁用，只需要保护输入框、菜单这类特定元素，直接给目标元素添加translate="no"属性即可：

// 输入框示例
<input type="text" translate="no" placeholder="请输入内容" />

// 菜单选项示例
<nav>
  <ul>
    <li><a href="/" translate="no">首页</a></li>
    <li><a href="/settings" translate="no">设置</a></li>
  </ul>
</nav>

使用Google Translate专属类名 #

Google Translate会识别notranslate类，给需要保护的元素添加这个类也能达到阻止翻译的效果：

<div className="notranslate">
  <p>这段内容不会被Google Translate翻译</p>
</div>

这些方法对PWA完全有效，因为PWA本质是运行在独立容器中的网页，浏览器扩展的翻译规则依然适用。

内容的提问来源于stack exchange，提问作者Nathan Bernard