2024.11.14
いまさらNode.jsを知ろう～環境構築も～
2023.11.10
イベント【弊社紹介】社内勉強会開催！〜Google Chrome拡張機能のススメ〜
目次
- はじめに
- 今回の勉強会
- おわりに
はじめに
本稿をご覧いただいております皆様こんにちは。MTです。
先日、弊社内の開発ユニットが持ち回りで実施している勉強会が開催されたので、そのご紹介をしたいと思います。内容をざっくり紹介するなどもしているので、弊社について少しでも知っていただくほか、何か得るものがあれば幸いです。
今回の勉強会
今回の勉強会テーマ
今回の勉強会では、「Google Chrome拡張機能」に関して、エンジニア職・非エンジニア職問わずに勉強会を実施しました。
勉強会の主導は、開発ユニットのうち1つで、Google Chromeの拡張機能がそもそもどういったものか、何ができるのかの紹介から、業務中に見つかった「あったらいいな」を解決するツールを作成するハンズオンまで実施することで、業務を快適に進めるためのノウハウを共有しました。
勉強会のアウトライン
勉強会の内容について、ざっくりとご紹介いたします。
1~4に関しては、内容の要約とご紹介、5のハンズオンに関しては、やったことのご紹介をいたします。内容3以降は、実際に自分で拡張機能を作ってみたい！という方向けの内容になっています。
1. Google Chrome拡張機能とは
読んで字のごとく、Google社提供のWebブラウザであるGoogle Chromeの機能を追加・拡張するものです
（例：ダークモード、Webページ全体のスクリーンショット機能を追加）
サポート自体は2009年頃から始まっており、その翌年2010年からChromeWebStoreがサービス開始された事で開発者・利用者の公開・ダウンロードが便利になり、普及しました。
その後も主にセキュリティ面でアップデートが続けられています。
最近の大きな変更としては、拡張機能の仕様が「Manifest V3」と呼ばれるものに変更され（2021）、
以前の「Manifest V2」の新規受付が停止された（2022）ことが挙げられます。
2. Manifest V3
Manifest: Chrome拡張機能の設定ファイル「manifest.json」のこと
このバージョン3が「Manifest V3」です。
セキュリティとパフォーマンスの向上を目的としたアップデートで、特徴は以下の通りです。
- ・イベント駆動型
- ・インラインスクリプトを禁止
- ・権限が一括だけでなく、必要に応じて要求
- ・古いAPIの利用を制限
- ・大容量のストレージと、消費リソースの削減
3. Chrome拡張機能の構成
Chrome拡張は、大きく分けて4つのパーツで構成されています。
- ・background: 拡張機能の処理やAPI・ブラウザとのやり取りを行う
- ・Content Script: 任意のWebページ上で起動するスクリプト
- ・popup: ツールバーの拡張機能アイコン押下時に展開されるポップアップ
- ・html,js: 拡張機能の設定画面などのページ要素
上記のパーツが、他のパーツやストレージと連携して、拡張機能を構成します
4. 実装のススメ
Q. いざ実装！したいけど、どうすればいい？
A. 実は拡張機能に必要なものはmanifest.jsonだけ。ひとまずそれを作りましょう！
{
"manifest_version": 3,
"name": "拡張機能名称",
"version": "1.0"
}
このmanifest.jsonにどんどん設定を追記していく事で拡張機能の構造は決まります。
逆にいうと、大抵の構造に関してはこのファイルで制御しているので、ディレクトリ構造などはかなり自由に構築ができます。
そして、実装が終わり拡張機能が完成したら、機能を公開しましょう。
（※ ストアに公開するには登録・審査が必要になるため、こちらで紹介するのは個人利用・テスト用のやり方です）
1. Chromeブラウザのメニューを開き「拡張機能」>「拡張機能の管理」を選択
2. デベロッパーモードに切り替え、「パッケージ化されていない拡張機能を読み込む」を選択
3. 作成した拡張機能のフォルダを選択
以上で完了です。よければ上記manifest.jsonのサンプルでお試しください
5. ハンズオン
勉強会で実施されたハンズオンでは、「特定のWebサイトのCSSを変更する拡張機能」を題材に
勉強会担当のエンジニアが事前にソースコードを用意しており、そのソースコードから作成された虫食い形式の問題を解答していくことで、学びを深めました。
【問題例】
おわりに
以上で、今回実施された勉強会についてのご紹介を終わらせていただきます。
Chrome拡張機能開発に対するお話になりますが、特に企業ではセキュリティなどの観点からサードパーティ製のものは使えない、といったことがままあると思います。
「うーん困った。使いたいけど使えない、、」「こういう拡張があればなぁ、、」
こんなときに、「なければ作れば良いじゃない！」と拡張機能を作る選択肢が増えると、もっと働きやすくなったり、自分にとって便利で面白い活動ができたりするのではと感じました。
自分の欲しい拡張機能を自分の手で作ってみませんか
閲覧いただきありがとうございました。感想フォームなども下にありますのでよければご意見お聞かせください。
今後の記事もご覧いただけますと幸いです。MTでした。
【記事への感想募集中！】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！- こんな記事が読んでみたい、こんなことが知りたい、調べてほしい！という意見も募集中！
- いただいた感想は今後の記事に活かしたいと思います！
【テクノデジタルではエンジニア/デザイナーを積極採用中です！】
下記項目に1つでも当てはまる方は是非、詳細ページへ！- 自分でアプリを作ってみたい
- ITで世の中にワクワクを生み出したい
- 使いやすさ、デザインにこだわったWebサイトを開発したい
Qangaroo（カンガルー）
- 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
- テストの進捗が見える。開発がスマートに進む。
- クラウド型テスト管理ツール『Qangaroo（カンガルー）』
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
