Chromeの拡張機能を作ってみる Vol.2 雛形の作成

Chrome JavaScript APIs

前回のChromeの拡張機能を作ってみる Vol.1 仕様検討の続きです。
今回は最小限必要なディレクトリやファイルを作成し、機能の実装に入れる寸前まで進めてみます。

環境

$ node -v
v7.8.0

$ yarn --version
0.22.0

$ gulp --version
CLI version 3.9.1
Local version 3.9.1

使用ツール・アーキテクチャ

  • Yarn
  • webpack
  • gulp
  • Babel
  • React
  • Redux

プロジェクトに関するディレクトリ・ファイルの作成

実装のロジック以外に必要なディレクトリ・ファイルを作成していきます。

プロジェクトディレクトリの作成 => 移動

$ mkdir rmtabs
$ cd rmtabs

ファイルの作成

$ touch README.md .eslintrc.yml .gitignore .editorconfig webpack.config.js gulpfile.js

package.json生成

$ yarn init -y

ファイルの内容を記述

ここに内容を書くと量が多すぎるのでリンクを貼っておきます。

使用モジュールのインストール

$ yarn install

=> yarn.lockが生成されます。

実装に必要なファイルを作成

一通りプロジェクトに必要なファイルが出来上がったので次は実装に必要なディレクトリ・ファイルを最小限の空ファイルで作成していきます。

ソースディレクトリの作成

ロケール・Html・画像・JavaScript・Sassを格納するディレクトリの作成します。

$ mkdir -p src/{_locales,html,img,js,sass}

言語ファイルを格納するディレクトリを作成します。

$ mkdir -p src/_locales/{en,ja}

ソースファイルの作成

$ touch src/manifest.json
$ touch src/html/setting.html
$ touch src/js/background.js
$ touch src/js/contentscript.js
$ touch src/js/setting.js
$ touch src/sass/contentscript.scss
$ touch src/sass/setting.scss
$ touch src/_locales/en/messages.json
$ touch src/_locales/ja/messages.json

雛形の完成

最小限のセットアップはこれで完了しました。
あとは実装を進めていく上で必要なものが出てきたらその都度追加・修正していく形になります。
作ったファイルやファイルに記述されている内容の詳細は今後該当の箇所の実装記事にて触れていきます。
次回はChromeで実際に動かしていこうと思います。

関連リンク

Recent Posts

Archive