ワンクリック Chrome 拡張機能: スタイル (またはカオス) で背景を変更します

ワンクリックでブラウザを刺激したいと思ったことがあるなら、複数回クリックする時間はありませんよね？ワンクリック Chrome 拡張機能が最適です。必要です。これらの拡張機能は、ボタンをクリックするだけで何か便利な (または笑えるほど無意味な) ことを実行するように設計されています。この記事では、独自のワンクリック拡張機能を簡単に構築する方法を説明します。世界を変える準備をしましょう。Web ページの背景色だけでも構いません。私たちはここで判断するつもりはありません。

ワンクリック Chrome 拡張機能とは何ですか?

ワンクリック Chrome 拡張機能はブラウザの魔法のボタンだと考えてください。それをクリックすると、なんと、何かが起こります。背景色を変更したり、インスピレーションを与える引用を与えたり、踊る猫のアニメーションをトリガーしたり (私たちはあなたを止めません)、世界はあなたのものです。このチュートリアルでは、簡単なことから始めます。ワンクリックで Web ページの背景を落ち着いた水色の色合いに変えるというものです。簡単？

ステップ 1: 拡張機能フォルダー (別名「Everything Is Gonna Be Fine」フォルダー) を作成する

まず、拡張機能ファイルを保存するフォルダーを設定する必要があります。それをワンクリック拡張機能、または世界を青に変えるなどのもっと劇的なものと呼んでください。このフォルダー内には、いくつかの重要なファイルが必要になります:

• manifest.json (拡張機能の頭脳)
• background.js (これはカーテンの後ろのウィザードです)
• Popup.html (拡張機能アイコンをクリックしたときにユーザーに表示される内容)
• Popup.js (物事を実行する魔法のスクリプト)

フォルダー構造:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

ステップ 2: マニフェスト ファイル (拡張機能の頭脳とも呼ばれる) を作成する

manifest.json は拡張機能の頭脳です。これは、拡張機能が何を行うのか、そしてそれを機能させる方法を Chrome に伝えます。これがなければ、拡張機能はエンジンのない車のようなものです。見た目は良いですが、まったく役に立ちません。

これは、Chrome に拡張機能をロードするよう指示するサンプル マニフェストです:

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

ステップ 3: ポップアップ UI (別名「Hey, Click Me!」ボタン) を構築する

ポップアップは、ユーザーが拡張機能アイコンをクリックしたときに表示されるものです。この例では、クリックするとページの背景色を変更するボタンが必要です。とても簡単ですよね？それは魔法の杖のようなものですが、呪われる危険はありません。

popup.html は次のとおりです:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

ステップ 5: バックグラウンド スクリプト (別名「Don't Touch Me, I'm Working」ファイル)

background.js ファイルはバックグラウンドで実行されます。あなたが見ていないときに拡張機能が動作するかどうかを確認するなど、すべての重労働を行うのはサイレント ワーカーです。この場合、それほど多くは必要ありませんが、やりたい場合は、ここにさらに複雑な機能を追加することもできます。

今のところは、次の基本設定を追加するだけです:

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

ステップ 6: アイコンを追加する (オプションですが強く推奨)

アイコンは拡張機能のワードローブのようなもので、ツールバーでの見栄えを良くします。さまざまなサイズのアイコン (例: 16x16.png、48x48.png、128x128.png) を追加できます。これらは、Chrome が拡張機能を表示する必要がある場合に常に使用されます。

アイコンフォルダーを作成し、使用するアイコンを追加するだけです。

ステップ 7: 拡張機能を Chrome にロードする (別名「真実の瞬間」)

あなたの傑作をテストする時が来ました。拡張機能を Chrome に読み込む方法は次のとおりです:

1. Chrome を開き、chrome://extensions/ に移動します。
2. 「開発者モード」を有効にします (チートコードを一生有効にするようなものです)。
3. 「解凍してロード」をクリックし、ワンクリック拡張機能フォルダーを選択します。
4. 拡張機能アイコンがツールバーに表示されます。見てください。感心してください。クリックしてください。

ステップ 8: テストしてみる (別名「やった、うまくいく!」の瞬間)

拡張機能のアイコンをクリックします。 「背景を変更」というボタンを含むポップアップが表示されます。これをクリックすると、現在の Web ページの背景色が、完璧な日の穏やかな海のような水色に変わります。

結論 (別名「やったね」セクション)

おめでとうございます!独自のワンクリック Chrome 拡張機能を構築しました。このシンプルなツールは、ページの色を変更したり、モチベーションを高める引用文を追加したり、ページでスムーズ ジャズを再生したりするなど、必要に応じて拡張できます。可能性は無限大です。

これで、インターネットをもう少し楽しくする準備が整いました。さあ、何か素晴らしいもの、少なくとも友達にあなたを魔法使いだと思わせるようなものを作りましょう。 ✨

以上がワンクリック Chrome 拡張機能: スタイル (またはカオス) で背景を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。