如何使用 ChatGPT 創建 SEO Chrome 擴展

Chrome 擴展程序提供了一種快速簡便的方法來執行無聊和重複的任務。 擴展可以在 SEO 中節省大量時間。 但是許多人仍然沒有專注於構建它們。

原因之一是一些營銷人員無法編寫複雜的工具，因此他們使用任何可用的工具。 也就是說，您並不總是需要花時間學習困難的技能或花錢聘請昂貴的開發人員來構建新的複雜工具。

現在，您可以使用 ChatGPT 構建您自己的自定義 SEO 擴展，將它們上傳到 Google 並每天免費使用。 就是這樣。

第 1 步：定義要求

清楚地了解您希望 Chrome 擴展程序做什麼是此過程的第一步。 我建議內容營銷人員在開始提示 ChatGPT 並寫下具體明確的要求之前考慮這一點。

要求通常有兩種類型：

• 任務：你需要你的擴展做什麼？
• 功能：您希望分機如何向您顯示信息？

免責聲明：此過程旨在構建只能在您的計算機上運行的擴展程序，這意味著您將無法出售或在 Chrome 網上應用店上使用它。 為此，您必須遵守可在此處找到的 Google 準則。

對於本指南，我們將使用我自己構建的簡單 SEO Chrome 擴展程序示例。 所以這是我的要求。

資料要求

我希望我的 SEO Chrome 擴展告訴我所有頁面元素以便快速概覽頁面，而無需進入頁面後端代碼來檢查它們：

• 頁面標題
• 元描述
• 複製標題
• 內部鏈接，包括 URL 列表
• 圖像，包括 URL
• 規範網址

功能和行為要求

當我在 Chrome 瀏覽器上單擊擴展程序圖標時，我希望我的擴展程序顯示一個彈出窗口。

您可以在下面看到我們將構建的內容以及它將如何在 Chrome 上顯示。

注意：這是擴展的基本版本，為簡單起見不包括 CSS 樣式。 我們在本指南中關注的是實際功能，而不是樣式。

正如您在上圖中看到的那樣，您需要確保擴展的結果在您的 Chrome 選項卡上以彈出窗口的形式可見。

大多數 SEO 擴展都是這樣工作的，當您單擊擴展圖標時，它們會在彈出窗口中為您提供所需的信息。

第 2 步：為 ChatGPT 編寫詳細說明

現在您已準備好提示潛在的 SEO 擴展，您可以前往 ChatGPT 編寫詳細說明。 同樣，您的提示需要盡可能具體和詳細。

我看到營銷人員使用的大多數提示都不長，它們很短。 從簡短的提示來看，你會得到糟糕的結果。

以下是您的操作方法：

首先，您需要給 ChatGPT 一些目標。 為此，除了命令行之外，您還可以使用我們在步驟 1 中看到的相同要求：

• “給我寫一個 Chrome 擴展程序的代碼，它可以幫助我識別任何網站上的頁面 SEO 元素。 要識別的元素：H1、H2、H3、頁面標題、元描述、規範 URL、H1 和 H2 的數量以及內部鏈接（包括 URL）的數量。”

現在您已經為 ChatGPT 指定了您想要實現的目標，現在是時候準確指定您需要擴展程序的行為方式了。 為此，我們將使用帶按鈕的彈出窗口功能。 這是您可以執行此部分的方法：

• “Chrome 擴展程序的功能：單擊擴展程序時，會出現一個窗口。 該窗口包括一個可點擊的菜單。 在菜單中，您向我展示了三個按鈕。 第一個按鈕向我顯示了有關如何使用擴展程序的說明。 在第二個按鈕中，我看到了 H1、H2、H3、頁面標題、元描述和規範 URL。 在第三個按鈕中，我看到了 H1 和 H2 的數量，以及內部鏈接（包括 URL）的數量。”

我們需要非常具體地說明我們想要實現的目標。 為此，您必須添加提示的最後一段，指定需要如何上傳提示。

• “分別給我每個文件和他們的名字。”

這樣，您就要求 ChatGPT 將文件拆分成多個部分。 這很重要，因為第 4 步。所以堅持下去。

第 3 步：要求 ChatGPT 編寫代碼

最後，是時候將我們寫的所有句子復制並粘貼到 ChatGPT 中了：

ChatGPT 的最佳功能之一是能夠毫無問題地編寫代碼。

這就是為什麼根據我們的說明，ChatGPT 將為您提供四個單獨的代碼。

注意：創建新的 Chrome 擴展程序時，通常需要提供多種類型的文件，具體取決於它的複雜程度。 對於此示例，我們只需要在 Chrome 帳戶內上傳四種類型的文件：

• 清單.json
• 彈出窗口.html
• 彈窗.js
• 內容.js

使用 ChatGPT 意味著營銷人員無需學習如何構建這些技術文件，這就是本指南的重點，但了解它們的用途仍然很重要。

此外，我建議數字營銷專家盡可能多地了解這些文件，因為他們需要解決可能的技術問題並弄清楚如何使他們的擴展更好地工作。 如果您想了解更多信息，Google 提供了有關 Chrome 瀏覽器操作的特定指南。

清單.json

manifest.json 文件是每個 Chrome 擴展程序所需的配置文件。

它包含關於擴展的元數據，例如它的名稱、版本、描述、圖標和權限。 它還指定單擊擴展名時要顯示的默認彈出文件。

彈出窗口.html

popup.html 文件表示 Chrome 擴展程序的用戶界面 (UI)。 它定義了單擊擴展圖標時將顯示的佈局和內容。

