-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #794 from Winter262005/main
Adding Relaxio Chrome extension project
- Loading branch information
Showing
15 changed files
with
280 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
I have created a Chrome extension which works on all Chromium-based browsers for stress relief when coding. | ||
<hr> | ||
<h2>Features:</h2> | ||
|
||
- Motivational Quotes on a single click, | ||
- Meow! button which fetches random funny cat photographs and GIFs, | ||
- A simple number guesser game and | ||
- A custom tailormade collection of LoFi beats for concentration. | ||
<hr> | ||
This Chrome extension works using the Manifest feature of chromium browsers, Html, CSS and JavaScript, and using various APIs (Quotable for quotes, TheCatApi for cat images, Music from FreeSoundLibrary). | ||
<hr> | ||
|
||
<h2>How to Run?</h2> | ||
|
||
- Download as zip file | ||
- In your browser extensions page, enable 'Developer Mode' | ||
- Click on the 'Load Unpacked" button and select this zip file. | ||
- Enjoy! | ||
<hr> | ||
Made by Winter262005 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
This folder contains the audio for music player. | ||
credits: FreeSoundLibrary |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
// background.js | ||
let player = new Audio(); | ||
let tracks = ['audio/alb.mp3','audio/cbm.mp3','audio/clp.mp3','audio/fls.mp3','audio/lbf.mp3','audio/lgb.wav','audio/dft.mp3','audio/ssf.mp3','audio/ghf.mp3','audio/mgl.mp3']; // replace with your tracks | ||
let currentTrackIndex = 0; | ||
let repeat = false; // Repeat flag | ||
|
||
player.addEventListener('ended', () => { | ||
if (repeat) { | ||
player.currentTime = 0; | ||
player.play(); | ||
} else { | ||
nextTrack(); | ||
} | ||
}); | ||
|
||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { | ||
if (request.command === 'togglePlay') { | ||
if (player.paused) { | ||
player.play(); | ||
} else { | ||
player.pause(); | ||
} | ||
} else if (request.command === 'prev') { | ||
prevTrack(); | ||
} else if (request.command === 'next') { | ||
nextTrack(); | ||
} else if (request.command === 'toggleRepeat') { | ||
repeat = !repeat; // Toggle repeat flag | ||
} | ||
}); | ||
|
||
|
||
function nextTrack() { | ||
currentTrackIndex = (currentTrackIndex + 1) % tracks.length; | ||
player.src = tracks[currentTrackIndex]; | ||
player.load(); // Load the new source | ||
player.play(); | ||
} | ||
|
||
function prevTrack() { | ||
currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length; | ||
player.src = tracks[currentTrackIndex]; | ||
player.load(); // Load the new source | ||
player.play(); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
This folder contains all the icons. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"manifest_version": 2, | ||
"name": "RELAXIO", | ||
"version": "1.0", | ||
"description": "Made by Winter262005. An extension for stress relief and timepass.", | ||
"browser_action": { | ||
"default_popup": "popup.html", | ||
"default_title": "RELAXIO" | ||
}, | ||
"background": { | ||
"scripts": ["background.js"] | ||
}, | ||
"permissions": ["tabs"], | ||
"icons": { | ||
"16": "images/icon16.png", | ||
"48": "images/icon48.png", | ||
"128": "images/icon128.png" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<link rel="stylesheet" type="text/css" href="styles.css"> | ||
<!-- Add Bootstrap Icons --> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> | ||
</head> | ||
<body> | ||
<h1 id="title">RELAXIO</h1> | ||
<hr> | ||
<button id="quoteButton">Motivate Me</button> | ||
<h2 id="quote"></h2> | ||
<hr> | ||
<button id="imageButton">Meow! 😸</button> | ||
<img id="image" width="200" height="200"> | ||
<hr> | ||
<h3>Guess the Number Game</h3> | ||
<p>Guess a number between 1 and 10:</p> | ||
<input id="guess" type="number" min="1" max="10"> | ||
<div id="gameButtons"> | ||
<button id="guessButton">Guess</button> | ||
<button id="resetButton">Reset</button> | ||
</div> | ||
<p id="gameResult"></p> | ||
<hr> | ||
<h3>Relaxing Music</h3> | ||
<div id="audioButtons"> | ||
<button id="prevButton"><i class="bi bi-skip-backward-fill"></i></button> | ||
<button id="playButton"><i class="bi bi-play-fill"></i></button> | ||
<button id="nextButton"><i class="bi bi-skip-forward-fill"></i></button> | ||
<button id="repeatButton"><i class="bi bi-arrow-repeat"></i></button> <!-- Repeat button --> | ||
</div> | ||
<script src="popup.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
// popup.js | ||
document.getElementById('quoteButton').addEventListener('click', fetchQuote); | ||
document.getElementById('imageButton').addEventListener('click', fetchImage); | ||
document.getElementById('guessButton').addEventListener('click', playGame); | ||
document.getElementById('resetButton').addEventListener('click', resetGame); | ||
|
||
let secretNumber = Math.floor(Math.random() * 10) + 1; | ||
|
||
async function fetchQuote() { | ||
const response = await fetch('https://api.quotable.io/random'); | ||
const data = await response.json(); | ||
document.getElementById('quote').textContent = data.content; | ||
} | ||
|
||
async function fetchImage() { | ||
const response = await fetch('https://api.thecatapi.com/v1/images/search'); | ||
const data = await response.json(); | ||
document.getElementById('image').src = data[0].url; | ||
} | ||
|
||
function playGame() { | ||
const guess = document.getElementById('guess').value; | ||
if (!guess || guess < 1 || guess > 10) { | ||
document.getElementById('gameResult').textContent = 'Please enter a number between 1 and 10.'; | ||
return; | ||
} | ||
if (guess == secretNumber) { | ||
document.getElementById('gameResult').textContent = 'Congratulations! You guessed the number!'; | ||
secretNumber = Math.floor(Math.random() * 10) + 1; // Generate a new random number after a correct guess | ||
} else if (guess > secretNumber) { | ||
document.getElementById('gameResult').textContent = 'Too high, try again.'; | ||
} else { | ||
document.getElementById('gameResult').textContent = 'Too low, try again.'; | ||
} | ||
} | ||
|
||
|
||
function resetGame() { | ||
document.getElementById('guess').value = ''; | ||
document.getElementById('gameResult').textContent = ''; | ||
} | ||
|
||
document.getElementById('playButton').addEventListener('click', () => { | ||
chrome.runtime.sendMessage({command: 'togglePlay'}); | ||
}); | ||
|
||
document.getElementById('prevButton').addEventListener('click', () => { | ||
chrome.runtime.sendMessage({command: 'prev'}); | ||
}); | ||
|
||
document.getElementById('nextButton').addEventListener('click', () => { | ||
chrome.runtime.sendMessage({command: 'next'}); | ||
}); | ||
|
||
document.getElementById('repeatButton').addEventListener('click', () => { | ||
chrome.runtime.sendMessage({command: 'toggleRepeat'}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap'); | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap'); | ||
|
||
body { | ||
font-family: 'Roboto Mono', monospace; | ||
padding: 10px; | ||
background: linear-gradient(270deg, #000000, #6D018B); | ||
background-size: 200% 200%; | ||
animation: Gradient 3s ease infinite; | ||
color: #fff; | ||
width: 300px; | ||
display: flex; | ||
flex-direction: column; | ||
gap: 10px; | ||
overflow: auto; | ||
align-items: center; | ||
animation: bodyFadeIn 1s; | ||
} | ||
|
||
button { | ||
padding: 5px 10px; | ||
font-size: 16px; | ||
font-family: 'Roboto Mono', monospace; | ||
border: 2px solid #4CAF50; | ||
background-color: transparent; | ||
color: #4CAF50; | ||
border-radius: 5px; | ||
cursor: pointer; | ||
transition: background-color 0.3s ease, color 0.3s ease; | ||
} | ||
|
||
button:hover { | ||
border: 2px solid #45a049; | ||
background-color: #45a049; | ||
color: white; | ||
} | ||
|
||
h1 { | ||
color: #fff; | ||
text-align: center; | ||
margin: 0; | ||
font-size: 6em; | ||
font-family: 'Honk', cursive; | ||
} | ||
|
||
h2, h3 { | ||
color: #fff; | ||
text-align: center; | ||
margin: 0; | ||
font-size: 1.5em; | ||
} | ||
|
||
hr { | ||
border: none; | ||
border-top: 1px solid #fff; | ||
width: 80%; | ||
margin: 20px auto; | ||
} | ||
|
||
img { | ||
border: none; | ||
transition: transform 0.3s ease; | ||
} | ||
|
||
img:hover { | ||
transform: scale(1.1); | ||
} | ||
|
||
#gameButtons, #audioButtons { | ||
display: flex; | ||
justify-content: center; | ||
gap: 10px; | ||
} | ||
|
||
/* Minimalistic Scrollbar */ | ||
::-webkit-scrollbar { | ||
width: 10px; | ||
} | ||
|
||
::-webkit-scrollbar-track { | ||
background: #f1f1f1; | ||
} | ||
|
||
::-webkit-scrollbar-thumb { | ||
background: #888; | ||
} | ||
|
||
::-webkit-scrollbar-thumb:hover { | ||
background: #555; | ||
} | ||
|
||
@keyframes Gradient { | ||
0% { background-position: 0% 50%; } | ||
50% { background-position: 100% 50%; } | ||
100% { background-position: 0% 50%; } | ||
} | ||
|
||
@keyframes bodyFadeIn { | ||
from { opacity: 0; } | ||
to { opacity: 1; } | ||
} |