Chrome拡張機能 開発方法

用意するファイル

以下のフォルダSample直下(ファイル名は任意で可)に設置します。

manifest.json

• 必須のファイルです。
• バージョンとか、表示名とかを設定します。
• manifest_versionは3にしないとエラーになるので注意(昔に書かれたコードだと2になっています)
• content_scriptsの説明を以下の表に示します。

matches	拡張機能を適用するページのURL 正規表現も使えるので、全ページに適用といったことも可能です。 詳しくは、公式HPへ⇒Chrome Extensions match patterns
css	適用するcssファイルのパス
js	適用するjavascriptファイルのパス

{
    "manifest_version": 3, 
    "name": "name", 
    "description" : "description", 
    "version": "0.1", 

    "content_scripts": [{ 
        "matches": ["https://ja.wikipedia.org/wiki/Google_Chrome"], 
        "css": ["style.css"],
        "js": ["script.js"]
    }]
}

style.css

img{
    display: none;
}

script.js

const element = document.querySelector('h1');
element.innerHTML = '書き換えたh1';

拡張機能の登録

まず、chromeで拡張機能のページ(chrome://extensions/)に行き、デベロッパーモードをオンにします。

「パッケージ化されていない拡張機能を読み込む」をクリックしたらフォルダを選択する画面が出るので、先ほどの3つのファイルを設置した「sample」フォルダを選択します。

次のように表示されることを確認します。
拡張機能のファイルを書き換えたときは、矢印ボタンを押して更新するようにしましょう。

動作確認

matchesで指定したChromeのWikipediaのhttps://ja.wikipedia.org/wiki/Google_Chromeにアクセスします。

拡張機能適用前

拡張機能適用後

• 「Google Chrome」という文字が「書き換えたh1」
• 画像ファイルが非表示

になっていることが分かります。

参考

とても分かりやすいのですが、少し前に書かれた記事なためmanifest_versionが2になっている点に注意。
qiita.com

manifest_version2と3の違いは公式サイトに詳しく書かれています。
developer.chrome.com