<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=220807558931713&amp;ev=PageView&amp;noscript=1">

Chrome拡張機能の作り方をわかりやすく解説

 2022.09.06  株式会社電算システム

みなさんはChromeブラウザを使っている時に「こんな機能があったらいいのにな~」と思ったことはありませんか?
その思いを、ぜひ実現してみましょう!

本稿では『Chrome拡張機能の作り方』について解説します。

Chrome拡張機能とは?

Chrome拡張機能(Chrome Extension)とは、Chromeブラウザに機能を追加することができるアドオンツールです。
Chrome ウェブストア』上で色々なChrome拡張機能が公開されているので、この中から好きなツールを検索してインストールすることができます。
基本的には無料で利用できますが、中には有料ライセンスの形態をとっているものもあるので、
それぞれのストア概要ページを確認するとよいでしょう。

次にChrome拡張機能の内部構成について説明します。
Chrome拡張機能は一般的なWebページとほぼ同じ仕組みで動いており、
具体的には主に HTML/JavaScript/CSS の3種類のファイルで構成されています。
よって、Webページ(HTML等)の開発知識さえあれば、Chrome拡張機能も難なく開発し始めることができます。

Google Workspaceの特徴と他コミュニケーションツール比較
ノーコード開発プラットフォームAppSheetご紹介資料

作ってみよう

それでは実際にChrome拡張機能を作ってみましょう。
最低限必要な要素は manifest.json ファイルのみです。
まずは、次のような manifest.json ファイルを作成します。

▼manifest.json

Chrome拡張機能の作り方をわかりやすく解説-1

次に新規フォルダを作成して、上記 manifest.json ファイルを格納します。
このフォルダが拡張機能のルートフォルダ(一番親のフォルダ)となります。

Chrome拡張機能の作り方をわかりやすく解説-2

動作確認をしてみます。
Chromeの[拡張機能]ページを開いて、[デベロッパーモード] を有効にします。([拡張機能]ページは、[設定]ページから開くことができます)
次に、[パッケージ化されていない拡張機能を読み込む] を選択して、拡張機能のルートフォルダを指定します。

Chrome拡張機能の作り方をわかりやすく解説-3

インストールできました。

Chrome拡張機能の作り方をわかりやすく解説-4

もし次のようなエラーが発生した場合は、文字コードが合っていない事が原因なので、 manifest.json ファイルを "UTF-8"形式で保存し直すことで解決できます。

Chrome拡張機能の作り方をわかりやすく解説-5

機能を追加してみよう

次のような機能を追加してみます。

Chrome拡張機能の作り方をわかりやすく解説-6

この機能を実装するには、コンテントスクリプトの定義が必要となります。コンテントスクリプトとは、ウェブページを開いた瞬間に独自のスクリプトを挿入する機能のことです。
それでは、manifest.json にコンテントスクリプトの定義を追加します。

▼manifest.json

Chrome拡張機能の作り方をわかりやすく解説-7

次に、挿入したい処理コード(JavaScript)を記述します。
処理内容としては、ボタンをクリックした時に、ページURL中の "/edit" と "/preview" を入れ替えるという処理を記述しています。

▼js/content_script.js

Chrome拡張機能の作り方をわかりやすく解説-8

最後に、追加するボタンのデザインコード(CSS)を記述します。

▼css/content_script.css

Chrome拡張機能の作り方をわかりやすく解説-9

最終的に、次のようなファイル構成になりました。

Chrome拡張機能の作り方をわかりやすく解説-10

※処理コードを簡単にするため、ここではjQueryライブラリを使用しています。jQueryライブラリはコチラからダウンロードできます。

("Download jQuery" ボタンをクリックして、"Download the uncompressed, development jQuery x.x.x" を選択し、開いたコードをファイル保存します)

動作確認をしてみます。
まずは修正を反映させるために、Chromeの[拡張機能]ページで[更新]ボタンをクリックします。
次に、スプレッドシートを開くと、ページ内の左上にボタンが追加され、
ボタンをクリックすると、プレビュー表示に切り替わります。
そして、もう一度ボタンを押すと、今度は編集モードに切り替わります。

Chrome拡張機能の作り方をわかりやすく解説-11

これにて、期待通りの機能を追加することができました。

Google Workspace
Google Workspace 事例

まとめ

今回はChrome拡張機能の作り方について簡単に解説しました。
ですが、Chrome拡張機能には、ここでは紹介しきれなかった機能もまだまだたくさんあります。ぜひご自身で1度作ってみていただき、奥深いChrome拡張機能の世界に足を踏み入れてみて下さい!

あるいは、自分で作るにはハードルが高いなーと感じるようであれば、ぜひ弊社に開発をご依頼ください!

最後に、弊社が開発した『こえもじ』についてご紹介します。

Chrome拡張機能の作り方をわかりやすく解説-12

『こえもじ』はGoogle Meet上で日本語の字幕送信機能を追加できる、無料のChrome拡張機能です。(執筆時点では)Google Meet 標準の字幕機能は日本語に対応していないので、『こえもじ』を使うことで初めて日本語の字幕送信が可能となります。元々は耳が不自由な方ともウェブ会議でコミュニケーションを取りやすくするために開発しました。
現在は多くのユーザー様にご利用いただいております。

ブログでも機能面や使い方について紹介していますので、ご覧いただければと思います。

Google Meet 拡張機能

Google Meet 拡張機能
こえもじ入れ方と使い方

電算システムでは、ウェブ会議ツール1つであるGoogle Meet を長年愛用してきました。様々なユーザー様にこれからも利用いただくために Google Meet で使用できる拡張機能を開発しました。その拡張機能”こえもじ”と、その使い方をご紹介します。

詳細はこちら

RELATED POST関連記事


RECENT POST「Google Workspace」の最新記事


Google Workspace

Chromebookで Excel(エクセル)を使うときの注意点をご紹介

Google Workspace

Chromebook でオフラインモードに設定する方法とは?

Google Workspace

Chrome OS Flex で学校のデバイス環境の改善を図る

Google Workspace

Google Apps Script の書き方をわかりやすく解説

Chrome拡張機能の作り方をわかりやすく解説