1. 프로젝트 환경 세팅 (webpack)

Webpack을 사용해 Chrome 확장 프로그램을 빌드하는 방법은 다음과 같습니다. 확장 프로그램의 스크립트를 브라우저 호환 코드로 번들링하여 사용하므로, npm 모듈을 활용할 수 있습니다.

1. 프로젝트 초기화
   프로젝트 폴더를 생성하고 이동한 후 npm init -y로 package.json 파일을 생성합니다.

Webpack 및 필요한 패키지를 설치합니다:

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev

위 패키지들은 Webpack의 기본 기능과 ES6+ 코드를 브라우저에서 호환되도록 트랜스파일링하는 Babel을 위한 것입니다.

2. Webpack 설정 파일 생성
   프로젝트 폴더에 webpack.config.js 파일을 생성하고, 아래와 같은 기본 설정을 추가합니다:

const path = require('path');

module.exports = {
  entry: {
    background: './src/background.js', // Background 스크립트
    content: './src/content.js',       // Content 스크립트
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',      // background.bundle.js, content.bundle.js 등의 이름으로 생성됨
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  resolve: {
    fallback: {
      // Node.js 모듈을 polyfill로 설정합니다 (필요한 경우 추가)
      fs: false,
      path: require.resolve('path-browserify'),
      crypto: require.resolve('crypto-browserify'),
    },
  },
  mode: 'production',
};

여기서 entry에는 확장 프로그램에 필요한 스크립트를 정의하고, output에는 번들된 파일이 생성될 위치와 파일 이름을 지정합니다. fallback은 브라우저에서 동작하지 않는 Node.js 모듈들을 대체할 polyfill을 설정하는 부분입니다.

3. Babel 설정 파일 생성
   프로젝트 루트에 .babelrc 파일을 생성하고, 아래와 같이 Babel 설정을 추가합니다:

{
  "presets": ["@babel/preset-env"]
}

이를 통해 최신 JavaScript 문법이 브라우저 호환 코드로 변환됩니다.

4. Chrome 확장 프로그램 구조 설정
   Chrome 확장 프로그램 파일 구조는 아래와 같습니다:

프로젝트 폴더/
├── src/
│   ├── background.js       // Background 스크립트 파일
│   └── content.js          // Content 스크립트 파일
├── dist/
│   ├── background.bundle.js
│   └── content.bundle.js
├── manifest.json           // Chrome 확장 프로그램 설정 파일
├── package.json
├── webpack.config.js
└── .babelrc

manifest.json 파일에는 확장 프로그램 설정을 정의합니다. 예를 들어:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.bundle.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.bundle.js"]
    }
  ],
  "permissions": ["storage"]
}

5. Webpack 빌드 실행
   이제 Webpack을 사용하여 프로젝트를 빌드할 수 있습니다. package.json에 build 스크립트를 추가합니다:

"scripts": {
  "build": "webpack"
}

그런 다음, 터미널에서 아래 명령어를 실행하여 빌드를 수행합니다:

npm run build

dist 폴더에 번들된 파일들이 생성됩니다. 이제 Chrome 확장 프로그램이 번들된 스크립트를 사용할 수 있으며, npm 모듈도 정상적으로 작동합니다.