Skip to content

Commit

Permalink
~changed UI ~version++
Browse files Browse the repository at this point in the history
  • Loading branch information
@qunash
qunash committed Jan 5, 2023
1 parent 1b5b63a commit 7cb3da6
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 68 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Web ChatGPT",
"version": "1.0.4",
"version": "1.1.0",
"description": "Augment your ChatGPT prompts with relevant results from the web.",
"icons": {
"16": "icons/icon16.png",
Expand Down
2 changes: 1 addition & 1 deletion manifest.v2.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Web ChatGPT",
"version": "1.0.4",
"version": "1.1.0",
"description": "Augment your ChatGPT prompts with relevant results from the web.",
"icons": {
"16": "icons/icon16.png",
Expand Down
113 changes: 47 additions & 66 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,19 @@ function setTitleAndDescription() {
return;
}

h1_title.textContent = "Web ChatGPT";
h1_title.textContent = "WebChatGPT";

const div = document.createElement("div");
div.classList.add("w-full", "bg-gray-50", "dark:bg-white/5", "p-6", "rounded-md", "mb-10", "border");
div.textContent = "With Web ChatGPT you can augment your prompts with relevant web search results for better and up-to-date answers.";
div.textContent = "With WebChatGPT you can augment your prompts with relevant web search results for better and up-to-date answers.";
h1_title.parentNode.insertBefore(div, h1_title.nextSibling);

}

function showErrorMessage(e) {
console.log(e);
console.info("WebChatGPT error --> API error: ", e);
var errorDiv = document.createElement("div");
errorDiv.classList.add("web-chatgpt-error", "absolute", "bottom-0", "right-1", "text-white", "bg-red-500", "p-4", "rounded-lg", "mb-4", "mr-4", "text-sm");
errorDiv.classList.add("web-chatgpt-error", "absolute", "bottom-0", "right-1", "dark:text-white", "bg-red-500", "p-4", "rounded-lg", "mb-4", "mr-4", "text-sm");
errorDiv.innerHTML = "<b>An error occurred</b><br>" + e + "<br><br>Check the console for more details.";
document.body.appendChild(errorDiv);
setTimeout(() => { errorDiv.remove(); }, 5000);
Expand Down Expand Up @@ -93,7 +93,7 @@ function onSubmit(event) {

function updateUI() {

if (document.querySelector(".web-chatgpt-options")) {
if (document.querySelector(".web-chatgpt-toolbar")) {
return;
}

Expand All @@ -108,8 +108,8 @@ function updateUI() {


var toolbarDiv = document.createElement("div");
toolbarDiv.classList.add("web-chatgpt-toolbar", "gap-3");
toolbarDiv.style.padding = "0em 0.5em 0em 0.5em";
toolbarDiv.classList.add("web-chatgpt-toolbar", "flex", "items-baseline", "gap-3", "mt-0");
toolbarDiv.style.padding = "0em 0.5em";


// Web access switch
Expand All @@ -119,64 +119,41 @@ function updateUI() {
chrome.storage.sync.get("web_access", (data) => {
toggleWebAccessDiv.querySelector(".web-chatgpt-toggle-checkbox").checked = data.web_access;
});
toolbarDiv.appendChild(toggleWebAccessDiv);


var checkbox = toggleWebAccessDiv.querySelector(".web-chatgpt-toggle-checkbox");
checkbox.addEventListener("click", () => {
isWebAccessOn = checkbox.checked;
chrome.storage.sync.set({ "web_access": checkbox.checked });
});

textareaWrapper.parentNode.insertBefore(toolbarDiv, textareaWrapper);

var divider = document.createElement("hr");

var optionsDiv = document.createElement("div");
optionsDiv.classList.add("web-chatgpt-options", "p-4", "space-y-2");

var title = document.createElement("h4");
title.innerHTML = "Web ChatGPT Options";
title.classList.add("text-white", "pb-4", "text-lg", "font-bold");

var divNumResultsSlider = document.createElement("div");
divNumResultsSlider.classList.add("flex", "justify-between");

var label = document.createElement("label");
label.innerHTML = "Web results";
label.classList.add("text-white");

var value = document.createElement("span");
chrome.storage.sync.get("num_web_results", (data) => {
value.innerHTML = data.num_web_results;
});
label.appendChild(value);
// Number of web results
var numResultsDropdown = document.createElement("select");
numResultsDropdown.classList.add("text-sm", "dark:text-white", "ml-0", "dark:bg-gray-800", "border-0");

divNumResultsSlider.appendChild(label);
divNumResultsSlider.appendChild(value);
for (let i = 1; i <= 10; i++) {
let optionElement = document.createElement("option");
optionElement.value = i;
optionElement.text = i + " result" + (i == 1 ? "" : "s");
numResultsDropdown.appendChild(optionElement);
}

var numResultsSlider = document.createElement("input");
numResultsSlider.type = "range";
numResultsSlider.min = 1;
numResultsSlider.max = 10;
numResultsSlider.step = 1;
chrome.storage.sync.get("num_web_results", (data) => {
numResultsSlider.value = data.num_web_results;
numResultsDropdown.value = data.num_web_results;
});
numResultsSlider.classList.add("w-full");

numResultsSlider.oninput = function () {
numResultsDropdown.onchange = function () {
numWebResults = this.value;
value.innerHTML = numWebResults;
chrome.storage.sync.set({ "num_web_results": this.value });
};

// Time period
var timePeriodLabel = document.createElement("label");
timePeriodLabel.innerHTML = "Results from:";
timePeriodLabel.classList.add("text-white");
timePeriodLabel.classList.add("text-sm", "dark:text-white");

var timePeriodDropdown = document.createElement("select");
timePeriodDropdown.classList.add("text-white", "ml-0", "bg-gray-900", "border", "w-full");
timePeriodDropdown.classList.add("text-sm", "dark:text-white", "ml-0", "dark:bg-gray-800", "border-0");

var timePeriodOptions = [
{ value: "", label: "Any time" },
Expand All @@ -190,7 +167,7 @@ function updateUI() {
var optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.innerHTML = option.label;
optionElement.classList.add("text-white");
optionElement.classList.add("text-sm", "dark:text-white");
timePeriodDropdown.appendChild(optionElement);
});

Expand All @@ -199,9 +176,9 @@ function updateUI() {
timePeriod = this.value;
};


// Region
var regionDropdown = document.createElement("select");
regionDropdown.classList.add("text-white", "ml-0", "bg-gray-900", "border", "w-full");
regionDropdown.classList.add("text-sm", "dark:text-white", "ml-0", "dark:bg-gray-800", "border-0");

fetch(chrome.runtime.getURL('regions.json'))
.then(function (response) {
Expand All @@ -212,7 +189,7 @@ function updateUI() {
var optionElement = document.createElement("option");
optionElement.value = region.value;
optionElement.innerHTML = region.label;
optionElement.classList.add("text-white");
optionElement.classList.add("text-sm", "dark:text-white");
regionDropdown.appendChild(optionElement);
});

Expand All @@ -224,35 +201,39 @@ function updateUI() {
region = this.value;
};

var emptyDiv = document.createElement("div");
emptyDiv.classList.add("p-4");
toolbarDiv.appendChild(toggleWebAccessDiv);
toolbarDiv.appendChild(numResultsDropdown);
toolbarDiv.appendChild(timePeriodDropdown);
toolbarDiv.appendChild(regionDropdown);

textareaWrapper.parentNode.insertBefore(toolbarDiv, textareaWrapper.nextSibling);

var supportMe = document.createElement("a");
supportMe.innerHTML = "Like the extension?<br>Please consider <span class='underline'><a href='https://www.buymeacoffee.com/anzorq' target='_blank'>supporting me</a></span>";
supportMe.classList.add("text-sm", "text-gray-500");
toolbarDiv.parentNode.classList.remove("flex");
toolbarDiv.parentNode.classList.add("flex-col");


optionsDiv.appendChild(title);
optionsDiv.appendChild(divNumResultsSlider);
optionsDiv.appendChild(numResultsSlider);
optionsDiv.appendChild(timePeriodLabel);
optionsDiv.appendChild(timePeriodDropdown);
optionsDiv.appendChild(regionDropdown);
optionsDiv.appendChild(emptyDiv);
optionsDiv.appendChild(supportMe);
var bottomDiv = document.querySelector("div[class*='absolute bottom-0']");

var navMenu = document.querySelector('nav');
navMenu.appendChild(divider);
navMenu.appendChild(optionsDiv);
var footerDiv = document.createElement("div");

var extension_version = chrome.runtime.getManifest().version;
footerDiv.innerHTML = "<a href='https://github.com/qunash/chatgpt-advanced' target='_blank' class='underline'>WebChatGPT extension v." + extension_version + "</a>. If you like the extension, please consider <a href='https://www.buymeacoffee.com/anzorq' target='_blank' class='underline'>supporting me</a>.";

var lastElement = bottomDiv.lastElementChild;
lastElement.appendChild(footerDiv);
}

const titleEl = document.querySelector('title');

window.onload = function() {

const observer = new MutationObserver(() => {
setTitleAndDescription();
updateUI();
try {
setTitleAndDescription();
updateUI();
} catch (e) {
console.info("WebChatGPT error --> Could not update UI:\n", e.stack);
}
});

observer.observe(titleEl, {
Expand Down

0 comments on commit 7cb3da6

Please sign in to comment.