如何使用ChatGPT创建一个SEO Chrome扩展

发布:泰安APP开发更新时间:2023-12-22 01:27

Chrome扩展提供了执行繁琐和重复任务的快捷简便方法。扩展在 seo中可以大大节省时间。但许多人仍然不重视它们的建设。

一个原因是一些营销人员无法编写复杂的工具，所以他们使用可用的任何工具。也就是说，您并不总是需要投入时间学习困难的技能或花钱聘请昂贵的开发人员来构建新的复杂工具。

现在，您可以使用ChatGPT来构建您自己定制的SEO扩展，将它们上传到Google，并每天免费使用。以下是操作步骤。

步骤1：定义需求

在此过程中，清晰地了解您希望您的Chrome扩展执行的任务是第一步。我建议内容营销人员在开始提问ChatGPT之前考虑这一点，并写下具体明确的需求。

需求通常分为两种类型：

任务：您需要扩展执行什么任务？
特性：您希望扩展如何向您呈现信息？

免责声明：此过程旨在构建仅在您的计算机上运行的扩展，这意味着您无法出售它或在Chrome Web Store上提供它。要实现这一点，您将需要遵守Google的准则，可在此处找到。

在本指南中，我们将以我自己构建的一个简单SEO Chrome扩展的示例来说明。以下是我的需求。

信息需求

我希望我的SEO Chrome扩展能够告诉我页面的所有元素，以便快速了解页面，而无需进入页面后端代码来查看它们：

页面标题
元描述
复制标题
内部链接，包括URL列表
图像，包括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帐户中：

Manifest.json
Popup.html
Popup.js
Content.js

使用ChatGPT意味着营销人员无需学习如何构建这些技术文件，这就是本指南的全部目的，但了解它们的用途仍然很重要。

此外，我建议数字营销专家尽可能多地了解这些文件，因为他们需要解决可能的技术问题，并找出如何使他们的扩展更好地运行。如果您想了解更多信息，Google有一个关于Chrome浏览器操作的特定指南。

Manifest.json

manifest.json文件是每个Chrome扩展都需要的配置文件。

它包含有关扩展的元数据，如名称、版本、描述、图标和权限。它还指定了单击扩展时要显示的默认弹出文件。

Popup.html

popup.html文件表示Chrome扩展的用户界面（UI）。它定义了单击扩展图标时将显示的布局和内容。

在这种情况下，它包括了用于说明、SEO元素和统计信息的按钮，以及一个结果部分，用于显示收集的信息。

Popup JS

popup.js文件包含与Chrome扩展的UI交互的JavaScript代码。它处理按钮点击并向内容脚本发送消息（未包含在提供的代码中），以从当前活动的网页中检索SEO元素。

它还更新UI，以在单击相应按钮时在结果部分显示检索到的信息。

Content.js

content.js文件负责与网页内容互动并提取必要的数据。

在这种情况下，它会监听来自弹出窗口的消息并执行任务。

步骤4：将ChatGPT的代码导出为文件

现在我们已经有了代码和三种类型的文件，下一步是将这些文件的信息下载为Chrome扩展可以处理的格式。

以下是如何执行此操作：

下载Sublime Text应用程序

Sublime Text是一个通用的编辑器，原生支持所有编程语言和标记语言。用户可以下载这些文件并上传到其他地方。

复制和粘贴代码

既然我们有了代码和Sublime Text，我们需要将代码从ChatGPT中复制并粘贴到所需的Sublime Text选项卡中，然后才能将它们下载到我们的桌面。

在每个单独的选项卡中，我们将粘贴代码：

一旦您按下“粘贴”，有时会出现一个没有标题的选项卡，看起来像这样：

值得一提的是，在本指南中我使用的代码示例中，Sublime Text应用程序不会自动识别标题，因此您需要手动添加它们。

当您将文件保存到桌面时，您可以更改文件的名称。但是，这不会影响您的扩展。

您可以将所有文件保存到一个特定的文件夹中，可以将其命名为“我的SEO扩展”或类似的名称。

步骤5：将文件上传到Chrome扩展帐户中

既然我们已经完成了本指南中最困难的部分，编写代码，现在是时候将文件上传到您的帐户中。

要执行此操作，您需要打开您的Chrome扩展仪表板，网址为：chrome://extensions/ 一旦进入扩展页面，按照以下步骤正确上传您的文件：

在浏览器右上角打开“开发者模式”。这将允许您打开上传功能。
单击“加载未打包的扩展”以查找并选择要上传的四个文件。

当您单击“加载未打包的扩展”时，如果您使用的是Mac，会打开以下窗口。

将所有四个文件上传到Chrome扩展仪表板中。如果您已经正确完成了所有步骤，您将在列表中看到您的扩展，就像这样：

在这一点上，您的扩展几乎可以开始测试了。

我们创建了一个带有三个按钮的扩展：

用于了解如何使用扩展的说明按钮。
SEO页面元素按钮。
链接按钮。

您单击的每个按钮都将使您能够阅读页面上的信息，并快速评估页面是否已正确优化以进行搜索。

步骤6：故障排除和清理代码

如果在您的Chrome扩展中看到错误，不要担心，这些错误是不可避免的，但很容易修复。

使用当前版本的ChatGPT，该代码是指的是2021年12月之前的Google准则，自那以来发生了许多变化。

已弃用的清单版本

这意味着代码可能是旧的，没有更新到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扩展。

本文中表达的意见属于客座作者的观点，不一定代表Search Engine Land的观点。工作人员作者在这里列出。