[TypeScript]Chrome拡張機能を作るための準備

TypeScriptでChrome拡張機能を作りたいなー、とのネタが出来たので、作る上での準備フェーズで何を行ったか、簡素にコマンドをまとめました。ありふれたネタですが、シンプルバージョンなコンテンツとして差別化を図ろうと思います。

なお、バックグラウンドサイドの機能を作った都合上、Contents ScriptやPage Action等のパターンまでは網羅していないですが、フローはそのまま、パッケージやmanifest.jsonを修正をすれば上手く行くんじゃないか、と思います。

プロジェクト作成

$ mkdir smp-extension
$ cd smp-extension
// npmプロジェクトの開始
$ npm init

開発用パッケージのインストール

// ビルドツールのWebpackやTypeScript、Chrome用の型情報等を devDependencies としてインストール
$ npm install --save-dev webpack webpack-cli copy-webpack-plugin typescript ts-loader @types/chrome

設定ファイル作成

package.json

{
  "name": "smp-extension",
  ...
  // ビルド資材を作る create コマンドを追加
  // 毎回、ディレクトリをクリーンした上でビルドする
  "scripts": {
    "create": "rm -rf dist && npx webpack --mode production"
  },
  ...
}

webpack.config.js

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    // srcディレクトリ配下のbackground.tsをdist/js配下へ移送する
    mode: process.env.NODE_ENV || "development",
    entry: {
        background: path.join(__dirname, "src/background.ts"),
    },
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    // publicディレクトリに配置する静的リソースやmanifest.json等を移送する
    plugins: [
        new CopyWebpackPlugin({ patterns: [{ from: "public", to: "../" }] })
    ],
};

public/manifest.json

{
    "manifest_version": 2,
    "name": "smp-extension",
    ...
    // background.jsの指定
    "background": {
        "scripts": [
            "js/background.js"
        ]
    },
    "permissions": [
        "contextMenus",
        "tabs"
    ]
}

ビルドコマンド

$ npm run create

これを動かすと、dist 配下が下記の様な具合に仕上がるので、dist をChromeへロードすることで、拡張機能が稼働します。

- dist <- これをChrome拡張機能のページでロードする
  - js
    - background.js
  - manifest.json