文系エンジニアのITヒント集

いろいろメモ書き。tips、便利なアプリ紹介、IT・EC関連情報などなど。

はじめてのchrome拡張機能

 とりあえず、下記サイトを参考して作ってみる

Chrome拡張の作り方 (超概要) - Qiita<<

 

最低、二つのファイルがあれば作れるらしい

  • manifestファイル (設定ファイル)
  • JavaScriptファイル (実際に動作させるやつ)

■manifest.json(設定ファイル)

{
//拡張機能の名前
"name": "アラーム", 

//拡張機能のバージョン
"version": "1.0.0", 

//これはgoogle側で決まってる、2の固定
"manifest_version": 2, 

//機能説明
"description": "ヤフートップページでアラームを出す", 

//オプション項目(処理呼び出し)
"content_scripts": [{
"matches": [ "https://www.yahoo.co.jp/" ], 
"js": [
"content.js" 
]
}]
}

※content_scripts:特定のウェブページのコンテキストで実行される拡張機能

 matches : 動作対象のURL

 js:動作するスクリプトのリスト

 

参考

Chrome 拡張機能のマニフェストファイルの書き方 - Qiita

コンテンツスクリプト - Mozilla | MDN

 

■content.js(実際に動作させるやつ)

window.alert('ヤフーやで!');

 

 

■キャプチャ

↓ファイルを読み込ませると、、、 

f:id:Uuu1995:20210403003124p:plain

↓yahooのトップページに行ってみると、、、

f:id:Uuu1995:20210403003249p:plain