ChatGPT教我完成了第一个Chrome插件的开发
GPT-4加持后的ChatGPT“查特”很强大了，一直有这样一个需求，就是在从邮件中打开网页的时候，可能会出现直接打不开的情况，类似htttp://goo.com?url=http://vr168.com，需要对url地址做一下处理才能打开http://vr168.com网站，每次都是自己点击鼠标拷贝来做，于是我让ChatGPT“查特”和我一起做了一个chrome插件，点击插件图标，就会自动识别url中的url参数，自动跳转到该url即http://vr168.com；第一次尝试，在告诉ChatGPT“查特”我的意图后，我们一起做到了，切特是个很好的技术合伙人，明天给人事说一下，面试一下ChatGPT“查特”。下面是一步步的步骤：
我：我要编写一个chrome的插件，如何做，一步一步的教我
ChatGPT“查特”：编写Chrome插件是一项有趣而富有挑战性的任务，本身涉及许多不同的技术，但我可以为您提供一些简单的步骤，帮助您开始。
以下是创建Chrome插件的步骤：
步骤1：了解Chrome插件的基本概念在创建Chrome插件之前，您需要了解一些基本概念，例如插件的组成部分、插件的API和它们的用途、插件的生命周期和权限等。这些概念将有助于您更好地了解插件的开发和设计。
步骤2：创建一个新的文件夹首先，您需要在计算机上创建一个新的文件夹，用于存储您的插件文件。文件夹的名称可以是任何您想要的名称。
步骤3：创建一个manifest.json文件插件必须包含一个名为manifest.json的文件。此文件用于描述插件的元数据，例如插件的名称、版本号、图标、权限等。在创建插件时，您需要首先创建此文件。
步骤4：编写代码编写插件代码时，您可以使用许多不同的编程语言和技术。Chrome插件API提供了许多函数和方法，可以让您实现不同的功能，例如与页面交互、修改页面内容、检测网络请求等。您可以根据自己的喜好选择使用JavaScript、HTML、CSS或其他编程语言来编写插件代码。
步骤5：测试插件在完成插件开发后，您可以在Chrome浏览器中测试插件。首先，您需要在Chrome浏览器中启用开发者模式，然后将插件加载到Chrome浏览器中。加载插件后，您可以测试它的功能，确保它按照预期工作。
步骤6：发布插件如果您想将插件发布到ChromeWebStore上，您需要遵循ChromeWebStore的发布指南。在发布之前，您需要确保插件符合ChromeWebStore的政策和要求，并通过测试和审查。
这是创建Chrome插件的基本步骤，它们可能需要更多的细节和学习，但我希望这些步骤能为您提供一个好的开始。
我：继续，我已经创建了一个文件夹了，manifest.json的内容是什么，告诉我
ChatGPT“查特”：好的，下面是一个简单的manifest.json文件的示例内容，以便您了解它的基本结构和所需的内容：
jsonCopycode{“manifest_version”:2,“name”:“MyAwesomeChromeExtension”,“version”:“1.0”,“description”:“ThisismyfirstChromeextension!”,“icons”:{“16”:“icon_16.png”,“48”:“icon_48.png”,“128”:“icon_128.png”},“permissions”:[“activeTab”],“browser_action”:{“default_icon”:{“16”:“icon_16.png”,“48”:“icon_48.png”,“128”:“icon_128.png”},“default_title”:“MyAwesomeChromeExtension”,“default_popup”:“popup.html”}}
让我解释一下这个文件的一些关键部分：
“manifest_version”:这是必需的，表示您使用的是哪个manifest版本。目前，Chrome支持的最新版本为2。“name”:这是您的插件的名称，将在Chrome浏览器中显示。“version”:这是您的插件的版本号，可以是任何您喜欢的数字或字母组合。“description”:这是您的插件的描述，将在ChromeWebStore中显示。“icons”:这里列出了您的插件所使用的图标的大小和文件名。这些图标将在Chrome浏览器中和ChromeWebStore中使用。“permissions”:这是您的插件需要访问哪些权限的列表。例如，“activeTab”表示您的插件需要访问当前活动的标签页。“browser_action”:这是指定您的插件在Chrome浏览器中的外观和行为的部分。在这里，您可以指定图标、弹出窗口和默认标题等。以上是manifest.json文件的一些基本内容，当然，您可以添加其他的配置选项和信息，具体取决于您的插件需要实现什么功能。
我：继续
ChatGPT“查特”：好的，接下来我们需要创建一个popup.html文件，这将是我们插件的弹出窗口，当用户点击插件图标时会显示。
下面是一个简单的popup.html文件的示例内容：
phpCopycode<!DOCTYPEhtml><html><head><title>MyAwesomeChromeExtension</title><style>body{width:300px;height:150px;}</style></head><body><h1>Hello,world!</h1><p>ThisismyfirstChromeextension!</p></body></html>
这个文件包含一个基本的HTML结构，其中包含一个标题和一个段落，以及一些CSS样式规则，以便调整弹出窗口的大小和外观。
接下来，我们需要将popup.html文件添加到manifest.json文件中的“browser_action”部分，以便在用户单击插件图标时弹出它。在manifest.json文件中，将“default_popup”属性设置为popup.html文件的路径，如下所示：
jsonCopycode“browser_action”:{“default_icon”:{“16”:“icon_16.png”,“48”:“icon_48.png”,“128”:“icon_128.png”},“default_title”:“MyAwesomeChromeExtension”,“default_popup”:“popup.html”}
这样，我们就完成了插件的基本结构和配置。现在，我们可以在Chrome浏览器中加载并测试我们的插件了。
我：继续
ChatGPT“查特”：好的，现在我们已经完成了插件的基本结构和配置。接下来，我们需要将插件加载到Chrome浏览器中进行测试。
下面是加载插件的步骤：
打开Chrome浏览器，进入菜单（三个竖点）->更多工具->扩展程序。在扩展程序页面中，开启开发者模式（通常在页面右上角）。点击“加载已解压的扩展程序”按钮，选择插件所在的文件夹，然后点击“选择文件夹”按钮。插件将被加载到Chrome浏览器中，并在扩展程序页面中显示出来。现在，您可以测试您的插件了。在Chrome浏览器中，单击插件图标，将弹出我们刚才创建的弹出窗口。如果一切正常，您将看到弹出窗口中显示的“Hello,world!”和“ThisismyfirstChromeextension!”信息。
恭喜！您已经成功创建了一个简单的Chrome插件。接下来，您可以根据您的需要进一步扩展和完善它。
我：继续，这个插件可以读取当前的url，解码后显示在提示中
ChatGPT“查特”：好的，现在让我们来实现一个功能更加实用的插件。这个插件将读取当前页面的URL，解码后将其显示在弹出窗口中。
我们需要更新manifest.json文件中的“permissions”部分，以便我们的插件可以访问当前标签页的URL。在manifest.json文件中添加以下内容：
jsonCopycode“permissions”:[“activeTab”],
接下来，我们需要更新popup.html文件，以便它可以读取当前标签页的URL，并在弹出窗口中显示。
下面是更新后的popup.html文件：
phpCopycode<!DOCTYPEhtml><html><head><title>MyAwesomeChromeExtension</title><style>body{width:300px;height:150px;}</style></head><body><h1>Hello,world!</h1><p>ThecurrentURLis:</p><pid=“url”></p><scriptsrc=“popup.js”></script></body></html>
我们添加了一个新的段落标记<p>，它的ID为“url”，用于显示当前的URL。我们还添加了一个<script>标记，它将从一个名为“popup.js”的JavaScript文件中加载代码。
接下来，我们需要创建一个名为“popup.js”的JavaScript文件，用于将当前URL解码并将其显示在弹出窗口中。
下面是更新后的popup.js文件：
javascriptCopycodechrome.tabs.query({active:true,currentWindow:true},function(tabs){varurl=decodeURIComponent(tabs[0].url);document.getElementById(“url”).textContent=url;});
这段JavaScript代码使用chrome.tabs.query方法来获取当前标签页的URL，并使用decodeURIComponent方法将其解码。然后，它将解码后的URL设置为<p>标记的文本内容，从而在弹出窗口中显示出来。
最后，我们需要将popup.js文件添加到manifest.json文件中的“web_accessible_resources”部分，以便它可以被popup.html文件访问。在manifest.json文件中添加以下内容：
jsonCopycode“web_accessible_resources”:[“popup.js”],
现在，我们已经完成了插件的更新。重新加载插件后，单击插件图标将会弹出一个包含当前URL的弹出窗口。
ChatGPT“查特”：好的，让我们更新一下popup.js文件，以便可以处理包含url参数的URL，并将其解码后在弹出窗口中显示出来。
下面是更新后的popup.js文件：
javascriptCopycodechrome.tabs.query({active:true,currentWindow:true},function(tabs){varurlParams=newURLSearchParams(newURL(tabs[0].url).search);varoriginalUrl=urlParams.get(“url”);if(!originalUrl){originalUrl=tabs[0].url;}vardecodedUrl=decodeURIComponent(originalUrl);document.getElementById(“url”).textContent=decodedUrl;});
这段代码使用了JavaScript的URL和URLSearchParams对象来获取URL中包含的参数，以及对URL进行解码。
首先，我们使用newURL(tabs[0].url).search来获取URL中的查询字符串部分，然后将其传递给URLSearchParams对象。接下来，我们使用get(“url”)方法获取名为“url”的参数值。如果URL中不包含“url”参数，则将整个URL设置为原始URL。最后，我们使用decodeURIComponent方法将原始URL解码，并将其设置为<p>标记的文本内容。
这样，我们就可以在弹出窗口中显示正确解码后的URL了，包括包含url参数的URL。
我：很好，再调整一下，当前页面需要跳转到刚才解码后获得的url参数
ChatGPT“查特”：好的，让我们继续更新popup.js文件，以便当用户点击弹出窗口中的“跳转到页面”按钮时，可以在当前标签页中打开解码后的URL。
下面是更新后的popup.js文件：
javascriptCopycodechrome.tabs.query({active:true,currentWindow:true},function(tabs){varurlParams=newURLSearchParams(newURL(tabs[0].url).search);varoriginalUrl=urlParams.get(“url”);if(!originalUrl){originalUrl=tabs[0].url;}vardecodedUrl=decodeURIComponent(originalUrl);document.getElementById(“url”).textContent=decodedUrl;document.getElementById(“open-page”).addEventListener(“click”,function(){chrome.tabs.update({url:decodedUrl});});});
在这段代码中，我们首先获取当前标签页的URL，并解码任何包含在URL参数中的URL。接下来，我们使用addEventListener方法为“跳转到页面”按钮添加一个“click”事件监听器。当用户单击该按钮时，我们使用chrome.tabs.update方法在当前标签页中打开解码后的URL。
现在，用户单击“跳转到页面”按钮时，插件将自动在当前标签页中打开解码后的URL。
我：很好，但是不需要跳转到页面按钮，直接跳转就可以了
ChatGPT“查特”：好的，让我们把代码更新一下，直接在popup.js文件中跳转到解码后的URL。下面是更新后的代码：
javascriptCopycodechrome.tabs.query({active:true,currentWindow:true},function(tabs){varurlParams=newURLSearchParams(newURL(tabs[0].url).search);varoriginalUrl=urlParams.get(“url”);if(!originalUrl){originalUrl=tabs[0].url;}vardecodedUrl=decodeURIComponent(originalUrl);chrome.tabs.update({url:decodedUrl});});
在这段代码中，我们首先获取当前标签页的URL，并解码任何包含在URL参数中的URL。接下来，我们使用chrome.tabs.update方法直接在当前标签页中打开解码后的URL。
现在，当用户单击插件图标时，插件将自动在当前标签页中打开解码后的URL。
下面看看这个插件的效果：
4个版本
最后一个版本文件构成
这个网址中的网址是无法直接打开的
点击插件后自动跳转到url参数对应的网址中
帝国主义亡我之心不死，同志们还需要努力，百度加油，毕竟我是百度会员，每个月都要交钱的那种
