zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

谷歌プラグインを使用してウェブサイトにコードを注入する方法

ウェブサイトを閲覧する際、ウェブサイトの制約により、拡張機能やスクリプトを使用して拡張することがよくあります。一般的な方法には、Tampermonkey と Google Chrome 拡張機能の 2 種類があります。Tampermonkey も一種の拡張機能で、使いやすいですが、今日は Google Chrome 拡張機能を使用して注入する方法について説明します。

以下のファイルを生成するための構造を作成します。

|chrome-plugin
|---manifest.json
|---script.js
|---favicon.ico

manifest.jsonにコードを記述します。これはエントリーファイルであり、拡張機能の基本情報を宣言します。

  1. default_iconは拡張機能のアイコンです。
  2. matchesは使用するウェブサイトであり、このドメインのウェブサイトでのみ有効になります。後ろには /* を追加することに注意してください。
  3. 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 ドルの料金を支払った後、アップロードすることができます。審査後、拡張機能はストアのリストで確認できます。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。