Chrome拡張 – background page

(Last Updated On: 2021-08-16)

Background Page

Chrome拡張機能をロードすると、バックグラウンドで動作する(常駐する)
manifest.json で、”persistent”: false を指定すると、処理終了時に解放される(非常駐)

とりあえず、コンソールログ出力のみ行ってみる

必要なもの

  1. manifest.json 修正
  2. background用のjsファイル

manifestファイル修正

manifest.json

{
    "manifest_version": 2,
    "name": "で拡張3",
    "description": "拡張3",
    "version": "0.3",
    "browser_action": {
        "default_title": "初めて拡張3",
        "default_popup": "popup2.html",
        "default_icon": "icons/FontAwesome_f005(0)_48.png"
    },

// 以下を追加
    "background": {
        "scripts": ["js/my_bg.js"],  // 実行するjsファイル
        "parsistent": false    // 常駐しないように設定
    }

}

background用js

コンソールにログを出力するだけのもの

js/my_bg.js

console.log("## background");

// body に divタグを追加する
let bd = document.getElementsByTagName('body');
let dv = document.createElement('div');
bd[0].appendChild(dv);

console.log("--- background");

確認

  1. 拡張機能を読み込み、有効化
  2. Chromeの拡張機能を開く
    メニュー >> その他のツール >> 拡張機能
    or
    chrome://extensions にアクセス
  3. ビューを検証 バックグラウンドページ をクリックして開発ツールを開く
    拡張機能

開発ツール

ログ出力を確認
divタグも追加されている

  • このjsも、バックグラウンドのページにしかアクセスできない

参考

https://risaiku.net/archives/1653/
https://qiita.com/k7a/items/26d7a22233ecdf48fed8

環境

  • Windows7 Professional 64bit
  • Chrome バージョン: 79.0.3945.130(Official Build) (64 ビット)
  • アイコン作成、iconion、http://iconion.com/