Chrome 拡張機能の作り方

概要

Chrome拡張機能の作り方についての備忘録

目的

Chatworkの拡張機能を作りたい

手順

最低限必要なもの

• manifest.json
  • 拡張機能の設定ファイル
• content.js
  • 実行ファイル

manifest.jsonの内容

{
  "manifest_version": 3,
  "name": "Chatwork Chrome Extension",
  "version": "1.0",
  "description": "Chatwork Chrome Extension",
  "content_scripts": [
    {
      "matches": ["https://www.chatwork.com/"],
      "js": ["content.js"]
    }
  ]
}

説明

manifest_version: manifestファイルの形式バージョン
name: 拡張機能の名前
content_script: 特定のページにアクセスした時に実行するjsやcssを指定するところ
matchesには拡張機能を使用したいサイトのURL
jsに実行したいファイルを指定する

content.jsの内容

window.alert('ようこそChatworkへ！')

作成した拡張機能の読み込み

拡張機能の設定ページに移動する

Chromeのアドレスバーに chrome://extensions/ を入力する

プログラムを読み込む

"パッケージ化されていない拡張機能を読み込む"をクリックする

先ほど作成したmanifest.jsonがあるディレクトリを選択する

エラーなどがなく読み込めていることを確認する

動作確認

https://www.chatwork.comにアクセスするとメッセージが表示される