はじめに

公式ドキュメント読みながらちょっと触ってみるだけの記事

前提

環境構築は別記事にしてるので割愛。（ボイラープレートを用いてます）

Getting Started

Create the manifest

Load an unpacked extension

終わってまーす

Add functionality

背景色を修正するのを試すらしい。やってみよう。

Register the background script in the manifest

公式

  "background": {
    "service_worker": "background.js"
  }

今回

  "background": {
    "service_worker": "background.bundle.js"
  },

公式は background.js だけど、 background.budle.js が環境構築時に既に設定されてるっぽいな。

Create the background script

ボイラープレート側で既に作られているのかと思いきや、見当たらない。。。
ボイラープレート側の説明によると、機能はsrcフォルダに記載すべきということなので、そこら辺を調べてみる。

src/pages/Background/index.js

console.log('This is the background page.');
console.log('Put the background scripts here.');

これが該当するっぽい。これが自動生成されてbackground.bundle.jsになるんじゃなかろうか（推測）

src/pages/Background/index.js

let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

公式の言う通りに書き換えてみる。

Add the storage permission

ストレージへのアクセス権をマニフェストに追加しろとのこと。
ボイラープレート側には記載されてないので、追加する。

manifest.json

  "permissions": [
    "storage"
  ],

"background"と"action"の間くらいに追加

Inspect the background script

chrome://extensions/
今回の拡張の再読み込みボタンを押下
青いリンクの「Service Worker」をクリック！
開いたウィンドウのconsoleタブに「Default background color set to green」が表示される

Introduce a user interface

何やら「ポップアップ画面のUIを表示してみよう」と言うことらしい。
ただ、ボイラープレート側で既に用意してくれてるので、確認したいだけなら右上の拡張からページを表示できることを確認できる。
が、一応Reactに当てはめたら・・・ってのでやってみよう。

マニフェストは一旦無視して良さそうなので、無視。
公式ではpopup.htmlだが、ボイラープレートはreactにしてるので、そこは違う。
ボイラープレートにはsrc/pages/Popup/あたりにソースがある。

popup.html＞head＞css:直接index.htmlに記載してもいいけど、Popup.jsxでインポートする感じのがreactっぽいので、そうする。
popup.html＞body＞button：直接index.htmlに記載してもいいけど、Popup.jsxに記載する感じのがreactっぽいので、そうする。
button.css：index.cssに記載してもいいけど、reactっぽくないので、単独ファイル化する。
（reactぽい/ぽくないは、雰囲気でやってます）

src/pages/Popup/button.css

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

src/pages/Popup/Popup.jsx

import React from 'react';
import './Popup.css';
import './button.css';

const Popup = () => {
  return (
    <button id="changeColor"></button>
  );
};

export default Popup;

jsxはボイラープレートよりシンプルになったな。

この状態で、右上のアイコンをクリックすると、こんな感じで表示される！やったー！

この先にあった、読み込み時にボタンを緑に変えるやつは、できなかった・・・
（html/javascriptで実装されているものを、react/typescriptに変換するスキルがなかった）

また勉強して戻ってこよう。

Layer logic

jsだー
今は諦め。

Give users options

う〜ん、ここもJS前提。
諦め。

Take the next step

次に進む前に、React/Typescriptに変換する力を身につけるかな。
とはいえ、ポップアップでUI表示ができる仕組みを今回理解できたので、ひとまずオッケー。

以上。

Chrome拡張開発 Getting Started（React×Webpackのボイラープレートを利用した場合）