在這種情況下，它包括用於說明、SEO 元素和統計信息的按鈕，以及用於顯示收集到的信息的結果部分。

彈出式JS

popup.js 文件包含與 Chrome 擴展的 UI 交互的 JavaScript 代碼。

它處理按鈕點擊並將消息發送到內容腳本（未包含在提供的代碼中）以從當前活動的網頁中檢索 SEO 元素。

當單擊相應的按鈕時，它還會更新 UI 以在結果部分顯示檢索到的信息。

內容.js

content.js 文件負責與網頁內容交互並提取必要的數據。

在這種情況下，它會偵聽來自彈出窗口的消息並執行任務。

第 4 步：將 ChatGPT 代碼導出到文件中

現在我們有了代碼和三種類型的文件，下一步是將這些文件的信息下載為 Chrome 擴展程序易於理解的格式。

以下是如何做到這一點：

下載 Sublime Text 應用程序

Sublime Text 是一個可共享的編輯器，原生支持所有編程語言和標記語言。 用戶可以下載文件並將它們上傳到其他地方。

複製並粘貼代碼

現在我們有了代碼和 Sublime Text，我們需要從 ChatGPT 複製代碼並將它們粘貼到所需的 Sublime Text 選項卡中，然後才能將它們下載到我們的桌面上。

在每個單獨的選項卡中，我們將粘貼代碼：

一旦你按下“粘貼”，有時會出現一個沒有標題的選項卡，看起來像這樣；

值得一提的是，在我為本指南使用的代碼示例中，Sublime Text 應用程序不會自動選取標題，因此您必須手動添加它們。

當您將文件保存在桌面上時，您將能夠更改文件的名稱。 但是，這不會影響您的擴展。

您可以將所有文件保存到一個特定的文件夾中，您可以將其稱為“我的 SEO 擴展”或類似名稱。

第 5 步：將文件上傳到 Chrome 擴展程序帳戶

現在我們已經完成了本指南中最困難的部分，即編寫代碼，是時候將文件上傳到您的帳戶中了。

為此，您需要在此處打開您的 Chrome 擴展儀表板：chrome://extensions/

進入後，請按照以下步驟正確上傳文件：

• 打開瀏覽器右上角的“開發者模式”。 這將允許您打開上傳功能。

• 單擊“Load Unpacked”找到並選擇要上傳的 4 個文件。

當您按下“Load Unpacked”時，如果您使用的是 Mac，則會打開此窗口。

將所有四個文件上傳到 Chrome 擴展儀表板。 如果您已正確完成所有操作，您將在列表中看到您的擴展，如下所示：

此時，您的擴展幾乎可以進行測試了。

我們用三個按鈕構建了擴展：

• 學習如何使用它的說明按鈕。
• SEO 頁面元素按鈕。
• 鏈接按鈕。

您單擊的每個按鈕都將使您能夠閱讀頁面信息并快速評估頁面是否針對搜索進行了正確優化。

第 6 步：故障排除和清理代碼

如果您在 Chrome 擴展程序中看到錯誤，請不要擔心，這些錯誤是不可避免的，但很容易修復。

在當前版本的 ChatGPT 中，代碼參考了 Google 在 2021 年 12 月之前的指南，此後發生了很多變化。

已棄用的清單版本

這意味著代碼可能是舊的並且沒有更新到清單文件的最新版本的 Chrome 擴展要求。

其中一個錯誤顯示 Manifest.json 文件已棄用，這意味著 Google 希望您從 2023 年 1 月開始更新。

您很可能會遇到此類錯誤：

要解決此問題，您所要做的就是在您的 Sublime Text 文件中選擇“manifest_version”: 2 ，並將“2”替換為“3”，即最新版本。

完成後，再次上傳擴展。

加載擴展失敗

刪除對圖標和圖像的任何引用非常重要。

否則，您將收到一條錯誤消息，提示“加載擴展失敗”。 這是因為我們沒有為擴展圖標和圖像指定 URL。

但在此示例中，我們不必添加任何圖像或圖標，因此刪除需要它的那部分代碼是有意義的。

以下是您的操作方法：

• 打開 Manifest.json 文件。
• 找到引用圖標的代碼行。 在我的示例中，行是 6 到 10 和 16 到 20

• 從代碼中刪除這些行並保存您的文件。
• 然後在儀表板中再次上傳。

這一次，沒有 ChatGPT 錯誤，我們應該有一個乾淨且正確的擴展，可以再次進行測試。

如果你做的一切都正確，這就是你應該看到的 - 或者非常相似的東西：

開始創建您自己的 SEO Chrome 擴展程序

如果您一次又一次地失敗，事情會變得非常令人沮喪，尤其是當您不知道如何編碼時。 我知道，因為我去過那裡。

另外，請記住，對於 AI，沒有特定的規則來編寫您需要的內容的正確描述。 您可能需要多次更新提示以使其按需要工作。

以下是您可以採取的措施來減輕錯誤並嘗試修復它們：

• 複製錯誤並直接粘貼到 ChatGPT 中，要求修復它。 通常，該工具非常擅長用簡單的術語解釋代碼的錯誤。 然後提出改進建議。
• 如果您覺得您的代碼太長太複雜，請嘗試刪除一些擴展要求。 從小做起。 也許只創建一個用於查找頁面標題的擴展。 測試成功後，添加新需求並再次測試。
• 如果 ChatGPT 不能為您提供好的解決方案，請使用老式的 Google。 在您已經解決它之前，可能有很多人。

希望通過這份詳細的指南，您可以開始利用 ChatGPT 的強大功能並學習如何構建您的下一個 SEO 擴展。