启动Next.js Chrome扩展的有用技巧

本文详细介绍了使用Next.js创建Chrome扩展的过程，重点是为弹出式弹出式的React和实现有效的代码组织。作者分享了他们的经验，将Twitter主题项目重写为Next.js扩展名，强调了Next.js结构的优势，而不是Create React应用等替代方案。

引用的关键好处是改进的代码组织，最大程度地减少样板。虽然Next.js具有静态HTML导出，JavaScript预加载和路由等功能是有益的，但主要动机是更清洁的代码。

作者概述了一个实用的文件夹结构：

 <code>? extension ? manifest.json ? next-app ? pages ? public ? styles ? package.json README.md</code>

至关重要的方面是自定义的构建脚本。标准的next export需要修改以处理Chrome扩展细节。该脚本将Next.js应用程序导出到扩展名目录，重命名文件（删除领先的下划线），并从public文件夹中管理资产。提供了最终的全面构建脚本，包括资产处理。

manifest.json文件被配置为利用action关键字（清单V3）指定Next.js生成的弹出HTML文件：

 {
  “名称”：“ Next Chrome”，
  “描述”：“ Next.js Chrome Extension Starter”，
  “版本”：“ 0.0.1”，
  “ castest_version”：3，
  “行动”： {
    “ default_title”：“ next.js app”，
    “ default_popup”：“ index.html”
  }
}

注意到重要的限制：服务器端Next.js功能（例如， next/image ）与Chrome扩展不相容。

最后一步涉及使用npm run build （或yarn build ）构建扩展名，将镀铬的未包装扩展（ chrome://extensions ）加载，并启用开发人员模式。

总之，本文为寻求Next的开发人员提供了实用指南。JS为建立Chrome扩展的优势，提供简化的开发过程和改进的代码组织。它强调了定制的构建过程的重要性，并强调了避免的潜在陷阱。

以上是启动Next.js Chrome扩展的有用技巧的详细内容。更多信息请关注PHP中文网其他相关文章！