啟動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中文網其他相關文章！