Chromeの 拡張機能 をFlutterで作ろう！

2022.03.23

Chromeの 拡張機能 も、Flutterで作れないかな？

実は、作れるんです！

本記事ではChromeの拡張機能をFlutterを使って作る方法について解説します。

以下の画像のような形で、Chromeの拡張機能としてアプリを立ち上げることが可能となります。

ぜひ本記事を読んで挑戦してみてください！

本記事の大部分は、以下の記事を参考にしています。

Vercel Security Checkpoint
cswithiyush.hashnode.dev

Chromeの拡張機能を作成する手順

準備

WebでビルドできるFlutterプロジェクトを用意します。
以下のコマンドを実行し、エラーなく実行できるか確認してみてください。

flutter run -d chrome

本記事ではFlutter プロジェクトを作成した時にできる、
カウンターアプリを拡張機能に埋め込むことを目標に進めていきます。

index.htmlの修正

Flutterプロジェクトのwebディレクトリ内にある、index.htmlを書き換えます。

2行目にある<html>を以下のコードに書き換えてください。

<html style="height: 600px; width: 350px">

ここで設定したheight(高さ)とwidth(幅)の大きさで、
拡張機能がポップアップします。

お好みの大きさに調整してください。

次に、39行目〜102行目の<script> ~ </script>タグを以下のコードに書き換えてください。

<script
 type="application/javascript" src="main.dart.js">
</script>

完成したindex.htmlのコードは以下の通りとなります。（コメントは削除しています。）

<!DOCTYPE html>
<html style="height: 600px; width: 350px">
<head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="extension_sample2">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>extension_sample2</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
       <script
       type="application/javascript" src="main.dart.js">
      </script>
</body>
</html>

<title>~</title>の部分はあなたが設定した名前となります。

manifest.jsonの修正

index.htmlと同様webディレクトリにある、manifest.jsonを書き換えます。

コード全体を以下のコードに置き換えてください。

{
    "name": "flutter_chrome_extension",
    "description": "flutter_chrome_extension",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 3
}

nameで設定した名前が拡張機能の名前となります。
また、default_iconで設定したアイコンがブラウザで表示される
拡張機能のアイコンとなります。

拡張機能のための設定は以上となります。

ビルド

作成したアプリを拡張機能としてビルドします。

ターミナルで作成したアプリのルートディレクトリに移動し、以下のコマンドを実行してください。

flutter build web --web-renderer html --csp

Chromeの拡張機能への追加

作成したアプリをChromeの拡張機能へ追加します。

Chromeを開き、アドレスバーにて以下のアドレスを実行してください。

chrome://extensions/

右上の3つのドット→設定→拡張機能
でも同様のページが開きます。

拡張機能のページが開いたら、右上のデベロッパーモードをオンにします。

オンにすると、拡張機能の検索バーの下に、3つボタンが出てきます。
その中の「パッケージ化されていない拡張機能を読み込む」を押してください。

ファイル選択のポップアップが出てくるので、
作成したFluttterプロジェクトのbuildディレクトリにある、
webフォルダを選択して決定してください。

以上で追加は完了です。

ブラウザ右上のパズルのピースのアイコンをクリックすると、
作成した拡張機能が候補として出てきます。

作成した拡張機能の横のピンマークをクリックすると、ブラウザに常時表示されるようになります。

表示されたアイコンをクリックすると作成したアプリが立ち上がります。

おめでとうございます！
以上が一連の手順となります。

まとめ

本記事ではChromeの拡張機能をFlutterを使って作る方法について解説しました。

設定もかなり簡単で、すぐに応用できるかと思います。

あなたもぜひ自分のオリジナルアプリをChromeの拡張機能として作成してみてください。

Flutterを一緒に学んでみませんか？
Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、
以下の画像リンクから。



参考

How to create a Google Chrome extension with Flutter | Yayo Code
Learn how to create a Google Chrome extension with Flutter and Dart
yayocode.com

編集後記(2022/3/23)

今回は拡張機能の作り方の紹介でしたが、実際どんな機能をつけたら良いでしょうか？

例えば電卓とか良さそうですよね。
ウェブ上でちょっとした計算をしたい、そんな時に使えそうです。

あとはメモアプリ。
コピペしておきたい内容をメモするのに良さそうです。

ちょっとしたゲームを拡張機能で作ってみるのも面白そうです。
昔流行った、糸通しのようなゲームがブラウザで、
ちょっとした待ち時間に遊べたら楽しいと思います。

考えてみると、色々と思いつきそうです。
あなたは、どんなアプリを作成してみたいですか？

週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。

タイトルとURLをコピーしました