feat: Implement Gogh Theme Engine with options page, theme parsing, and semantic theme derivation
We're cooked. <skull emoji> - Added options page for YAML palette editing, live color preview, and diagnostics. - Implemented theme engine to parse Gogh YAML palettes and derive semantic themes. - Configured TypeScript and Vite for building the extension. - Created new tab and popup HTML pages with corresponding scripts and styles. - Established storage management for user configurations in Chrome storage. - Added icons for the extension and updated manifest for MV3 compatibility.
This commit is contained in:
31
options/options.html
Normal file
31
options/options.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!-- (c) 2022 Clyde D'Souza -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chrome Extension Template</title>
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
|
||||
<meta name="description" content="Chrome Extension Template" />
|
||||
<script src="options.js" type="text/javascript"></script>
|
||||
<link href="options.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<form>
|
||||
<label>
|
||||
Chrome storage value
|
||||
<input type="text" id="storageValue" aria-label="Chrome storage value" />
|
||||
</label>
|
||||
<br/>
|
||||
<button id="SaveConfiguration" type="button" class="btn-primary">Save new Chrome Storage value</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<a href="https://github.com/ClydeDz/google-meet-exit-page-chrome-extension/issues/new/choose" target="_blank" rel="noreferrer">
|
||||
Visit this on GitHub</a><span class="link-separator"></span>
|
||||
<a href="https://sponsor.clydedsouza.net/" target="_blank" rel="noreferrer">
|
||||
Buy me a coffee</a><span class="link-separator"></span>
|
||||
<a href="https://clydedsouza.net" target="_blank" rel="noreferrer">
|
||||
Developed by Clyde D'Souza</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
21
options/scripts/index.js
Normal file
21
options/scripts/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { getStorage,setStorage } from "../../common/storage";
|
||||
import { PRESET_CONFIGURATION, CHROME_SYNC_STORAGE_KEY } from "../../common/settings";
|
||||
|
||||
function saveConfiguration() {
|
||||
const updatedConfiguration = {
|
||||
storageValue: document.getElementById("storageValue").value
|
||||
};
|
||||
setStorage(CHROME_SYNC_STORAGE_KEY, updatedConfiguration);
|
||||
}
|
||||
|
||||
function loadConfiguration(result) {
|
||||
const savedConfiguration = result || PRESET_CONFIGURATION;
|
||||
const storageValue = savedConfiguration["storageValue"];
|
||||
document.getElementById("storageValue").value = storageValue;
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
console.info("Options script loaded");
|
||||
document.getElementById("SaveConfiguration").addEventListener("click", saveConfiguration);
|
||||
getStorage(CHROME_SYNC_STORAGE_KEY, loadConfiguration);
|
||||
};
|
||||
10
options/styles/_page.scss
Normal file
10
options/styles/_page.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "./variables";
|
||||
|
||||
body {
|
||||
background-color: $light-gray;
|
||||
color: $dark-gray;
|
||||
font: {
|
||||
family: $font-family;
|
||||
size: 16px;
|
||||
}
|
||||
}
|
||||
3
options/styles/_variables.scss
Normal file
3
options/styles/_variables.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$dark-gray: #6B6B6B;
|
||||
$light-gray: #F4F5F7;
|
||||
$font-family: -apple-system, BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
|
||||
2
options/styles/options.scss
Normal file
2
options/styles/options.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "./variables";
|
||||
@import "./page";
|
||||
Reference in New Issue
Block a user