Elevate Your ServiceNow and Salesforce Development with Our Chrome Extension
Attention developers working with ServiceNow, Salesforce, and similar platforms: streamline your workflow and boost your productivity with our specialized Chrome extension.
Designed to integrate seamlessly with OpenAI's GPT model, this tool fetches custom code snippets tailored to your specific needs, whether you're customizing workflows in ServiceNow or building applications in Salesforce.
The extension's simplicity is its strength. Once the code is generated, it's automatically copied to your clipboard, eliminating manual steps and saving you valuable time.
Join us to discover how this innovative tool can revolutionize your development process, simplify complex tasks, and make your life as a developer focused on ServiceNow, Salesforce, and related platforms easier than ever before. Stay tuned for more details and insights!
Prerequisites
Basic Understanding Of HTML, CSS, and Javascript
Development Steps
- Navigate to your Text Editor and create a basic manifest.json file
Manifest [manifest.json]
{
"manifest_version": 3,
"name": "Open AI Custom Extension",
"description": "Extension that provides code from AI.",
"version": "1.0",
"action": {
"default_popup": "popup.html"
}
}
- Create an HTML file named popup.html
HTML [popup.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup</title>
<!-- Bootstrap Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- External Stylesheet -->
<link rel="stylesheet" href="./app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="form">
<div id="success-message">
<p> <i class="far fa-copy"></i> Output Copied To Clipboard</p>
</div>
<div class="form-group">
<label for="prompt">Enter Your Prompt Here: </label>
<input type="text" class="form-control" id="prompt" name="prompt" /autocomplete="off">
<div class="min-words clearfix">
<small>
Min Words:
<span id="min-words_counter">0</span> / 10
</small>
</div>
<div id="error-message">
<i class="fas fa-exclamation-circle"></i>
<span id="error-message_holder">
error
</span>
</div>
</div>
<div class="btns">
<button class="btn btn-block" id="generateCode">
Generate Code
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
- Add an external stylesheet named app.css(optional)
CSS [app.css]
html {
min-height: 20em;
min-width: 20em;
}
#success-message {
background-color: #2ecc71;
border-radius: 25px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
#success-message p {
padding: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
.form-group {
margin-top: 20px;
}
label {
color: #27ae60;
}
#prompt {
margin-top: 20px;
border: 2px solid #2ecc71;
transition: all 1s ease-in-out;
box-shadow: none;
}
.min-words {
margin-top: 2px !important;
float: right !important;
color: #27ae60;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#error-message {
color: #c0392b;
opacity: 0;
margin: 10px 0px !important;
transition: all 0.3s ease-in-out;
}
#prompt:hover,
#prompt:focus {
border-color: #27ae60;
}
#generateCode {
width: 100%;
/* background-color: transparent; */
border: 2px solid #2ecc71;
color: #2ecc71;
background: linear-gradient(to right, #27ae60 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 1s ease-in-out;
}
#generateCode:hover,
#generateCode:focus {
/* background-color: #27ae60; */
color: white;
border-color: #27ae60;
background-position: left bottom;
}
.fa-arrow-right {
transition: all 1s ease-in-out;
color: #27ae60;
}
#generateCode:hover .fa-arrow-right {
transform: translateX(10px);
color: white;
}
- Add an external client script (javascript) file named app.js.
Javascript [app.js]
const generateCode = document.getElementById('generateCode');
const prompt_input_box = document.getElementById('prompt')
const success_message = document.getElementById('success-message');
prompt_input_box.addEventListener('keyup', (e) => {
const value = e.target.value.trim();
const counter = document.getElementById('min-words_counter');
if (value.length > 0) {
if (value.length < 11) {
counter.innerHTML = value.length;
}
} else {
counter.innerHTML = 0;
}
})
generateCode.addEventListener('click', async () => {
const error_message_holder = document.getElementById('error-message_holder');
const error = document.getElementById('error-message');
const prompt = prompt_input_box.value.trim();
if (prompt.length == 0) {
error_message_holder.innerText = 'Please provide a valid prompt';
error.style.opacity = 1;
} else if (prompt.length < 10) {
error_message_holder.innerText = 'Prompt must be at least 10 characters';
error.style.opacity = 1;
} else if (prompt.length > 10) {
error_message_holder.innerText = '';
error.style.opacity = 0;
await fetchResponseFromGPT(prompt)
}
});
const copyData = async (data) => {
try {
navigator.clipboard.writeText(data);
success_message.style.opacity = 1
setTimeout(() => {
success_message.style.opacity = 0;
}, 2000)
} catch (err) {
}
}
const fetchResponseFromGPT = async (prompt) => {
var auth_header = 'Bearer YourGPTKEY';
var body = {
"model": "gpt-3.5-turbo",
"messages": [
{
"role": "system",
"content": "You are a coding assistant, skilled in providing code for complex coding scenarios.You will only provide code, no other information. Only code and no other string and no other information"
},
{
"role": "user",
"content": prompt
}
]
};
var payload = {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
'Authorization': auth_header
},
body: JSON.stringify(body),
}
const request = await fetch('https://api.openai.com/v1/chat/completions', payload);
const response = await request.json();
const output = response.choices[0].message.content;
console.log(output);
await copyData(output);
}
- Once the code is completed, navigate to Chrome, click on 3 dots on top right, and select Extensions -> Manage Extensions
- Check the developer mode on the tab that is opened.
- Click On Load Unpacked and select the folder where you have developed the code.
- Pin the extension (optional)
Using the extension
Click on the Extension Icon
Enter the prompt and click on Generate Code to get the code.
- Paste the code anywhere you want.
Resources
Read more about developing Chrome Extensions.
Get source code from GitHub.
Learn more about HTML, CSS, and Javascript from W3Schools
Learn more about the Web from MDN Web Docs
Check out Open AI.