Crafted by [Genie](https://marketplace.visualstudio.com/items?itemName=genieai.chatgpt-vscode)
You
帮我实现一个chrome扩展，使用debugger 自动输入demo当前页的文本框中
Genie
好的，首先我们需要创建一个Chrome扩展程序，并在清单文件中添加相应权限。
- 创建一个新目录，并在其中创建以下文件：
- manifest.json
- popup.html
- popup.js
- 在manifest.json文件中添加以下代码：
{
"name": "Auto Input Extension",
"version": "1.0",
"description": "Automatically inputs text into demo text box using debugger.",
"permissions": [
"activeTab",
"debugger"
],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
这里我们请求了 activeTab 和 debugger 权限，以便我们可以调试当前选项卡并使用调试器注入JavaScript。
- 在popup.html中添加以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Auto Input Extension</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Auto Input Extension</h1>
<p>Click the button below to automatically input text into the demo text box.</p>
<button id="inputButton">Input Text</button>
</body>
</html>
这是我们扩展的弹出页面的基本结构，其中包含一个按钮，当点击该按钮时，将触发JavaScript代码。
- 在popup.js中添加以下JavaScript代码：
document.getElementById('inputButton').addEventListener('click', function() {
chrome.debugger.attach({tabId:tab.id}, "1.0", function() {
chrome.debugger.sendCommand({tabId:tab.id}, "Runtime.evaluate", {
"expression": "document.querySelector('#text-input').value = 'Hello World!';"
});
});
});
这是用于自动输入文本的JavaScript代码。我们使用Chrome API中的 chrome.debugger 对象来附加并调试当前选项卡。在回调函数中，我们使用 chrome.debugger.sendCommand 函数向当前选项卡发送JavaScript命令，以将文本框的值更改为 "Hello World!"。
- 最后，在浏览器地址栏中输入
chrome://extensions/打开扩展程序管理页面。然后点击右上角的“开发者模式”，选择“加载已解压的扩展程序”，并选择包含我们创建的所有文件的目录。现在，我们可以单击弹出页面上的按钮来运行扩展程序，它将自动输入文本到demo当前页面的文本框中。
希望这可以帮助您实现所需的扩展程序！
You
请完善一下popup.js,tab.id
Genie
好的，为了完善popup.js中的代码并使用正确的tab.id，请按照以下步骤操作：
- 在popup.js中添加以下代码：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
document.getElementById('inputButton').addEventListener('click', function() {
chrome.debugger.attach({tabId:tab.id}, "1.0", function() {
chrome.debugger.sendCommand({tabId:tab.id}, "Runtime.evaluate", {
"expression": "document.querySelector('#text-input').value = 'Hello World!';"
});
});
});
});
在这个代码块中，我们首先使用 chrome.tabs.query 函数查询当前选项卡，然后将返回的tab对象传递给回调函数。之后我们再为按钮添加事件监听器并启用调试器。
- 使用以上更新后的代码重新打包扩展，并在浏览器中测试扩展程序。
我希望这可以帮助您成功实现自动输入文本到demo当前页面文本框中的功能。
You
请完善一下popup.js,针对input进行填充文本，然后结束的时候 退出调试
Genie
好的，为了完善popup.js中的代码，并实现填充文本和退出调试功能，请按照以下步骤进行操作：
- 在popup.js文件中添加以下代码：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
document.getElementById('inputButton').addEventListener('click', function() {
chrome.debugger.attach({tabId:tab.id}, "1.0", function() {
chrome.debugger.sendCommand({tabId:tab.id}, "Runtime.evaluate", {
"expression": "var input = document.querySelector('#text-input'); if(input){ input.value = 'Hello World!'; }"
}, function() {
chrome.debugger.detach({tabId:tab.id});
});
});
});
});
在此代码块中，我们使用 chrome.tabs.query 函数来查询当前选项卡。然后，我们附加调试器并发送一个自定义的JavaScript表达式，以查找页面上与给定选择器匹配的输入元素，将其值设置为“Hello World!”。最后，我们从调试器上分离当前标签。
- 使用以上更新后的代码重新打包扩展，并在浏览器中测试扩展程序。
我希望这可以帮助您成功实现填充文本和退出调试的功能。
You
document.querySelector('#text-input') 改成 class=text-input
Genie
好的，如果您需要将 document.querySelector('#text-input') 更改为 document.querySelector('.text-input')，您可以使用以下代码块：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
document.getElementById('inputButton').addEventListener('click', function() {
chrome.debugger.attach({tabId:tab.id}, "1.0", function() {
chrome.debugger.sendCommand({tabId:tab.id}, "Runtime.evaluate", {
"expression": "var input = document.querySelector('.text-input'); if(input){ input.value = 'Hello World!'; }"
}, function() {
chrome.debugger.detach({tabId:tab.id});
});
});
});
});
在这个更新的代码块中，我们只是将CSS选择器从 #text-input 改为 .text-input。请确保您的HTML代码中包含具有“text-input”类名的文本输入元素。
希望这次更新的代码块可以满足您的需求。