見出し画像

kintoneプラグイン開発入門(2)

前回は、サンプルのkintoneプラグインをもとに、情報の隠匿方法を試そうとしました。マニフェストのバージョンが要件を満たしていなかったので、v1からv3に変更したところ、いろいろ修正が必要だということがわかったところまででおわりました。今週は、そもそも拡張機能ってどうやって開発すればよいか?を学習したいと思います。


拡張機能の基本を学ぶ

拡張機能の公式ドキュメントを中心に読んで、理解したいと思います。

Hello,拡張機能!

さて、「基礎知識を得るなら、公式ドキュメントで」というわけで、Chrome拡張の公式ドキュメントを読んで、ためそうと思います。拡張機能へようこそから、始めます。そう、何事も、Hello, world!から始めるのが筋というものです。

最初の拡張機能を作成する

Chrome拡張公式ドキュメントのページ
「始める」から

「始める」をクリックすると、そのものズバリ「Hello World 拡張機能」というTutorialページに遷移しました。ユーザーが拡張機能のツールバー アイコンをクリックすると、「Hello Extensions」を表示する拡張機能を作ります。

マニフェストファイル

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

表示用ページ

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

アイコンもダウンロードして、マニフェストのdefault_iconの設定に合わせて、ファイル名を"hello_extensions.png"に変更しました。これで準備OKです。パッケージ化されていない拡張機能として読み込んでみます。

拡張機能の一覧に追加された様子
Hello Extensions が拡張機能として追加された

ツールバーに追加しました。

Hello Extensionsがツールバーに追加された様子
ツールバーに追加

ツールバーのアイコンをクリックすると、
「Hello Extensions」という小さなページがポップアップされました。成功です。

Hello Extensions拡張のアイコンをクリックしてポップアップが表示された様子
Hello Extensions!

拡張機能を構成するファイル群と、それに合ったマニフェストがあれば、拡張機能が動作することが確認できました。次回は、拡張機能とマニフェストの関係を、もう一度突き合わせて、どこを修正すればよいかを調べながら進めたいと思います。

おまけ:とほほさんは、常に知識がアップデートされていてすごい

プラグイン開発について検索している中で、とほほのChrome拡張機能開発入門を発見しました!しかも、マニフェストのバージョンもV3です。もう、尊敬しかないです。公開して終わりにせず、公開内容を最新の状態に保つというのは見習いたいと思いました。

今週は、ここまでにします。思いの外疲れていて、進捗出せませんでした。

更新履歴:
タイポしていたのを修正しました。(2024-01-29)

この記事が気に入ったらサポートをしてみませんか?