はじめに
公式ドキュメント読みながらちょっと触ってみるだけの記事
前提
- 環境構築は別記事にしてるので割愛。(ボイラープレートを用いてます)
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
フォルダに記載すべきということなので、そこら辺を調べてみる。
console.log('This is the background page.');
console.log('Put the background scripts here.');
これが該当するっぽい。これが自動生成されてbackground.bundle.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
ストレージへのアクセス権をマニフェストに追加しろとのこと。
ボイラープレート側には記載されてないので、追加する。
"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ぽい/ぽくないは、雰囲気でやってます)
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;
}
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表示ができる仕組みを今回理解できたので、ひとまずオッケー。
以上。