Chrome 拡張機能: 拡張機能の開発を開始する方法

ようこそ、クリックしてパーソナルステーションのオリジナルの原文を表示し、プラグインプログラミングの知識をさらに得るためにパーソナルステーションにアクセスしてください。

Chrome拡張プラグインはフロントエンド開発に基づいており、その後公式プロジェクト構造を通じて開発されます。現在サポートされているのはManifest V3のみであるhtml+jsことに注意してください。この記事では、バージョンベースの単純なプラグインの開発を開始する方法について説明します。ChromeFireFoxManifest V2ChromeManifest V3

マニフェスト.json ファイルを作成する

Chrome プラグインはルートディレクトリに manifest.json ファイルを作成する必要があります。次のようにプラグインマニフェストを作成しましょう。

{
    "name": "广告过滤",
    "version": "0.0.1",
    "manifest_version": 3,
    "description": "过滤常见网页广告信息",
    "action":{
      "default_popup":"template/popup.html"
    },
    "icons":{
      "16": "icons/icon.png",
      "32": "icons/icon.png",
      "48": "icons/icon.png",
      "128":"icons/icon.png"
    }
  }

上記同様、プラグインの基本情報を設定する場合はmanifest_versionバージョン番号の指定に注意が必要ですが、ここで設定したサポートされている最新のv3バージョンと、v3バージョンとv2バージョンでは設定項目の設定が異なります。公式 Web サイト「Manifest V3への移行」を参照してください。関連する設定項目は次のとおりです。

アイコン: 拡張機能アイコンを構成する
default_popup: ポップアップページを構成します。
manifest_version: マニフェストのバージョン番号
description: 拡張説明情報
名前: 拡張子名
バージョン: 拡張バージョン番号

Popup.html を作成する

popup.htmlファイルはパッケージを記述する必要はありませんが、このままでは漢字文字化けが表示されるため、html完全な記述方法としてhtmlエンコーディングを設定するのが最善ですutf-8。コードは以下のように表示されます:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            min-width: 300px;
            padding: 10px 30px;
        }

        .settings {
            margin-top: 30px;
            font-size: 14px;
        }
        .settings .set input{
    
            float: right;
        }
        .settings .set + .set {
            margin-top: 15px;
        }

    </style>
</head>

<body>
    <div class="container">
        <h3>过滤广告配置</h3>
        <div class="settings">
            <div class="set">
                <span>过滤Google Adsense</span>
                <input type="checkbox">
            </div>
            <div class="set">
                <span>过滤百度广告</span>
                <input type="checkbox">
            </div>
        </div>
    </div>
</body>
</html>