10分間でクロム拡張機能を作成する方法フラット

このチュートリアルは、ChATGPTの「Molly-Guard」の作成に焦点を当てて、機密情報の偶発的な共有を防ぐために、Chrome拡張機能を構築するプロセスを簡素化します。 重要な手順を分解し、明確さとSEOのためにテキストを改良しましょう。

独自のChatgptセーフティネットを作成：シンプルなChrome拡張チュートリアル

chatgptと誤って機密データを共有することにうんざりしていませんか？ このチュートリアルでは、プライバシーを保護するために、シンプルなChrome拡張機能（「Molly-Guard」）を構築する方法を示します。 基本的なWebテクノロジーを使用して、5つの簡単なステップをご案内します。

キーテイクアウト：

chatgpt保護：
• 指定された敏感な単語またはフレーズを含むメッセージの提出を防ぐクロム拡張機能を作成することを学ぶ。
フォローが簡単な手順：
• このチュートリアルは、プロセスを管理可能なステップに分解し、初心者に最適です。 ユーザーエクスペリエンスの強化：
拡張機能は視覚的な手がかりを提供し、安全性と使いやすさを向上させます。
• 私たちが構築しているもの：

AIアシスタントは非常に役立ちますが、偶発的なオーバーシェアングは本当の懸念事項です。 この「モリーガード」拡張機能は、セーフティネットとして機能します。 敏感な単語やフレーズのリストを定義します。これらの単語のいずれかを含むメッセージを送信しようとすると、拡張機能は送信ボタンを無効にし、偶発的な開示を防ぎます。

開始する前に：

chatgptアカウント（無料のサインアップが利用可能）。 HTML、CSS、およびJavaScriptの基本的な理解。

このチュートリアルのコードは、Githubで入手できます（Github Repoへのリンクはこちら）。

• クロム拡張機能とは？
• ​​
• Chrome拡張機能は、Chromeブラウジングエクスペリエンスを向上させる小さなプログラムです。 それらは、HTML、CSS、およびJavaScriptを使用して構築され、シンプルなツールから複雑なアプリケーションに至るまでの範囲があります。多くはChrome Webストアで入手できます。 より深いダイビングについては、Googleの公式ドキュメントを参照してください（Googleのドキュメントへのリンクはこちら）。 このチュートリアルでは、A
コンテンツスクリプト

を使用して、特定のWebページのコンテンツ（この場合はChatGPT）との相互作用を可能にします。

ステップ1：拡張機能ファイルの設定

という名前の新しいフォルダーを作成し、これらのファイルを追加してください：

• manifest.json：拡張機能（名前、バージョン、許可など）についてのメタデータ。
• contentScript.js：chatgpt入力を監視するメインのjavascriptコード。
• ：wordsList.js敏感な単語のリスト（簡単にカスタマイズ可能）。
• ：styles.css（オプション）視覚的な手がかりのスタイリング。

ステップ2：ファイルmanifest.json

このJSONファイルは、拡張機能についてChromeに伝えます。 このコードを

：manifest.jsonに貼り付けます

<code class="language-json">{
  "manifest_version": 3,
  "name": "ChatGPT Molly-guard",
  "version": "1.0",
  "description": "Prevents submission of messages containing sensitive words.",
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "css": ["styles.css"],
      "js": ["wordsList.js", "contentScript.js"]
    }
  ]
}</code>

重要なマニフェスト要素が説明されています

：マニフェストファイル形式バージョン（3を使用）を指定します

• 、"manifest_version"、
：拡張機能に関する基本情報。
• "name""version"：どのWebサイトで実行するスクリプトを定義します（"description"
• ステップ3："content_scripts"ファイル"https://chat.openai.com/*"
このスクリプトは、ChatGPT入力フィールドを監視します。このコードを

：

に貼り付けます contentScript.js（元の入力から完全な

コードをこちらに含める）

contentScript.js

このコードは、デバウンス関数を使用して、敏感な単語を効率的に確認し、それに応じてUIを更新します（送信ボタンを無効にして赤い境界を追加します）。 イベント委任は、chatgptの動的なUI更新を処理するために使用されます。

<code class="language-javascript">// ... (Debounce function and other code as provided in the original input) ...</code>

ステップ4：スタイリング contentScript.js

視覚的なキューについては、このコードを

に追加します：

これにより、敏感な単語が検出されると、入力領域がスタイルが整っています。 styles.cssスタイルが既存のChatGPTスタイルをオーバーライドすることを保証します

ステップ5：拡張機能のテスト

styles.css

<code class="language-css">.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}</code>

open

。!important

「開発者モード」を有効にします。 "

「[アンパック]の読み込み」をクリックします。

フォルダーを選択します。

1. chrome://extensions/
chatgptで拡張機能をテストします。 すべてが機能する場合、敏感な単語を入力すると、赤い境界線と無効化された送信ボタンが表示されます。 変更を加えた場合、円形の矢印アイコンを使用して拡張機能をリロードします。
3. 変更を行った後に拡張機能をリロードします：
4. chatgpt-molly-guard

それをさらに取る：

• ユーザーインターフェイス：ポップアップを追加して、敏感な単語リストを管理します。
• 貼り付け処理：散在したテキストを検出してください
コンテキストオーバーライド：
• モリーガードの一時的な無効化を許可します
結論：

クロム拡張機能の構築は、あなたが思っているよりも簡単です！ この単純な「Molly-Guard」は、数行のコードがオンラインの安全性を大幅に改善する方法を示しています。 より高度な機能については、Googleのドキュメントを参照してください。

（元の入力のFAQセクションをこちらから含めてください）この改訂された応答は、より構造化されたユーザーフレンドリーなチュートリアルを提供し、関連するキーワードと見出しを使用して読みやすさとSEOを改善します。 プレースホルダーリンクをGitHubおよびGoogleのドキュメントへの実際のリンクに置き換えることを忘れないでください。

以上が10分間でクロム拡張機能を作成する方法フラットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。