有史以来第一次，我在 GitHub Copilot 的帮助下构建了一个浏览器扩展。就是这样。

我用 GitHub Copilot 构建了一个剪刀石头布游戏，但从未构建过浏览器扩展。作为 GitHub 的开发倡导者，我决定对 GitHub Copilot 进行测试，包括其即将推出的聊天功能，看看它是否可以帮助我为 Google Chrome 编写一个扩展程序来清除我的缓存。

老实说：它并不像我预期的那么简单。在整个构建过程中，我遇到了很多问题，不得不学习新信息。

但最终，我获得了使用生成式 AI 编码工具学习全新技能的经验，并与 GitHub Copilot 以及 Twitch 上的其他开发人员结对编程。

我想创建任何人（即使是没有开发人员经验的人）在构建此扩展或任何其他扩展时都可以轻松复制的步骤。但在与 GitHub Copilot 和人类开发人员结对编程一夜之后，我也想分享我的新收获。

因此，您会在下面找到两个部分：

我是如何通过七个步骤使用 GitHub Copilot 构建 Chrome 扩展的。您会看到我的问题和提示 ? 以及 GitHub Copilot 的回复。
我在人工智能时代学到的关于学习和结对编程的三个重要教训。

让我们开始吧。

如何使用 GitHub Copilot 构建 Chrome 扩展

要开始使用，您需要在 IDE 中安装并打开 GitHub Copilot。我还可以访问GitHub Copilot chat的早期预览版，这是我在遇到问题时使用的。如果您没有 GitHub Copilot 聊天，请注册候补名单，并暂时将GitHub Copilot与 ChatGPT 配对。

1. ? 使用聊天窗口，我问 GitHub Copilot，“如何创建 Chrome 扩展程序？文件结构应该是什么样的？”

GitHub Copilot 为我提供了创建扩展的一般步骤——从设计文件夹结构到在 Chrome 中本地运行项目。

然后，它分享了一个 Chrome 扩展文件结构的示例。

为了节省您一些时间，这里有一张图表简要定义了这些文件的用途：

清单.json	有关您的扩展程序的元数据，例如名称和版本以及权限。Manifest 作为专有名词是 Google Chrome API 的名称。最新的是V3。
popup.js ?	当用户在他们的 Chrome 工具栏中单击您的扩展程序图标时，将出现一个弹出窗口。该文件决定了该弹出窗口的行为，并包含用于处理用户与弹出窗口交互的代码。
popup.html 和 style.css	这些文件构成了弹出窗口的视觉效果。popup.html 是界面，包括布局、结构和内容。style.css 决定了 HTML 文件在浏览器中的显示方式，包括字体、文本颜色、背景等。

2. 创建 manifest.json

? 在我的 IDE 的一个文件夹中，我创建了一个名为 manifest.json 的文件。在 manifest.json 中，

我描述了我想要的文件：

Manifest for Chrome extension that clears browser cache.
manifest_version: 3
Permissions for the extension are: storage, tabs, browsingData

我按下 Enter 键并通过输入大括号调用了 GitHub Copilot 的建议。

在大括号内，GitHub Copilot 建议清单。我删除了描述我想要的 manifest.json 的行，最终文件如下所示：

{
   "name": "Clear Cache",
   "version": "1.0",
   "manifest_version": 3,
   "description": "Clears browser cache",
   "permissions": [
       "storage",
       "tabs",
       "browsingData"
   ],
   "action": {
       "default_popup": "popup.html"
   },
   "background": {
       "service_worker": "background.js"
   }
}

3. 创建一个 service worker，这是一个名为 background.js 的文件

这不是我与 GitHub Copilot 聊天时推荐的文件。我从调到我的直播的开发人员那里了解到这是一个必要的文件。background.js 使您的扩展程序能够在后台运行、执行任务以及响应扩展程序弹出窗口之外的用户事件（例如网络请求和数据存储）。

? 在我的 background.js 文件中，我写了一条评论来描述我想要的 service worker：

Service Worker for Google Chrome Extension 
Handles when extension is installed
Handles when message is received

然后，我为第一个功能写了一条评论，提示了 GitHub Copilot 的建议，然后又写了一条评论来描述第二个功能。

最终文件如下所示：

/*
Service Worker for Google Chrome Extension
Handles when extension is installed
Handles when message is received
*/

// console.log when extension is installed
chrome.runtime.onInstalled.addListener(function() {
   console.log("Extension installed");
});

