ワンクリック Chrome 拡張機能: スタイル (またはカオス) で背景を変更します-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2025-01-05 14:27:40

オリジナル

1012 人が閲覧しました

One-Click Chrome Extension: Change Your Background with Style (or Chaos)

ワンクリックでブラウザを刺激したいと思ったことがあるなら、複数回クリックする時間はありませんよね？ワンクリック 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"
  }
}

ログイン後にコピー