ryanamay/pint
1
0
Fork 0
mirror of https://github.com/ryanamay/pint.git synced 2024-09-20 01:50:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: basic functionality

Browse source
This commit is contained in:
nafunii 2022-01-10 11:26:26 +08:00
parent 7265de5006
commit fded1aa0e0
No known key found for this signature in database
GPG key ID: 0A82862EF6000AE3
8 changed files with 97 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
background.js
View file

@ -1,6 +1,28 @@
let accent1 = "#ff0000";
const filter = {
url: [{
urlMatches: 'https://*.google.com/*',
}, ],
};
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({
a1: accent1
});
})
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['styles/accentify.css']
files: ['popup.js']
});
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
chrome.scripting.executeScript({
target: { tabId: tabId },
files: ['onload.js']
});
});

6
index.js
View file

@ -1,6 +0,0 @@
var r = document.querySelector(':root');
document.querySelector(".getColor").addEventListener("click", function() {
var color = this.value;
r.style.setProperty("--color-calendar-graph-day-L3-bg", color);
})

9
manifest.json
View file

@ -23,16 +23,19 @@
},
"host_permissions": [
"https://www.github.com/"
"https://*.github.com/"
],
"content_scripts": [{
"run_at": "document_end",
"matches": ["https://*.github.com/*"],
"css": ["styles/accentify.css"]
"js": ["onload.js"]
}],
"permissions": [
"activeTab"
"storage",
"scripting",
"tabs"
],
"background": {
"service_worker": "background.js"

15
onload.js Normal file
View file

@ -0,0 +1,15 @@
chrome.storage.sync.get('a1', ({ a1 }) => {
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important");
document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important");
document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important");
document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important");
for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) {
document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important");
}
});

11
popup.html
View file

@ -13,7 +13,6 @@
<!-- My Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/accentify.css">
<title>GitHub Accentify</title>
</head>
@ -27,12 +26,14 @@
</div>
</div>
<div>
<label class="inb">Select Your Accent Color:</label>
<input class="getColor" type="color" name="accent-color" id="accent">
<form>
<label class="inb">Select Your Accent Color:</label>
<input class="getColor" type="color" name="accent-color" id="accent">
</form>
</div>
<!-- Bootstrap Scripts -->
<script src="index.js"></script>
<!-- Scripts -->
<script src="popup.js"></script>
</body>
</html>

38
popup.js Normal file
View file

@ -0,0 +1,38 @@
let changeColor = document.getElementById("accent");
chrome.storage.sync.get("a1", ({ a1 }) => {
changeColor.value = a1;
});
changeColor.addEventListener("change", async() => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
var accent1 = changeColor.value;
chrome.storage.sync.set({ a1: accent1 }, () => {
alert("Color set to " + accent1);
});
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setAccent,
});
})
function setAccent() {
chrome.storage.sync.get('a1', ({ a1 }) => {
document.querySelector('.Progress-item.rounded-2').style.setProperty('background-color', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important");
document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important");
document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important");
document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important");
document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important");
document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important");
for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) {
document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important");
}
});
}

18
styles/accentify.css
View file

@ -1,18 +0,0 @@
:root {
--color-calendar-graph-day-L1-bg: rgba(236, 150, 222, 0.438) !important;
--color-calendar-graph-day-L2-bg: rgba(236, 150, 222, 0.63) !important;
--color-calendar-graph-day-L3-bg: rgba(236, 150, 222, 0.884) !important;
--color-calendar-graph-day-L4-bg: #ec96deff !important;
--color-accent-emphasis: #ec96deff !important;
--color-btn-primary-bg: #ec96deff !important;
--color-btn-primary-hover-bg: #ec96deff !important;
}
.Progress-item.rounded-2 {
background-color: var(--color-calendar-graph-day-L4-bg) !important;
}
.js-highlight-blob {
fill: var(--color-calendar-graph-day-L2-bg) !important;
stroke: var(--color-calendar-graph-day-L3-bg) !important;
}

9
styles/styles.css
View file

@ -27,3 +27,12 @@ h1 {
.inb {
display: inline-block;
}
.getColor {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}