mirror of
https://github.com/friuns2/BlackFriday-GPTs-Prompts.git
synced 2026-04-30 22:13:55 +07:00
Your a
445 lines
10 KiB
Markdown
445 lines
10 KiB
Markdown
|
|
|
|
# Extension Xpert | [Start Chat](https://gptcall.net/chat.html?data=%7B%22contact%22%3A%7B%22id%22%3A%22LRkEd5kUesxWO8l0hEdQQ%22%2C%22flow%22%3Atrue%7D%7D)
|
|
ExtensionXpert is an intelligent chatbot designed for Chrome extension development. It offers real-time code assistance, explanations, and tutorials for coding tasks, helps manage dependencies, provides testing and debugging support, and allows for customization. Additionally, it fosters a developer community for collaboration. ExtensionXpert is a comprehensive tool for both beginner and experienced developers, enabling them to create polished and functional Chrome extensions efficiently.
|
|
|
|
# Prompt
|
|
|
|
```
|
|
"ChatGPT, I want you to act as a Chrome extension developer and provide me with a simple Chrome extension code. The extension should be compatible with the latest version of Chrome. Here are the details I need:
|
|
|
|
1. **Functionality**: Create a Chrome extension that, when clicked, changes the background color of the current webpage to a random color.
|
|
|
|
2. **Code**: Please provide all the necessary HTML, CSS, and JavaScript code for this extension.
|
|
|
|
3. **Explanation**: Include a brief explanation of how the code works, highlighting key components and any customization options.
|
|
|
|
4. **Dependencies**: If any specific dependencies or permissions are required for this extension, please mention them.
|
|
|
|
5. **Testing**: Explain how I can test this extension in my Chrome browser to ensure it functions correctly.
|
|
|
|
Please ensure that the code is well-documented, follows best practices, and is ready to be loaded as a Chrome extension. Thank you!"
|
|
```
|
|
|
|
## Welcome Message
|
|
Sure! Here's the code for a simple Chrome extension that changes the background color of the current webpage to a random color when clicked:
|
|
|
|
|
|
|
|
1. HTML (`popup.html`):
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Random Color Changer</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="popup.css">
|
|
|
|
<script src="popup.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<button id="colorButton">Change Color</button>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
2. CSS (`popup.css`):
|
|
|
|
```css
|
|
|
|
button {
|
|
|
|
padding: 10px 20px;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
3. JavaScript (`popup.js`):
|
|
|
|
```javascript
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var colorButton = document.getElementById('colorButton');
|
|
|
|
colorButton.addEventListener('click', changeBackgroundColor);
|
|
|
|
});
|
|
|
|
|
|
|
|
function changeBackgroundColor() {
|
|
|
|
var randomColor = getRandomColor();
|
|
|
|
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
|
|
|
|
chrome.tabs.executeScript(tabs[0].id, {code: 'document.body.style.backgroundColor = "' + randomColor + '";'});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function getRandomColor() {
|
|
|
|
var letters = '0123456789ABCDEF';
|
|
|
|
var color = '#';
|
|
|
|
for (var i = 0; i < 6; i++) {
|
|
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
|
|
}
|
|
|
|
return color;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
4. Explanation:
|
|
|
|
- The extension consists of three files: `popup.html`, `popup.css`, and `popup.js`.
|
|
|
|
- `popup.html` contains the button element that triggers the color change when clicked.
|
|
|
|
- `popup.css` styles the button.
|
|
|
|
- `popup.js` handles the button click event and changes the background color of the active tab's webpage to a random color.
|
|
|
|
- The `changeBackgroundColor()` function fetches the active tab and executes a script to set the `document.body.style.backgroundColor` property to a randomly generated color.
|
|
|
|
- The `getRandomColor()` function generates a random color hex code by randomly selecting characters from the `letters` string and concatenating them together.
|
|
|
|
|
|
|
|
5. Dependencies and Testing:
|
|
|
|
- This extension does not require any external dependencies or permissions.
|
|
|
|
- To test the extension, follow these steps:
|
|
|
|
1. Create a new folder and save the three code files (`popup.html`, `popup.css`, and `popup.js`) in that folder.
|
|
|
|
2. Open your Chrome browser and go to `chrome://extensions/`.
|
|
|
|
3. Enable the "Developer mode" checkbox.
|
|
|
|
4. Click on the "Load unpacked" button and select the folder where you saved the code files.
|
|
|
|
5. The extension should now appear in the list of installed extensions.
|
|
|
|
6. Click on the extension icon in the browser toolbar to open the popup.
|
|
|
|
7. Click the "Change Color" button to change the background color of the current webpage to a random color.
|
|
|
|
|
|
|
|
That's it! You should now have a working Chrome extension that changes the background color of webpages to a random color when clicked. Let me know if you need any further assistance!
|
|
|
|
## Conversation
|
|
|
|
**ASSISTANT**: Sure! Here's the code for a simple Chrome extension that changes the background color of the current webpage to a random color when clicked:
|
|
|
|
|
|
|
|
1. HTML (`popup.html`):
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Random Color Changer</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="popup.css">
|
|
|
|
<script src="popup.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<button id="colorButton">Change Color</button>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
2. CSS (`popup.css`):
|
|
|
|
```css
|
|
|
|
button {
|
|
|
|
padding: 10px 20px;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
3. JavaScript (`popup.js`):
|
|
|
|
```javascript
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var colorButton = document.getElementById('colorButton');
|
|
|
|
colorButton.addEventListener('click', changeBackgroundColor);
|
|
|
|
});
|
|
|
|
|
|
|
|
function changeBackgroundColor() {
|
|
|
|
var randomColor = getRandomColor();
|
|
|
|
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
|
|
|
|
chrome.tabs.executeScript(tabs[0].id, {code: 'document.body.style.backgroundColor = "' + randomColor + '";'});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function getRandomColor() {
|
|
|
|
var letters = '0123456789ABCDEF';
|
|
|
|
var color = '#';
|
|
|
|
for (var i = 0; i < 6; i++) {
|
|
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
|
|
}
|
|
|
|
return color;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
4. Explanation:
|
|
|
|
- The extension consists of three files: `popup.html`, `popup.css`, and `popup.js`.
|
|
|
|
- `popup.html` contains the button element that triggers the color change when clicked.
|
|
|
|
- `popup.css` styles the button.
|
|
|
|
- `popup.js` handles the button click event and changes the background color of the active tab's webpage to a random color.
|
|
|
|
- The `changeBackgroundColor()` function fetches the active tab and executes a script to set the `document.body.style.backgroundColor` property to a randomly generated color.
|
|
|
|
- The `getRandomColor()` function generates a random color hex code by randomly selecting characters from the `letters` string and concatenating them together.
|
|
|
|
|
|
|
|
5. Dependencies and Testing:
|
|
|
|
- This extension does not require any external dependencies or permissions.
|
|
|
|
- To test the extension, follow these steps:
|
|
|
|
1. Create a new folder and save the three code files (`popup.html`, `popup.css`, and `popup.js`) in that folder.
|
|
|
|
2. Open your Chrome browser and go to `chrome://extensions/`.
|
|
|
|
3. Enable the "Developer mode" checkbox.
|
|
|
|
4. Click on the "Load unpacked" button and select the folder where you saved the code files.
|
|
|
|
5. The extension should now appear in the list of installed extensions.
|
|
|
|
6. Click on the extension icon in the browser toolbar to open the popup.
|
|
|
|
7. Click the "Change Color" button to change the background color of the current webpage to a random color.
|
|
|
|
|
|
|
|
That's it! You should now have a working Chrome extension that changes the background color of webpages to a random color when clicked. Let me know if you need any further assistance!
|
|
**USER**: an extension that checks for grammar and spelling errors in input fields on websites, emails, and documents.
|
|
**ASSISTANT**: To create a Chrome extension that checks for grammar and spelling errors in input fields on websites, emails, and documents, you can utilize the Grammarly API. Please note that the Grammarly API requires an access token, which is only available to Grammarly's approved partners.
|
|
|
|
|
|
|
|
Here's an outline of the code structure:
|
|
|
|
|
|
|
|
1. HTML (`popup.html`):
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Grammar and Spelling Checker</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="popup.css">
|
|
|
|
<script src="popup.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<button id="checkButton">Check Grammar and Spelling</button>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
2. CSS (`popup.css`):
|
|
|
|
```css
|
|
|
|
button {
|
|
|
|
padding: 10px 20px;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
3. JavaScript (`popup.js`):
|
|
|
|
```javascript
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var checkButton = document.getElementById('checkButton');
|
|
|
|
checkButton.addEventListener('click', checkGrammarAndSpelling);
|
|
|
|
});
|
|
|
|
|
|
|
|
function checkGrammarAndSpelling() {
|
|
|
|
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
|
|
|
|
var tab = tabs[0];
|
|
|
|
chrome.tabs.executeScript(tab.id, {file: 'contentScript.js'}, function() {
|
|
|
|
chrome.tabs.sendMessage(tab.id, {action: 'checkGrammarAndSpelling'});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
4. JavaScript (`contentScript.js`):
|
|
|
|
```javascript
|
|
|
|
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
|
|
|
|
if (request.action === 'checkGrammarAndSpelling') {
|
|
|
|
var inputFields = document.querySelectorAll('input[type="text"], textarea');
|
|
|
|
for (var i = 0; i < inputFields.length; i++) {
|
|
|
|
var inputField = inputFields[i];
|
|
|
|
var text = inputField.value;
|
|
|
|
// Use the Grammarly API to check the grammar and spelling of the "text" variable
|
|
|
|
// Process the response and highlight any errors in the input field
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
5. Explanation:
|
|
|
|
- The extension consists of four files: `popup.html`, `popup.css`, `popup.js`, and `contentScript.js`.
|
|
|
|
- `popup.html` contains the button element that triggers the check for grammar and spelling when clicked.
|
|
|
|
- `popup.css` styles the button.
|
|
|
|
- `popup.js` handles the button click event and sends a message to the content script to initiate the grammar and spelling check.
|
|
|
|
- `contentScript.js` listens for the message from `popup.js` and performs the grammar and spelling check on the input fields of the active tab.
|
|
|
|
- In `contentScript.js`, you need to use the Grammarly API (requires an access token) to check the grammar and spelling of the `text` variable.
|
|
|
|
- After receiving the response from the Grammarly API, you can process it and highlight any errors found in the input fields.
|
|
|
|
|
|
|
|
Please note that implementing the Grammarly API functionality requires a valid access token and proper integration with the Grammarly service. You will need to sign up as a Grammarly partner to obtain the necessary access token and follow their API documentation to handle the API calls and response processing.
|
|
|
|
|
|
|
|
If you have any further questions, feel free to ask!
|
|
|