From b69610285c11ec3251c78c31f60d8a9e92db6e0d Mon Sep 17 00:00:00 2001 From: Uko Kokņevičs Date: Wed, 3 Jan 2024 12:59:25 +0100 Subject: Floating Cats 0.1 --- .gitignore | 1 + bg.js | 13 ++ bobvibes.webp | Bin 0 -> 514582 bytes floating-cats.css | 48 +++++++ floating-cats.js | 50 +++++++ manifest.json | 55 ++++++++ marsey3d.webp | Bin 0 -> 149632 bytes options/MPLUS1Code.ttf | Bin 0 -> 3912412 bytes options/MPLUS2.ttf | Bin 0 -> 4125024 bytes options/normalize.css | 349 +++++++++++++++++++++++++++++++++++++++++++++++++ options/options.html | 42 ++++++ options/options.js | 11 ++ options/style.css | 231 ++++++++++++++++++++++++++++++++ 13 files changed, 800 insertions(+) create mode 100644 .gitignore create mode 100644 bg.js create mode 100644 bobvibes.webp create mode 100644 floating-cats.css create mode 100644 floating-cats.js create mode 100644 manifest.json create mode 100644 marsey3d.webp create mode 100755 options/MPLUS1Code.ttf create mode 100755 options/MPLUS2.ttf create mode 100644 options/normalize.css create mode 100644 options/options.html create mode 100644 options/options.js create mode 100644 options/style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..500aabb --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +web-ext-artifacts/ \ No newline at end of file diff --git a/bg.js b/bg.js new file mode 100644 index 0000000..38a68f5 --- /dev/null +++ b/bg.js @@ -0,0 +1,13 @@ +"use strict"; + +if (typeof(browser) == "undefined") { + globalThis.browser = chrome; +} + +browser.browserAction.onClicked.addListener(async () => { + browser.runtime.openOptionsPage(); + + const enabled = (await browser.storage.sync.get("enabled")).enabled; + console.log(enabled); + await browser.storage.sync.set({ enabled: !enabled }); +}); diff --git a/bobvibes.webp b/bobvibes.webp new file mode 100644 index 0000000..1e59e0e Binary files /dev/null and b/bobvibes.webp differ diff --git a/floating-cats.css b/floating-cats.css new file mode 100644 index 0000000..6380668 --- /dev/null +++ b/floating-cats.css @@ -0,0 +1,48 @@ +:root { + --floating-cats-floating-delay: 0s; + --floating-cats-floating-width: 8rem; + --floating-cats-floating-height: 8rem; + + --floating-cats-top: 0; + --floating-cats-left: 0; +} + +.floating-cats-clickthru { + pointer-events: none; +} + +.floating-cats-floating { + position: fixed; + top: var(--floating-cats-top); + left: var(--floating-cats-left); + z-index: 10000; + width: min-content; + height: min-content; +} + +.floating-cats-floating img { + max-width: var(--floating-cats-floating-width); + max-height: var(--floating-cats-floating-height); +} + +.floating-cats-floating-x { + animation: floating-cats-floating-x 16s linear infinite alternate; + animation-delay: var(--floating-cats-floating-delay); +} + +.floating-cats-floating-y { + animation: floating-cats-floating-y 9s linear infinite alternate; + animation-delay: var(--floating-cats-floating-delay); +} + +@keyframes floating-cats-floating-x { + 100% { + transform: translateX(calc(100vw - var(--floating-cats-floating-width))); + } +} + +@keyframes floating-cats-floating-y { + 100% { + transform: translateY(calc(100vh - var(--floating-cats-floating-height))); + } +} diff --git a/floating-cats.js b/floating-cats.js new file mode 100644 index 0000000..74acea4 --- /dev/null +++ b/floating-cats.js @@ -0,0 +1,50 @@ +"use strict"; + +if (typeof(browser) == "undefined") { + globalThis.browser = chrome; +} + +const cats = []; + +function reflectChange(changes, name, proc) { + if (name in changes + && "newValue" in changes[name] + && !Object.is(changes[name].newValue, changes[name].oldValue)) { + proc(changes[name].newValue); + } +} + +async function main() { + let enabled = (await browser.storage.sync.get("enabled")).enabled; + + browser.storage.onChanged.addListener(changes => { + reflectChange(changes, "enabled", newEnabled => { + enabled = newEnabled; + cats.forEach(cat => cat.hidden = !enabled); + }); + }); + + let counter = 0; + function addCat(alt, url) { + const floatingX = document.createElement("div"); + floatingX.style.setProperty("--floating-cats-floating-delay", `-${50 * counter++}s`); + floatingX.classList.add("floating-cats-clickthru"); + floatingX.classList.add("floating-cats-floating"); + floatingX.classList.add("floating-cats-floating-x"); + floatingX.hidden = !enabled; + cats.push(floatingX); + document.body.appendChild(floatingX); + + const floatingY = document.createElement("img"); + floatingY.classList.add("floating-cats-clickthru"); + floatingY.classList.add("floating-cats-floating-y"); + floatingY.alt = alt; + floatingY.src = browser.runtime.getURL(url); + floatingX.appendChild(floatingY); + } + + addCat("Spinning Marsey", "/marsey3d.webp"); + addCat("Spinning Bob", "/bobvibes.webp"); +} + +main(); diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..f34ad91 --- /dev/null +++ b/manifest.json @@ -0,0 +1,55 @@ +{ + "manifest_version": 2, + "name": "Floating cats", + "version": "0.1", + + "author": "Uko Kokņevičs", + "description": "Adds floating cats to all websites", + + "icons": { + "200": "/marsey3d.webp" + }, + + "background": { + "scripts": ["/bg.js"], + "service_worker": "/bg.js", + "persistent": false, + "type": "module" + }, + + "browser_action": { + "default_area": "navbar" + }, + + "browser_specific_settings": { + "gecko": { + "id": "floating-cats@enes.lv" + }, + "gecko_android": { + "id": "floating-cats@enes.lv" + } + }, + + "content_scripts": [{ + "css": ["/floating-cats.css"], + "matches": [""], + "match_about_blank": true, + "js": ["/floating-cats.js"], + "run_at": "document_end" + }], + + "options_ui": { + "browser_style": false, + "open_in_tab": true, + "page": "options/options.html" + }, + + "permissions": [ + "storage" + ], + + "web_accessible_resources": [ + "bobvibes.webp", + "marsey3d.webp" + ] +} diff --git a/marsey3d.webp b/marsey3d.webp new file mode 100644 index 0000000..22aed84 Binary files /dev/null and b/marsey3d.webp differ diff --git a/options/MPLUS1Code.ttf b/options/MPLUS1Code.ttf new file mode 100755 index 0000000..20505b4 Binary files /dev/null and b/options/MPLUS1Code.ttf differ diff --git a/options/MPLUS2.ttf b/options/MPLUS2.ttf new file mode 100755 index 0000000..c5ee434 Binary files /dev/null and b/options/MPLUS2.ttf differ diff --git a/options/normalize.css b/options/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/options/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/options/options.html b/options/options.html new file mode 100644 index 0000000..a45c527 --- /dev/null +++ b/options/options.html @@ -0,0 +1,42 @@ + + + + + Floating Cats Settings + + + + + + + + + + + + + +
+ +

