ウェブサイトを閲覧する際、ウェブサイトの制約により、拡張機能やスクリプトを使用して拡張することがよくあります。一般的な方法には、Tampermonkey と Google Chrome 拡張機能の 2 種類があります。Tampermonkey も一種の拡張機能で、使いやすいですが、今日は Google Chrome 拡張機能を使用して注入する方法について説明します。
以下のファイルを生成するための構造を作成します。
|chrome-plugin
|---manifest.json
|---script.js
|---favicon.ico
manifest.json
にコードを記述します。これはエントリーファイルであり、拡張機能の基本情報を宣言します。
default_icon
は拡張機能のアイコンです。matches
は使用するウェブサイトであり、このドメインのウェブサイトでのみ有効になります。後ろには/*
を追加することに注意してください。js
は読み込むファイルです。
// manifest.json
{
"name": "Welcome",
"manifest_version": 2,
"version": "1.0",
"description": "拡張機能",
"browser_action": {
"default_icon": "favicon.ico"
},
"content_scripts": [
{
"matches": ["https://github.com/*"],
"js": ["script.js"]
}
]
}
次に、script.js
に任意のコードを挿入します。
// script.js
console.log('hello, world!')
これで基本的な拡張機能が完成しました。次のステップはアップロードです。ただし、crx
ファイルをパッケージ化して生成した後、crx
ファイルをアップロードするとエラーが発生し、危険と表示されます。これは、Google ストアにリリースされていないためです。そのため、パッケージ化せずにローカルファイルを直接読み込む方法を使用します。
次に、作成したフォルダを選択します。
アップロードを確定するために、アップロードボタンをクリックします。これで拡張機能のアップロード手順が完了しました。関連する技術を学び、必要な機能を追加することができます。これは Chrome ブラウザが非常に人気のある理由の一つでもあり、多くの拡張機能が統合されています。
もし商業用にアップロードしたり無料で共有したりする場合は、開発者アカウントの登録が必要です。5 ドルの料金を支払った後、アップロードすることができます。審査後、拡張機能はストアのリストで確認できます。