Skip to content

Commit 788a779

Browse files
arakilian0arakilian0
committed
Create new version of project - different vision
1 parent cb8fd18 commit 788a779

File tree

4 files changed

+155
-1
lines changed

4 files changed

+155
-1
lines changed

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"manifest_version": 2,
55
"description": "...",
66
"browser_action": {
7-
"default_popup": "src/index.html"
7+
"default_popup": "src/index2.html"
88
},
99
"permissions": [
1010
"activeTab",

‎src/index2.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@500&display=swap">
11+
<script defer src="main.js"></script>
12+
</head>
13+
<body>
14+
<header>
15+
<a>SnipX</a>
16+
<div>
17+
<span id="state_button" class="material-icons">...</span>
18+
<span id="theme_button" class="material-icons">...</span>
19+
<span id="settings_button" class="material-icons">account_circle</span>
20+
</div>
21+
</header>
22+
23+
<section id="editor_page">
24+
<h1>Editor</h1>
25+
</section>
26+
27+
<section id="settings_page">
28+
<h1>Settings</h1>
29+
</section>
30+
31+
</body>
32+
</html>

‎src/main.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// Header Menu Icons/Buttons
2+
const stateButton = document.getElementById('state_button')
3+
const themeButton = document.getElementById('theme_button')
4+
const settingsButton = document.getElementById('settings_button')
5+
6+
// Snipx Pages
7+
const editorPage = document.getElementById('editor_page')
8+
const settingsPage = document.getElementById('settings_page')
9+
10+
// Create localStorage key/value if not there already
11+
let defaultStorage = {
12+
SnipxTheme: 'dark',
13+
SnipxIsActive: 'true',
14+
SnipxPage: 'editor',
15+
SnipxEditor: 'css',
16+
SnipxEditorRender: 'true',
17+
SnipxEditorLock: 'false'
18+
}
19+
20+
// Get only the domain name of the activeTab's URL
21+
chrome.tabs.query({
22+
active: true,
23+
currentWindow: true
24+
}, ([currentTab]) => {
25+
let array = currentTab.url.split('')
26+
let newArray = []
27+
let slashCount = 0
28+
for(let i = 0; i <= array.length; i++) {
29+
newArray.push(array[i])
30+
if(array[i] === '/') slashCount++
31+
if(slashCount === 3) break
32+
}
33+
let currentTabURL = newArray.join('')
34+
currentTabURL = currentTabURL.substr(0, currentTabURL.length - 1)
35+
// Insert URL directly into localStorage
36+
localStorage.setItem('SnipxTabURL', currentTabURL)
37+
})
38+
39+
// Set localStorage defaultStorage values
40+
Object.entries(defaultStorage).forEach(([key, value]) => {
41+
if(!localStorage.getItem(key)) localStorage.setItem(key, value)
42+
})
43+
44+
// Load UI using values in localStorage
45+
window.addEventListener('load', (e) => {
46+
// Update STATE render
47+
if(localStorage.getItem('SnipxIsActive') === 'true') {
48+
stateButton.innerText = 'toggle_on'
49+
}
50+
if(localStorage.getItem('SnipxIsActive') === 'false') {
51+
stateButton.innerText = 'toggle_off'
52+
}
53+
// Update THEME render
54+
if(localStorage.getItem('SnipxTheme') === 'dark') {
55+
// Display light mode icon
56+
themeButton.innerText = 'light_mode'
57+
// Load dark mode theme
58+
}
59+
if(localStorage.getItem('SnipxTheme') === 'light') {
60+
// Display dark mode icon
61+
themeButton.innerText = 'dark_mode'
62+
// Load light mode theme
63+
}
64+
// Update SECTION render
65+
if(localStorage.getItem('SnipxPage') === 'editor') {
66+
editorPage.style.display = 'flex'
67+
}
68+
if(localStorage.getItem('SnipxPage') === 'settings') {
69+
settingsPage.style.display = 'flex'
70+
}
71+
72+
}, false)

‎src/style.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* Simple reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-size: inherit;
7+
font-weight: inherit;
8+
font-family: inherit;
9+
text-decoration: none;
10+
color: inherit;
11+
background: inherit;
12+
list-style-type: none;
13+
}
14+
15+
/* Custom properties */
16+
:root {
17+
--width: 480px;
18+
--height: 580px;
19+
20+
--color-dark1: green;
21+
}
22+
23+
/* Main Styles */
24+
body {
25+
width: var(--width);
26+
height: var(--height);
27+
background: var(--color-dark1);
28+
}
29+
30+
/* Header */
31+
header, header div {
32+
display: flex;
33+
align-items: center;
34+
}
35+
header {
36+
background: yellow;
37+
justify-content: space-between;
38+
}
39+
header a {
40+
font-size: 20px;
41+
color: red;
42+
}
43+
header div {
44+
justify-content: center;
45+
}
46+
47+
/* Sections */
48+
section {
49+
display: none;
50+
}

0 commit comments

Comments
 (0)