Chrome extension that links with web app
Budget: $200 – $350 USD
The Chrome extension can be built using JavaScript, HTML, and CSS. The JavaScript file would contain the logic for all the functionality, while the HTML and CSS would be used for the UI.
Here is a basic overview of the steps to build the Chrome extension:
Create a manifest.json file which would include information such as the name of the extension, version, background script, and permissions required.
Create the UI for the extension using HTML and CSS. This would include a text area for the user to input their text, a text area for the output, and a copy button.
Add event listeners for the keyboard shortcuts (Ctrl / Alt + C, Ctrl / Alt + E, Ctrl / Alt + S, etc.) using JavaScript. These event listeners would trigger the corresponding actions (correcting text, summarizing text, etc.).
Connect the extension to the ChatGPT API to retrieve the AI generated responses for each command.
Implement a login system to allow users to access premium features. This can be done using an extension frame window with options to login, view terms & privacy, about, dashboard, account, and logout.
Add context menus in the extension frame with the options specified.
Implement the ability to run commands in the text area within the extension window and display the output in a different text area.
Display keyboard shortcuts in a popup to guide the user.
Check the user's limits before running queries and prompt with error/upgrade messages when the limit is exhausted.
Display a message to the user if they cancel their subscription or run out of credits and provide a link to the subscription information page.
Implement a section in the extension frame for the user to save hashtags for the generate command.
Create a visual command strip above the text selection for the user to access commands easily.
This is a basic overview of how you can build a Chrome extension with the features you specified. If you have any questions or need clarification on any of the steps, feel free to ask.
Here is an example code to get you started:
manifest.json:
json
Copy code
{
"manifest_version": 2,
"name": "ChatGPT AI Writing Extension",
"version": "1.0",
"permissions": [
"activeTab",
"https://*.openai.com/*"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html:
php
Copy code
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT AI Writing Extension</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<div id="input-area">
<textarea id="input"></textarea>
</div>
<div id="output-area">
<textarea id="output"></textarea>
</div>
<button id="copy-button">Copy</button>
</body>
<script src="popup.js"></script>
</html>
popup.js:
csharp
Copy code
// Keyboard shortcut event listeners
document.addEventListener('keydown', (event) => {
if (event.altKey && event.code === 'KeyC') {
correctText();
} else if (event.altKey && event.code === 'KeyE') {
expandText();
} else if (event.altKey && event.code === 'KeyS') {
summarizeText();
}
});
// Correct text function
function correctText() {
// Your code to correct the text
}
// Expand text function
function expandText() {
// Your code to expand the text
}
// Summarize text function
function summarizeText() {
// Your code to summarize the text
}
we'd like a web app to go with it
Part 1: Web part with a few simple pages linked to the extension part (HTML, CSS, PHP + JavaScript)
Component 1 - SIGNUP/LOGIN via Google or Email
Signup/Login Module
Component 2 - DASHBOARD
Payment, User and Account Management section is visible
Invite user - in which case invited user receives ultra simple email invitation with Join text that links them to the app signup
Delete user
Mark user as admin
Payment section is visible to user with personal plan and admin of business plan
Here is a basic overview of the steps to build the Chrome extension:
Create a manifest.json file which would include information such as the name of the extension, version, background script, and permissions required.
Create the UI for the extension using HTML and CSS. This would include a text area for the user to input their text, a text area for the output, and a copy button.
Add event listeners for the keyboard shortcuts (Ctrl / Alt + C, Ctrl / Alt + E, Ctrl / Alt + S, etc.) using JavaScript. These event listeners would trigger the corresponding actions (correcting text, summarizing text, etc.).
Connect the extension to the ChatGPT API to retrieve the AI generated responses for each command.
Implement a login system to allow users to access premium features. This can be done using an extension frame window with options to login, view terms & privacy, about, dashboard, account, and logout.
Add context menus in the extension frame with the options specified.
Implement the ability to run commands in the text area within the extension window and display the output in a different text area.
Display keyboard shortcuts in a popup to guide the user.
Check the user's limits before running queries and prompt with error/upgrade messages when the limit is exhausted.
Display a message to the user if they cancel their subscription or run out of credits and provide a link to the subscription information page.
Implement a section in the extension frame for the user to save hashtags for the generate command.
Create a visual command strip above the text selection for the user to access commands easily.
This is a basic overview of how you can build a Chrome extension with the features you specified. If you have any questions or need clarification on any of the steps, feel free to ask.
Here is an example code to get you started:
manifest.json:
json
Copy code
{
"manifest_version": 2,
"name": "ChatGPT AI Writing Extension",
"version": "1.0",
"permissions": [
"activeTab",
"https://*.openai.com/*"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html:
php
Copy code
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT AI Writing Extension</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<div id="input-area">
<textarea id="input"></textarea>
</div>
<div id="output-area">
<textarea id="output"></textarea>
</div>
<button id="copy-button">Copy</button>
</body>
<script src="popup.js"></script>
</html>
popup.js:
csharp
Copy code
// Keyboard shortcut event listeners
document.addEventListener('keydown', (event) => {
if (event.altKey && event.code === 'KeyC') {
correctText();
} else if (event.altKey && event.code === 'KeyE') {
expandText();
} else if (event.altKey && event.code === 'KeyS') {
summarizeText();
}
});
// Correct text function
function correctText() {
// Your code to correct the text
}
// Expand text function
function expandText() {
// Your code to expand the text
}
// Summarize text function
function summarizeText() {
// Your code to summarize the text
}
we'd like a web app to go with it
Part 1: Web part with a few simple pages linked to the extension part (HTML, CSS, PHP + JavaScript)
Component 1 - SIGNUP/LOGIN via Google or Email
Signup/Login Module
Component 2 - DASHBOARD
Payment, User and Account Management section is visible
Invite user - in which case invited user receives ultra simple email invitation with Join text that links them to the app signup
Delete user
Mark user as admin
Payment section is visible to user with personal plan and admin of business plan