// send response when message is received and console.log when message is received
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   console.log("Message received");
   sendResponse("Message received");
});

4. 创建 popup.html 文件?

? 在 popup.html 文件中，我写了一条评论来描述我希望我的弹出窗口如何出现。此窗口是用户单击扩展图标时将看到的窗口。

<!--
   HTML for Chrome extension that clears browser cache.
   Connect to javascript file called popup.js and CSS file called style.css
   Will render the following buttons with id's:
   - "All History"
   - "Past Month"
   - "Past Week"
   - "Past Day"
   - "Past Hour"
   - "Past Minute"


   Will render an empty paragraph with id "lastCleared"
-->

GitHub Copilot 建议如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Clear Cache</title>
       <link rel="stylesheet" href="style.css">
   </head>
   <body>
       <h1>Clear Cache</h1>
       <button id="allHistory">All History</button>
       <button id="pastMonth">Past Month</button>
       <button id="pastWeek">Past Week</button>
       <button id="pastDay">Past Day</button>
       <button id="pastHour">Past Hour</button>
       <button id="pastMinute">Past Minute</button>
       <p id="lastCleared"></p>
       <script src="popup.js"></script>
   </body>
</html>

5.测试浏览器扩展

我决定在合并其他样式或交互性之前测试修改。我更喜欢进行增量更改并在两者之间进行手动测试，因为它简化了调试过程。

? 在 Chrome 浏览器中导航到 chrome://extensions/。开启开发者模式。按“加载解压”。上传包含您的 Chrome 扩展程序的文件夹。加载后，您应该能够测试您的扩展。这是我的样子：

6.创建一个popup.js文件添加交互

? 在这个文件中，写一条评论，它对你来说将充当伪代码，但对 GitHub Copilot 来说是一个提示。

伪代码不是代码，而是一种在编写实际代码之前概念化和交流想法以规划和设计程序的方法。程序员可以专注于算法逻辑，而不必担心特定编程语言的句法细节，并且可以与其他开发人员交流想法，而无需考虑编码经验。

这是我使用的伪代码：

/*
This program is a Chrome Extension that clears browser cache.
Handle on button click:
- button with id "allHistory" that clears all cache history
- button with id "pastMonth" that clears cache history from the past month
- button with id "pastWeek" that clears cache history from the past week
- button with id "pastDay" that clears cache history from the past day
- button with id "pastHour" that clears cache history from the past hour
- button with id "pastMinute" that clears cache history from the past minute


Create function that
- converts dates and times into human-readable format
- adds "Successfully cleared cache" with date and time in a paragraph with id "lastCleared"
*/

然后，写下下面的一系列评论，但一次写一个，让 GitHub Copilot 在每一个之后生成一个代码建议。最终的 popup.js 看起来像这样：

/*
This program is a Chrome Extension that clears browser cache.
Handle on button click:
- button with id "allHistory" that clears all cache history
- button with id "pastMonth" that clears cache history from the past month
- button with id "pastWeek" that clears cache history from the past week
- button with id "pastDay" that clears cache history from the past day
- button with id "pastHour" that clears cache history from the past hour
- button with id "pastMinute" that clears cache history from the past minute

Create function that
- converts dates and times into human-readable format
- adds "Successfully cleared cache" with date and time in a paragraph with id "lastCleared"
*/

// convert date and time into human-readable format
function convertDate(date) {
   let date = new Date(date);
   var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
   return date.toLocaleDateString("en-US", options);
}

// add successfully cleared cache into paragraph with id "lastCleared"
function addCleared() {
   var p = document.getElementById("lastCleared");
   let date = new Date();
   p.innerHTML = "Successfully cleared cache " + convertDate(date);
}

// clear all cache history
document.getElementById("allHistory").addEventListener("click", function() {
   chrome.browsingData.removeCache({ "since": 0 }, function() {
       addCleared();
   });
});

// clear cache history from the past month
document.getElementById("pastMonth").addEventListener("click", function() {
   let date = new Date();
   date.setMonth(date.getMonth() - 1);
   chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
       addCleared();
   });
});

// clear cache history from the past week
document.getElementById("pastWeek").addEventListener("click", function() {
   let date = new Date();
   date.setDate(date.getDate() - 7);
   chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
       addCleared();
   });
});

// clear cache history from the past day
document.getElementById("pastDay").addEventListener("click", function() {
   let date = new Date();
   date.setDate(date.getDate() - 1);
   chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
       addCleared();
   });
});

