Merge pull request #2 from bThink-BGU/refactor

Refactor
This commit is contained in:
Achiya Elyasaf
2023-08-05 15:59:02 +03:00
committed by GitHub
6 changed files with 135 additions and 80 deletions

View File

@@ -5,7 +5,7 @@
}, },
"content_scripts": [ "content_scripts": [
{ {
"js": ["scripts/jquery.js", "scripts/content.js"], "js": ["scripts/jquery.js", "scripts/content.js", "scripts/utils.js"],
"matches": ["https://*.overleaf.com/project/*"] "matches": ["https://*.overleaf.com/project/*"]
} }
], ],
@@ -36,11 +36,12 @@
} }
}, },
"background": { "background": {
"service_worker": "scripts/service-worker.js" "service_worker": "scripts/service-worker.js",
"type": "module"
}, },
"permissions": ["storage", "tabs"], "permissions": ["storage", "tabs"],
"manifest_version": 3, "manifest_version": 3,
"name": "LeafLLM", "name": "LeafLLM",
"homepage_url": "https://github.com/achiyae/LeafLLM", "homepage_url": "https://github.com/achiyae/LeafLLM",
"version": "1.1.0" "version": "1.2.0"
} }

View File

@@ -1,7 +1,8 @@
<html> <html>
<head> <head>
<script src="/scripts/jquery.js"></script> <script src="/scripts/jquery.js"></script>
<script src="/popup/popup.js"></script> <script src="/scripts/utils.js" type="module"></script>
<script src="/popup/popup.js" type="module"></script>
<link rel="stylesheet" href="/popup/popup.css" /> <link rel="stylesheet" href="/popup/popup.css" />
</head> </head>
<body> <body>
@@ -26,21 +27,21 @@
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Text Improvement</div> <div class="settings-item-text">Text Improvement</div>
<label class="switch"> <label class="switch">
<input name="text-improvement" class="settings-item-checkbox" type="checkbox" /> <input name="text-Improve" class="settings-item-checkbox" type="checkbox" />
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Text Completion</div> <div class="settings-item-text">Text Completion</div>
<label class="switch"> <label class="switch">
<input name="text-completion" class="settings-item-checkbox" type="checkbox" /> <input name="text-Complete" class="settings-item-checkbox" type="checkbox" />
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Ask</div> <div class="settings-item-text">Ask</div>
<label class="switch"> <label class="switch">
<input name="text-ask" class="settings-item-checkbox" type="checkbox" /> <input name="text-Ask" class="settings-item-checkbox" type="checkbox" />
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>

View File

@@ -1,105 +1,101 @@
const apiKeyRegex = /sk-[a-zA-Z0-9]{48}/; import {setSetting} from '../scripts/utils.js'
const settings = [ const apiKeyRegex = /sk-[a-zA-Z0-9]{48}/
{ key: "textCompletion", name: "text-completion" },
{ key: "textImprovement", name: "text-improvement" },
{ key: "textAsk", name: "text-ask" },
];
function addMessage(message) { function addMessage(message) {
$("#message-box").append(`<div class="message">${message}</div>`); $('#message-box').append(`<div class="message">${message}</div>`)
} }
function addErrorMessage(message) { function addErrorMessage(message) {
$("#message-box").append(`<div class="error">${message}</div>`); $('#message-box').append(`<div class="error">${message}</div>`)
} }
function clearMessages() { function clearMessages() {
$("#message-box").empty(); $('#message-box').empty()
} }
async function refreshStorage() { async function refreshStorage() {
chrome.storage.local.get("openAIAPIKey").then(({ openAIAPIKey }) => { chrome.storage.local.get('openAIAPIKey').then(({ openAIAPIKey }) => {
$("#api-token-form .api-token-status").text(chrome.runtime.lastError || !openAIAPIKey ? "not set" : "set"); $('#api-token-form .api-token-status').text(chrome.runtime.lastError || !openAIAPIKey ? 'not set' : 'set')
}); })
chrome.storage.local.get(settings.map(({ key }) => key)).then((storage) => { chrome.storage.local.get(['Improve', 'Complete', 'Ask']).then((settings) => {
settings.forEach(({ key, name }) => { let bindingFailures = Object.values(settings)
$(`#settings-form input[name='${name}']:checkbox`).prop("checked", storage[key]); .filter(({ status }) => status === 'error')
}); .map(({ key, shortcut }) => `${shortcut} for ${key}`)
}); .join(', ')
if (bindingFailures.length > 0) {
addErrorMessage(`Could not bound the following shortcuts:\n${bindingFailures}.\nYou can set it manually at <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>.`)
}
Object.values(settings).forEach(({ key, status }) => {
$(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'enabled')
})
})
} }
async function handleAPITokenSet(event) { async function handleAPITokenSet(event) {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
clearMessages(); clearMessages()
const input = $("#api-token-form").find("input[name='api-token']"); const input = $('#api-token-form').find('input[name=\'api-token\']')
const openAIAPIKey = input.val(); const openAIAPIKey = input.val()
input.val(""); input.val('')
if (!openAIAPIKey || !apiKeyRegex.test(openAIAPIKey)) { if (!openAIAPIKey || !apiKeyRegex.test(openAIAPIKey)) {
addErrorMessage("Invalid API Token."); addErrorMessage('Invalid API Token.')
return; return
} }
try { try {
await chrome.storage.local.set({ openAIAPIKey }); chrome.storage.local.set({ openAIAPIKey }).then(refreshStorage)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
addErrorMessage("Failed to set API Token."); addErrorMessage('Failed to set API Token.')
return; return
} }
await refreshStorage();
} }
async function handleAPITokenClear(event) { async function handleAPITokenClear(event) {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
clearMessages(); clearMessages()
try { try {
await chrome.storage.local.remove("openAIAPIKey"); chrome.storage.local.remove('openAIAPIKey').then(refreshStorage)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
addErrorMessage("Failed to remove API Token."); addErrorMessage('Failed to remove API Token.')
return; return
} }
await refreshStorage();
} }
function makeHandleSettingChange(key) { function makeHandleSettingChange(key) {
return async (event) => { return async (event) => {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
clearMessages()
clearMessages(); const value = event.target.checked
chrome.storage.local.get(key).then(setting => {
const value = event.target.checked; if(setting[key].status !== 'error') {
setting[key].status = value ? 'enabled' : 'disabled'
try { setSetting(setting[key].key, setting[key])
await chrome.storage.local.set({ [key]: value }); }
} catch (error) { return refreshStorage()
console.log(error); })
addErrorMessage(`Failed to set ${key} setting.`);
return;
} }
await refreshStorage();
};
} }
$(document).ready(async function () { $(document).ready(async function () {
$("#api-token-form .submit").on("click", handleAPITokenSet); $('#api-token-form .submit').on('click', handleAPITokenSet)
$("#api-token-form .clear").on("click", handleAPITokenClear); $('#api-token-form .clear').on('click', handleAPITokenClear)
settings.forEach(({ key, name }) => let commands = ['Improve', 'Complete', 'Ask']
$(`#settings-form input[name='${name}']:checkbox`).on("change", makeHandleSettingChange(key)) commands.forEach((key) => {
); $(`#settings-form input[name='text-${key}']:checkbox`).on('change', makeHandleSettingChange(key))
await refreshStorage(); })
}); await refreshStorage()
})

