今見ているWebページの中身を書き換えてみます。
これを実現するのが Content Scripts（コンテンツスクリプト） という機能です。
Content Scripts（コンテンツスクリプト）を使うと、特定のサイトを開いた瞬間に、自動でプログラムを動かして、色を変えたり、画像を変更したりすることができます。
今回は実習として、「僕のサイトのページを開いたら、背景を真っ赤にする」というシンプルな機能を作ってみましょう。
まずはデスクトップなど任意の場所に新しいフォルダを作成し、名前を chg-color（何でもOKです）としてください。
このフォルダの中に「manifest.json」、「content.js」という２つのファイルを作成します。
テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。
manifest.json （設定ファイル）
{
"name": "ページの色を変える",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": ["https://hidero.net/*"],
"js": ["content.js"]
}
]
}
１． content_scripts
Webページの中で実行するプログラムを設定します。
２． matches
「どのURLの時に動かすか」を指定します。
今回は https://hidero.net/* と指定したので、僕のサイトページを開いた時だけ動きます。
※ *（アスタリスク）は「その後の文字列は何でもOK」という意味です。
３． js
「実行するJavaScriptファイル」を指定します。
ここでは content.js を読み込むように設定しました。
content.js （Javascript）
指定したページを開いたときに実行されるJavascriptです。
document.body.style.backgroundColor = "red";
このコードは、通常のJavascriptと全く同じです。
１． document.body
今表示されているWebページの「本体（bodyタグ）」を指します。
２． style.backgroundColor = “red”
スタイルの背景色を赤（red）に設定します。
実行
「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、僕のサイト（https://hidero.net/）にアクセスすると背景が赤になっていることが確認できます。
