可以重寫為：是否可以在Chrome擴充中使用npm模組？

Question

我嘗試了，但是出現了一個“require is not defined”錯誤。我找不到關於這個錯誤的訊息，請問有人可以給我解釋一下嗎？

Answer 1

2022年的更新答案

簡短回答：是的，你可以要求/導入包。而不是自己費力地設定和配置像Webpack這樣的打包工具（特別是如果你沒有使用過它們），現在有一些構建工具可以用來創建Chrome擴展的樣板代碼：

• Extension CLI - 這個工具有很好的文檔，你還可以參考一些使用了這個工具的Chrome擴展的源代碼（閱讀：學習其他人如何設置他們的代碼）。
• Chrome Extension CLI

使用它們的好處：

• 新專案會初始化一個預設的專案文件結構，非常有幫助。
• 它們支援現代JavaScript（ES6、ES2021），所以模組可以正常運作。
• 它們已經整合並預先配置了打包工具（我認為上述兩種情況都是Webpack）。因此，你不需要自己安裝和設定任何工具。
• 你可以像平常一樣使用npm安裝任何你需要的套件/依賴。

然後，當然，讓Chrome擴展的官方文件引導你完成剩下的部分。

Answer 2

這是可能的，但你必須小心。嘗試使用require()來載入一個套件意味著Node將嘗試在你的檔案系統中定位它的檔案。 Chrome擴充功能只能存取你在清單中聲明的文件，而不能存取你的檔案系統。

為了解決這個問題，使用像Webpack這樣的模組打包工具，它將產生一個包含透過require()引入的所有套件的程式碼的單一JavaScript檔案。你需要為你的每個Chrome擴充元件產生一個單獨的模組（例如背景頁、內容腳本、彈出視窗），並在清單中聲明每個產生的模組。

為了避免嘗試設定建置系統以使require()可用，我建議從一個樣板專案開始。你可以查看我的擴充功能來看我是如何做的。