View File

@@ -1,3 +1,4 @@
class OpenAIAPI { class OpenAIAPI {
static defaultModel = 'text-davinci-003' static defaultModel = 'text-davinci-003'

View File

@@ -1,3 +1,11 @@
import {setSetting} from './utils.js'
const settings = [
{ key: 'Complete', shortcut: 'Alt+C', status: 'enabled', type: 'Command' },
{ key: 'Improve', shortcut: 'Alt+I', status: 'enabled', type: 'Command' },
{ key: 'Ask', shortcut: 'Alt+A', status: 'enabled', type: 'Command' }
]
async function sendMessage(message) { async function sendMessage(message) {
const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true }) const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
if (tab == null || tab.url?.startsWith('chrome://')) return undefined if (tab == null || tab.url?.startsWith('chrome://')) return undefined
@@ -14,19 +22,35 @@ function addListener(commandName) {
}) })
} }
chrome.runtime.onInstalled.addListener((reason) => {
if (reason.reason === chrome.runtime.OnInstalledReason.INSTALL) {
checkCommandShortcuts()
}
})
// Only use this function during the initial install phase. After
// installation the user may have intentionally unassigned commands.
// Example for install commands: [{"description":"","name":"_execute_action","shortcut":""},{"description":"Use the selected text to ask GPT. It adds to the beginning of the selected text: 'In Latex, '","name":"Ask","shortcut":""},{"description":"Complete selected text","name":"Complete","shortcut":""},{"description":"Improve selected text","name":"Improve","shortcut":""}]
async function checkCommandShortcuts() {
chrome.commands.getAll((commands) => {
for (let { name, shortcut } of commands) {
let command =
settings.filter(({ type, key }) => 'Command' === type && name === key)
if (command.length > 0) {
command = command[0]
if (shortcut === '') {
command.status = 'error'
}
setSetting(command.key, command)
}
}
})
}
async function setup() { async function setup() {
addListener('Improve') addListener('Improve')
addListener('Complete') addListener('Complete')
addListener('Ask') addListener('Ask')
/*const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
if (tab?.url?.startsWith('chrome://')) return undefined
console.log('tab'+tab)
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['scripts/content.js']
}).then(() => {
})*/
} }
setup() setup()

32
scripts/utils.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* Set a setting in storage {@link https://developer.chrome.com/docs/extensions/reference/storage/#type-StorageArea:~:text=to%20the%20callback.-,set,-void}
* @param key
* @param value
* @param {function}[callback] Optional callback function
*/
export async function setSetting(key, value, callback) {
let obj = {}
obj[key] = value
if (typeof callback === 'undefined') {
chrome.storage.local.set(obj).catch(error => {
console.log(`Failed to set ${key} setting. Error: ${error}`)
})
} else {
chrome.storage.local.set(obj, callback).catch(error => {
console.log(`Failed to set ${key} setting. Error: ${error}`)
})
}
}
/**
* Get a setting from storage
* @param {string | string[] | object} [keys=null] - The keys to get (see {@link https://developer.chrome.com/docs/extensions/reference/storage/#usage})
* @param {function}[callback] Optional callback function
*/
export async function getSetting(keys = null, callback) {
if (typeof callback === 'undefined') {
return chrome.storage.local.get(keys, (items) => Object.values(items))
}else {
return chrome.storage.local.get(keys, (items) => callback(Object.values(items)))
}
}