# 【簡単】FlutterでChrome拡張機能を作ってみた
> Flutterを使用してChrome拡張機能を作成する方法について解説。Chrome APIを使用してタブの情報を取得やDartからJavascriptの呼び出しなども解説。
- 公開日: 2025-05-01
- 著者: Matsu
- タグ: Flutter
- URL: https://tech.anycloud.co.jp/articles/flutter-chrome-extention
---
今回は、Flutterで拡張機能を作ってみようと思います！
僕が過去に、チャットワークの一括既読という拡張機能を作ったのですが、具体的な開発方法は載せていなかったので、改めてまとめてみました！
※リリースからしばらく経っているのとGyazoの有料プラン解約して画像も消えてしまいました…今使えるかは分かりません (\*\_ \_)՞՞
## Flutterプロジェクト作成してローカル起動
Chrome拡張機能なのでプラットフォームはwebでOK！
```shell
% fvm flutter create --platforms web chrome_extension_demo
```
以下コマンドでローカル起動してみます。
```shell
% flutter run -d chrome
```
いつものFlutterの初期カウンターアプリがwebで表示されました。
## manifest.jsonで拡張機能の基本設定
`web/manifest.json`を以下のように修正します。
```json
{
"manifest_version": 3,
"name": "デモ拡張機能",
"description": "デモ拡張機能です。",
"version": "1.0.0",
"content_security_policy": {
"extension_pages": "script-src 'self' ; object-src 'self'"
},
"action": {
"default_popup": "index.html",
"default_icon": "/icons/sample.png"
},
"icons": {
"16": "/icons/sample16.png",
"32": "/icons/sample32.png",
"48": "/icons/sample48.png",
"128": "/icons/sample128.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js"]
}
],
"permissions": ["activeTab", "tabs", "scripting", "storage"],
"host_permissions": ["http://*/*", "https://*/*"]
}
```
基本的な項目だけ簡単に説明します。
- **name**
- Chromeウェブストアでユーザーに表示される拡張機能の名前です。
- **description**
- 拡張機能の説明で、Chromeウェブストアにも表示されます。
- **icons**
- Chromeウェブストアなどのアイコンとして使用され、16x16px, 32x32px, 48x48px, 128x128pxのアイコンを用意する必要があります。
## 簡単なChrome拡張機能を実装してみる
今回は、現在表示しているタブのURLを取得して表示するという拡張機能を作ってみます。
完成系のイメージはこちら↓
### Flutterにjsを読み込む
Flutter上でjsを使用するために以下のパッケージを使用します。
このパッケージを使うことで、dart側からJavascirptの処理を直接呼び出すサポートをしてくれます。
```yaml
dependencies:
flutter:
sdk: flutter
js: ^0.6.5
```
### index.htmlの整理
拡張機能を表示するhtmlの基本設定です。
`content_script.js`の読み込みと、拡張機能ポップアップのサイズ（``）を指定しておきましょう。
```html
chrome_extension_demo
```
### Chrome APIを使用してタブの情報を取得
タブのURLを取得するにあたり、`chrome.tabs` API を使用してブラウザのタブシステムを操作します。
[https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=ja#get-the-current-tab](https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=ja#get-the-current-tab)
この API を使用すると、ブラウザのタブを作成、変更、並べ替えなどができます。
`web/content_script.js`
```javascript
async function getUrl() {
let queryOptions = { active: true, lastFocusedWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
return tab.url;
}
```
### main.dartでアプリUIと機能作成
`lib/main.dart`
```dart
import 'package:flutter/material.dart';
import './content_script.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
String currentUrl = 'URL未取得';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
var url = await getUrl();
setState(() {
currentUrl = url;
});
},
child: const Text('このページのURLを取得・表示'),
),
const SizedBox(height: 32),
Text(
currentUrl,
style: const TextStyle(fontSize: 16, color: Colors.black),
),
],
),
),
);
}
}
```
`lib/content_script.dart`
ここでは、jsパッケージを使用してjsの呼び出しをしています。
```dart
@JS()
library chrome_api;
import 'package:js/js.dart';
import 'package:js/js_util.dart';
@JS('getUrl')
external Object _getUrl();
Future getUrl() async {
return promiseToFuture(_getUrl());
}
```
ここまでできたらあとはビルドするだけです。
ちなみに、`flutter run`で表示の確認はできますが、Chrome APIの実行はローカルでできませんので注意してください。
### ビルドする
拡張機能としてビルドします。
```shell
% flutter build web --web-renderer html --csp 13:02:15
Compiling lib/main.dart for the Web...
✓ Built build/web
```
## Chrome拡張機能として読み込む
`chrome://extensions/` ページを開きます。
右上の「デベロッパーモード」をオンにしておきましょう。
そして、「パッケージ化されていない拡張機能を読み込む」を選択すると、ファイル選択のポップアップが表示されるので、ソースコードの「buildフォルダ」内にある「webフォルダ」を選択して決定してください。
以下のように追加されていればOKです。
## 実際に拡張機能を使ってみる
実際に確認してみます。
ボタンをクリックすると…
URLが取得できていますね！
## まとめ
いかがでしたか？
Flutterでも意外と簡単に拡張機能を作ることができました！
Flutter信者はぜひ試してみてください！
## 番外編：Chromeウェブストアへリリースもできる
Chromeウェブストアのデベロッパーアカウントを作成（$5の費用がかかります）してリリースすることもできます。
今回はそこまでやりませんが、興味ある方はぜひ。
zenn.dev
