chrome拡張で.envを使いたい

Question

前提・実現したいこと

jsでchrome拡張を作っています。大体実装ができたので.envファイルを作って実行しようとしたのですが
require('dotenv').config();というコードの部分でエラーが出ました。
実現したいことは、.envファイルを使えるようにしたいです。

dotenvはnpm installで入れています。package-lock.jsonも反映されています。

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^10.0.0"
  }
}

発生している問題・エラーメッセージ

Uncaught ReferenceError: require is not defined

該当のソースコード

require('dotenv').config(); // ここでエラー
const url = "https://test"

function send_message(message){
  // 省略
}
function event_listener(){
    var btn_elem = document.getElementsByClassName('test_btn');
    btn_elem[0].addEventListener('click', function(){send_message("test")});
};
if(document.URL == url){
  event_listener();
}

試したこと

importしてないことが問題かと思い、こちらをコードに入れましたが読み込んでくれませんでした。
import dotenv from "./node_modules/dotenv";

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

他の変数のみを書いているjsファイルを作成して、manifest.jsにそのjsファイルを書き込みました。.gitignoreにそのファイルを入力すればそのファイル読まれなくなるのでそのような対応にして解決しました。回答ありがとうございました。

Answer 2

require('dotenv').config();ってサーバーサイドで動かすNode.jsの構文ですよね。
クライアントサイドのChrome拡張のJavaScriptでは使えないのでは。
そもそもdotenvはクライアントサイドでも使えるものなのですか？

Comments

[popona]

クライアントサイドでも使えるものかと思っていました。
そこから認識が違った見たいですかね。githubにあげるときにapi_tokenなどを.envに入れたいとおもっていたのですけど、このような場合は普通どのように変数を管理するのでしょうか？