Floating Cats Settings

+ +
+
+

+ Hello, these are the settings for Floating Cats :3 +

+
+
+ + +
+
+ Yeah that's it for now lol +
+
+
+ + + diff --git a/options/options.js b/options/options.js new file mode 100644 index 0000000..c2bacd5 --- /dev/null +++ b/options/options.js @@ -0,0 +1,11 @@ +if (typeof(browser) == "undefined") { + globalThis.browser = chrome; +} + +const enableCheckbox = document.getElementById("enable"); +enableCheckbox.checked = (await browser.storage.sync.get("enabled")).enabled; +enableCheckbox.addEventListener("change", async () => { + await browser.storage.sync.set({ + enabled: enableCheckbox.checked, + }); +}); diff --git a/options/style.css b/options/style.css new file mode 100644 index 0000000..90ad300 --- /dev/null +++ b/options/style.css @@ -0,0 +1,231 @@ +:root { + color-scheme: dark light; + + --primary-hue: 192; + --secondary-hue: 41; + --saturation: 100%; + --lightness: 25%; + + --primary: hsl(var(--primary-hue), var(--saturation), var(--lightness)); + --secondary: hsl(var(--secondary-hue), var(--saturation), var(--lightness)); +} + +@font-face { + font-family: "M PLUS 2"; + font-display: swap; + src: url("MPLUS2.ttf"), local("M PLUS 2"); +} + +@font-face { + font-family: "M PLUS 1 Code"; + font-display: swap; + src: url("MPLUS1Code.ttf"), local("M PLUS 1 Code"); +} + +html { + height: 100%; + width: 100%; + font-family: "M PLUS 2", sans-serif; + line-height: 120%; + text-rendering: optimizeLegibility; +} + +h1 { + font-size: 150%; + line-height: 110%; +} + +h2 { + font-size: 115%; +} + +h3 { + font-size: 100%; +} + +b { + color: hsl(var(--secondary-hue), var(--saturation), 30%); +} + +u { + text-decoration-color: var(--secondary); +} + +pre, code { + font-family: "M PLUS 1 Code", monospace; + color: var(--secondary); + background-color: #eee; + border-radius: 4px; +} + +body { + background: hsl(var(--primary-hue), 10%, 99%); + display: grid; + grid-template-rows: auto 1fr auto; + height: 100%; + width: 100%; +} + +header { + display: flex; + flex-direction: row; + align-items: center; /* Vertical align */ + background: hsl(var(--secondary-hue), 10%, 74%); + margin-bottom: 1rem; + border-bottom: 1px solid black; + padding: 0.5rem 0; + + font-size: 125%; + line-height: 150%; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +header * { + margin: 0.1rem 0.25rem auto; +} + +header > * { + display: flex; + align-items: center; +} + +header > .left { + justify-content: left; +} + +header > .fill { + flex: 1; +} + +header > .right { + justify-content: right; +} + +header p { + margin: 0; +} + +body > header svg, +body > header img { + margin: 0.1rem; + height: 2.5rem; + width: 2.5rem; +} + +footer { + display: flex; + background: hsl(var(--primary-hue), 10%, 94%); + flex-direction: column; + justify-content: center; + text-align: center; + font-height: 80%; + padding: 0.5rem; + border-top: 1px solid black; +} + +#banners img { + height: 1.5rem; +} + +a { + color: var(--secondary); + text-decoration: none; +} + +a:hover { + color: var(--primary); + background-color: #eee; + border-radius: 4px; +} + +a:visited { + color: var(--primary); +} + +#banners a, +header a, +header a:visited { + color: currentcolor; +} + +#banners a:hover, +header a:hover { + background-color: transparent; + border-radius: 0; +} + +fieldset { + background: hsl(var(--primary-hue), 10%, 90%); + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +fieldset > * { + padding-right: 0.5rem; + border-right: 1px solid gray; + margin-right: 0.5rem; +} + +fieldset > :last-child { + padding-right: initial; + border-right: initial; + margin-right: initial; +} + +.field-row { + display: flex; + flex-direction: row; +} + +.field-row label { + margin-right: 1rem; +} + +@media (min-width: 1140px) { + body > main { + margin-left: 14rem; + margin-right: 4rem; + max-width: 52rem; + } +} + +@media (min-width: 800px) and (max-width: 1140px) { + body > main { + margin-left: 6rem; + margin-right: 4rem; + max-width: 52rem; + } +} + +@media (max-width: 800px) { + body > main { + margin-left: 1rem; + margin-right: 1rem; + } +} + +@media (prefers-color-scheme: dark) { + body { + background: hsl(var(--primary-hue), 10%, 17%); + } + + fieldset { + background: hsl(var(--primary-hue), 10%, 17%); + } + + header { + background: hsl(var(--secondary-hue), 10%, 12%); + } + + footer { + background: hsl(var(--primary-hue), 10%, 15%); + } + + b { + color: hsl(var(--secondary-hue), var(--saturation), 75%); + } +} -- cgit v1.2.3