// clear cache history from the past hour
document.getElementById("pastHour").addEventListener("click", function() {
  let date = new Date();
   date.setHours(date.getHours() - 1);
   chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
       addCleared();
   });
});

// clear cache history from the past minute
document.getElementById("pastMinute").addEventListener("click", function() {
  let date = new Date();
   date.setMinutes(date.getMinutes() - 1);
   chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
       addCleared();
   });
});

? GitHub Copilot 实际上生成了 var 关键字，这已经过时了。所以我将该关键字更改为let.

7. 在您的文件夹中创建最后一个文件：style.css

? 写一条评论，描述您想要的扩展样式。然后，键入“body”并继续使用 Tab 键，直到 GitHub Copilot 建议所有样式。

我最终的 style.css 看起来像这样：

/* Style the Chrome extension's popup to be wider and taller
Use accessible friendly colors and fonts
Make h1 elements legible
Highlight when buttons are hovered over
Highlight when buttons are clicked
Align buttons in a column and center them but space them out evenly
Make paragraph bold and legible
*/

body {
   background-color: #f1f1f1;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: #333;
   width: 400px;
   height: 400px;
}

h1 {
   font-size: 24px;
   color: #333;
   text-align: center;
}

button {
   background-color: #4CAF50;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   border-radius: 8px;
}

button:hover {
   background-color: #45a049;
}

button:active {
   background-color: #3e8e41;
}

p {
   font-weight: bold;
   font-size: 18px;
   color: #333;
}

有关详细的分步说明，请使用 GitHub Copilot 存储库查看我的 Chrome 扩展。

关于人工智能时代学习和结对编程的三个重要教训

生成式 AI 减少了对犯错的恐惧。学习一门新语言或框架，或开始一个新项目可能会让人望而生畏。害怕不知道从哪里开始——或者犯了可能需要数小时才能调试的错误——可能是入门的一个重要障碍。我已经做了三年多的开发人员，但是在编码的同时流式传输让我感到紧张。有时我更专注于观看我代码的人而忘记了实际的逻辑。当我与 GitHub Copilot 交谈时，我得到了保证，我正朝着正确的方向前进，这帮助我在直播过程中保持动力和自信。
生成式 AI 让学习新学科变得更容易，但它不会取代学习的工作。GitHub Copilot 并没有神奇地为我编写完整的 Chrome 扩展程序。我不得不尝试不同的提示，并在我的直播中向 GitHub Copilot、ChatGPT、Google 和开发人员提问。从正确的角度来看，我在流式传输时花了大约 1.5 个小时来完成步骤 1 到 5。
但如果我没有使用 GitHub Copilot，我将不得不从头开始编写所有这些代码，或者在零碎的搜索中查找它们。借助 AI 生成的代码建议，我能够直接进行审查和故障排除，因此我的大量时间和精力都集中在了解代码的工作原理上。我仍然必须努力学习一项全新的技能，但我分析和评估代码的次数比我尝试学习然后记住它的次数要多。
生成式 AI 编码工具让我更容易与其他开发人员协作。收看直播的开发人员可以理解我的思维过程，因为我必须告诉 GitHub Copilot 我想让它做什么。通过与 AI 结对程序员清楚地传达我的意图，我最终也在我的直播中与开发人员更清楚地传达了他们的意图。这使得人们很容易在我的直播期间调整成为我的虚拟结对程序员。

总的来说，使用 GitHub Copilot 让我的思维过程和工作流程更加透明。正如我之前所说，实际上是我的直播中的一位开发人员在注意到 GitHub Copilot 未将其包含在其建议的文件结构中后推荐了一个服务工作者文件。一旦我在与 GitHub Copilot 的聊天对话和 Google 搜索中确认我需要一个 service worker，我就使用 GitHub Copilot 来帮助我编写一个。

我如何使用 GitHub Copilot 构建浏览器扩展(译)

如何使用 GitHub Copilot 构建 Chrome 扩展

1. ? 使用聊天窗口，我问 GitHub Copilot，“如何创建 Chrome 扩展程序？文件结构应该是什么样的？”

2. 创建 manifest.json

3. 创建一个 service worker，这是一个名为 background.js 的文件

4. 创建 popup.html 文件?

5.测试浏览器扩展

6.创建一个popup.js文件添加交互

7. 在您的文件夹中创建最后一个文件：style.css

关于人工智能时代学习和结对编程的三个重要教训

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

PHP 远程调试最佳实践

7 个对 Java 意义重大的性能指标，你知道几个?

Laravel框架使用图片处理简单教程