Skip to content

Commit 7fe2934

Browse files
PythackPythack
committed
Merge branch 'custom_website' into main
2 parents 76594e9 + 67e17d1 commit 7fe2934

File tree

7 files changed

+125
-93
lines changed

7 files changed

+125
-93
lines changed

‎Selection_styler.zip‎

1.17 KB
Binary file not shown.

‎background.js‎

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
1-
function restoreOptions() {
2-
3-
function onError(error) {
4-
console.log(`Error: ${error}`);
5-
};
6-
7-
function setCurrentChoice(result) {
8-
if (result.shadowActivated) {
9-
var css = '::selection { background: ' + result.background_color + '; color: ' + result.color + '; text-shadow: ' + result.shadowColor + ' 0px 0px ' + result.shadowBlur + 'px}';
1+
function restoreOptions(sender) {
2+
function onError(error) {
3+
console.log(`Error:${error}`)
4+
};
5+
6+
function setCurrentChoice(sender, result) {
7+
if(result.shadowActivated) {
8+
var css = '::selection { background: ' + result.background_color + '; color: ' + result.color + '; text-shadow: ' + result.shadowColor + ' 0px 0px ' + result.shadowBlur + 'px}'
109
} else {
11-
var css = '::selection { background: ' + result.background_color + '; color: ' + result.color + '; text-shadow: }';
12-
}
13-
console.log(css);
14-
browser.tabs.insertCSS({code: css});
15-
};
16-
17-
let getting = browser.storage.local.get();
18-
getting.then(setCurrentChoice, onError);
19-
10+
var css = '::selection { background: ' + result.background_color + '; color: ' + result.color + '; text-shadow: none}'
11+
};
12+
browser.tabs.insertCSS({
13+
allFrames: true,
14+
code: css
15+
});
16+
var url = new URL(sender);
17+
url = url.host;
18+
result.customOptions.forEach(element => {
19+
if (element.url.includes(url)) {
20+
if(element.shadowActivated) {
21+
var css = '::selection { background: ' + element.background + '; color: ' + element.color + '; text-shadow: ' + element.shadowColor + ' 0px 0px ' + element.shadowBlur + 'px}'
22+
} else {
23+
var css = '::selection { background: ' + element.background + '; color: ' + element.color + '; text-shadow: none}'
24+
};
25+
browser.tabs.insertCSS({
26+
allFrames: true,
27+
code: css
28+
});
29+
};
30+
});
31+
};
32+
let getting = browser.storage.local.get();
33+
getting.then(setCurrentChoice.bind(null, sender), onError)
2034
};
21-
22-
2335
browser.runtime.onMessage.addListener((message) => {
24-
switch (message.request) {
25-
case "inject-css": restoreOptions();
26-
break;
27-
}
28-
})
36+
switch(message.request) {
37+
case "inject-css":
38+
restoreOptions(message.url);
39+
break
40+
};
41+
});
2942

3043
function onIconClicked() {
31-
browser.tabs.create({url: browser.extension.getURL('./popup.html')});
32-
}
33-
44+
browser.tabs.create({
45+
url: browser.extension.getURL('./popup.html')
46+
})
47+
};
3448
browser.browserAction.onClicked.addListener(onIconClicked);

‎injector.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var url = window.location.href;
2+
browser.runtime.sendMessage({request:"inject-css", url:url});

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"name": "Selection styler",
44
"author": "Pythack",
5-
"version": "1.2",
5+
"version": "1.2.3.7",
66
"description": "Change the color and background color of the selection",
77
"background": {
88
"scripts": ["./background.js"]

‎popup.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ input {
4747
background: #0060df;
4848
}
4949

50+
#url_div {
51+
display: none;
52+
}
53+
5054
p {
5155
width: 3cm;
5256
}
@@ -93,6 +97,10 @@ input[type="url"]:valid {
9397
display: none;
9498
}
9599

100+
#remove_custom {
101+
display: none;
102+
}
103+
96104
#save_btn {
97105
color: #ffffff;
98106
background: #0060df;

‎popup.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@
88
<body>
99
<h1 id="title">Selection customizer</h1>
1010
<form>
11+
<select class="" id="custom_select" name="">
12+
<option value="general">General</option>
13+
</select><button type="button" id="remove_custom">-</button><br/>
14+
<label>Url: </label><br/><input type="url" placeholder="www.google.com" id="add_url"><button type="button" id="add_custom">+</button><br/><br/>
1115
<!--<label>Url (optional): </label><br/><input type="url" placeholder="https://www.google.com/" id="url"><br/><br/>-->
16+
<hr/>
17+
<div id="url_div"><label>Url: </label><br/><input type="url" placeholder="white" id="change_url"><br/><br/></div>
1218
<label>Color: </label><br/><input type="text" placeholder="white" id="color"> <input id="color-picker-textColor" type="color"><br/><br/>
1319
<label>Background color: </label><br/><input type="text" placeholder="#007ef3" id="background_color"> <input id="color-picker-backgroundColor" type="color"><br/><br/>
1420
<input id="activate_textShadow" name="activate_textShadow" type="checkbox"><label for="activate_textShadow">Activate text shadow </label><br/><br/>

‎popup.js‎

Lines changed: 66 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,54 @@
1-
function saveSuccess(item) {
2-
browser.notifications.create("selesty-save-status", {type: 'basic', title: 'Selection styler: Saving success', message: "Preferences saved successfully. ", "iconUrl": browser.runtime.getURL("./icon.png")})
3-
setTimeout(function(){browser.notifications.clear("selesty-save-status");}, 5000);
4-
}
1+
function saveSuccess(item){browser.notifications.create("selesty-save-status",{type:'basic',title:'Selection styler: Saving success',message:"Preferences saved successfully. ","iconUrl":browser.runtime.getURL("./icon.png")});setTimeout(function(){browser.notifications.clear("selesty-save-status")},5000)};
2+
function saveError(item){browser.notifications.create("selesty-save-status",{type:'basic',title:'Selection styler: Saving error',message:"Error saving preferences","iconUrl":browser.runtime.getURL("./icon.png")});setTimeout(function(){browser.notifications.clear("selesty-save-status")},5000)};
53

6-
function saveError(item) {
7-
browser.notifications.create("selesty-save-status", {type: 'basic', title: 'Selection styler: Saving error', message: "Error saving preferences", "iconUrl": browser.runtime.getURL("./icon.png")})
8-
setTimeout(function(){browser.notifications.clear("selesty-save-status");}, 5000);
9-
}
4+
class Custom_option{constructor(url,background,color,shadowActivated,shadowColor,shadowBlur){this.url=url;this.color=color;this.background=background;this.shadowActivated=shadowActivated;this.shadowColor=shadowColor;this.shadowBlur=shadowBlur}};
105

11-
function saveOptions(e) {
12-
e.preventDefault();
13-
let preferencesSave = browser.storage.local.set({
14-
background_color: document.querySelector("#background_color").value || "#007ef3",
15-
color: document.querySelector("#color").value || "white",
16-
shadowActivated: document.querySelector("input#activate_textShadow").checked || false,
17-
shadowColor: document.querySelector("#shadow-color").value || "none",
18-
shadowBlur: document.querySelector("#shadow-blur").value || "0"
19-
//fontSize: document.querySelector("#font-size").value || "auto",
20-
});
21-
preferencesSave.then(saveSuccess, saveError)
22-
browser.runtime.sendMessage({
23-
request:"inject-css"
24-
});
25-
}
266

7+
function addCustom(){function continueCustom(result){var custom_url=document.querySelector("#add_url").value;var customSettings=new Custom_option(custom_url,document.querySelector("#background_color").value||"#007ef3",document.querySelector("#color").value||"white",document.querySelector("input#activate_textShadow").checked||false,document.querySelector("#shadow-color").value||"none",document.querySelector("#shadow-blur").value||"0");var customs=result.customOptions||[];customs.push(customSettings);browser.storage.local.set({customOptions:customs});var optionToAdd=document.createElement("option");optionToAdd.textContent=custom_url;optionToAdd.value=custom_url;var select=document.querySelector("#custom_select");select.appendChild(optionToAdd)};function onError(error){console.log(`Error:${error}`)};let getting=browser.storage.local.get();getting.then(continueCustom,onError)};function removeCustom(){function continueCustom(result){var selectIndex=document.querySelector("#custom_select").selectedIndex-1;var customs=result.customOptions;customs.splice(selectIndex,1);browser.storage.local.set({customOptions:customs});var optionToRemove=document.querySelector("#custom_select");optionToRemove.remove(document.querySelector("#custom_select").selectedIndex);var selectIndex=document.querySelector("#custom_select").selectedIndex;if(selectIndex!=0){document.querySelector("#url_div").style.display="block";document.querySelector("#url_div").value=document.querySelector("#custom_select").value;document.querySelector("#remove_custom").style.display="block"}else{document.querySelector("#url_div").style.display="none";document.querySelector("#remove_custom").style.display="none"}};function onError(error){console.log(`Error:${error}`)};let getting=browser.storage.local.get();getting.then(continueCustom,onError)};
8+
9+
function saveOptions(e) {
10+
e.preventDefault();
11+
var selectIndex = document.querySelector("#custom_select").selectedIndex;
12+
if(selectIndex == 0) {
13+
var preferencesSave = browser.storage.local.set({
14+
background_color: document.querySelector("#background_color").value || "#007ef3",
15+
color: document.querySelector("#color").value || "white",
16+
shadowActivated: document.querySelector("input#activate_textShadow").checked || false,
17+
shadowColor: document.querySelector("#shadow-color").value || "none",
18+
shadowBlur: document.querySelector("#shadow-blur").value || "0"
19+
});
20+
preferencesSave.then(saveSuccess, saveError);
21+
browser.runtime.sendMessage({
22+
request: "inject-css"
23+
})
24+
} else {
25+
function continueCustom(result) {
26+
var selectIndex = document.querySelector("#custom_select").selectedIndex - 1;
27+
var customs = result.customOptions;
28+
customs[selectIndex] = {
29+
background: document.querySelector("#background_color").value || "#007ef3",
30+
color: document.querySelector("#color").value || "white",
31+
shadowActivated: document.querySelector("input#activate_textShadow").checked || false,
32+
shadowColor: document.querySelector("#shadow-color").value || "none",
33+
shadowBlur: document.querySelector("#shadow-blur").value || "0",
34+
url: document.querySelector("#change_url").value || "auto"
35+
};
36+
var preferencesSave = browser.storage.local.set({
37+
customOptions: customs
38+
});
39+
preferencesSave.then(saveSuccess, saveError);
40+
browser.runtime.sendMessage({
41+
request: "inject-css"
42+
})
43+
};
44+
45+
function onError(error) {
46+
console.log(`Error:${error}`)
47+
};
48+
let getting = browser.storage.local.get();
49+
getting.then(continueCustom, onError)
50+
}
51+
};
2752
function updatePreview() {
2853
document.querySelector("#preview").style.background = document.querySelector("#background_color").value;
2954
document.querySelector("#preview").style.color = document.querySelector("#color").value;
@@ -32,7 +57,7 @@ function updatePreview() {
3257
} else {
3358
document.querySelector("#preview").style.textShadow = "";
3459
}
35-
}
60+
};
3661

3762
function restoreOptions() {
3863

@@ -48,11 +73,18 @@ function restoreOptions() {
4873
if (result.shadowActivated) {
4974
document.querySelector('div#textSadowOptions').style.display = "block";
5075
}
51-
}
76+
result.customOptions.forEach(element => {
77+
var option = document.createElement("option");
78+
option.textContent = element.url;
79+
option.value = element.url;
80+
var select = document.querySelector("#custom_select");
81+
select.appendChild(option);
82+
});
83+
};
5284

5385
function onError(error) {
5486
console.log(`Error: ${error}`);
55-
}
87+
};
5688

5789
function updatePreview() {
5890
document.querySelector("#preview").style.background = document.querySelector("#background_color").value;
@@ -62,58 +94,28 @@ function restoreOptions() {
6294
} else {
6395
document.querySelector("#preview").style.textShadow = "";
6496
}
65-
}
97+
};
6698

6799
let getting = browser.storage.local.get();
68100
getting.then(setCurrentChoice, onError);
69101
updatePreview();
70-
}
71-
102+
};
72103

73-
function updateColorInput() {
74-
var color = document.querySelector("input#color-picker-textColor").value;
75-
document.querySelector("input#color").value = color;
76-
}
77104

78-
function updateBackgroundColorInput() {
79-
var color = document.querySelector("input#color-picker-backgroundColor").value;
80-
document.querySelector("input#background_color").value = color;
81-
}
105+
function updateColorInput(){var color=document.querySelector("input#color-picker-textColor").value;document.querySelector("input#color").value=color};function updateBackgroundColorInput(){var color=document.querySelector("input#color-picker-backgroundColor").value;document.querySelector("input#background_color").value=color};function updateColorInputColor(){var color=document.querySelector("input#color").value;document.querySelector("input#color-picker-textColor").value=color};function updateBackgroundColorInputColor(){var color=document.querySelector("input#background_color").value;document.querySelector("input#color-picker-backgroundColor").value=color};function updateShadowColorInput(){var color=document.querySelector("input#color-picker-shadowColor").value;document.querySelector("input#shadow-color").value=color};function updateShadowColorInputColor(){var color=document.querySelector("input#shadow-color").value;document.querySelector("input#color-picker-shadowColor").value=color};function updateShadowColorDisplay(){if(document.querySelector("input#activate_textShadow").checked){document.querySelector('div#textSadowOptions').style.display="block"}else{document.querySelector('div#textSadowOptions').style.display="none"}};
82106

83-
function updateColorInputColor() {
84-
var color = document.querySelector("input#color").value;
85-
document.querySelector("input#color-picker-textColor").value = color;
86-
}
87-
88-
function updateBackgroundColorInputColor() {
89-
var color = document.querySelector("input#background_color").value;
90-
document.querySelector("input#color-picker-backgroundColor").value = color;
91-
}
92-
93-
function updateShadowColorInput() {
94-
var color = document.querySelector("input#color-picker-shadowColor").value;
95-
document.querySelector("input#shadow-color").value = color;
96-
}
97-
98-
function updateShadowColorInputColor() {
99-
var color = document.querySelector("input#shadow-color").value;
100-
document.querySelector("input#color-picker-shadowColor").value = color;
101-
}
102-
103-
function updateShadowColorDisplay() {
104-
if (document.querySelector("input#activate_textShadow").checked) {
105-
document.querySelector('div#textSadowOptions').style.display = "block";
106-
} else {
107-
document.querySelector('div#textSadowOptions').style.display = "none";
108-
}
109-
}
107+
function changeCustomDisplay(){var selectIndex=document.querySelector("#custom_select").selectedIndex;if(selectIndex!=0){document.querySelector("#url_div").style.display="block";document.querySelector("#change_url").value=document.querySelector("#custom_select").value;document.querySelector("#remove_custom").style.display="block";function setCurrentChoice(result){var customs=result.customOptions;document.querySelector("#background_color").value=customs[selectIndex-1].background||"#007ef3";document.querySelector("#color-picker-backgroundColor").value=customs[selectIndex-1].background||"#007ef3";document.querySelector("#color").value=customs[selectIndex-1].color||"white";document.querySelector("#color-picker-textColor").value=customs[selectIndex-1].color||"#ffffff";document.querySelector("#shadow-color").value=customs[selectIndex-1].shadowColor||"#ffffff";document.querySelector("input#color-picker-shadowColor").value=customs[selectIndex-1].shadowColor;document.querySelector("#shadow-blur").value=customs[selectIndex-1].shadowBlur||"0px";document.querySelector("input#activate_textShadow").checked=customs[selectIndex-1].shadowActivated;if(result.shadowActivated){document.querySelector('div#textSadowOptions').style.display="block"}};function onError(error){console.log(`Error:${error}`)};let getting=browser.storage.local.get();getting.then(setCurrentChoice,onError)}else{document.querySelector("#url_div").style.display="none";document.querySelector("#remove_custom").style.display="none";function setCurrentChoice(result){document.querySelector("#background_color").value=result.background_color||"#007ef3";document.querySelector("#color-picker-backgroundColor").value=result.background_color||"#007ef3";document.querySelector("#color").value=result.color||"white";document.querySelector("#color-picker-textColor").value=result.color||"#ffffff";document.querySelector("#shadow-color").value=result.shadowColor||"#ffffff";document.querySelector("input#color-picker-shadowColor").value=result.shadowColor;document.querySelector("#shadow-blur").value=result.shadowBlur||"0px";document.querySelector("input#activate_textShadow").checked=result.shadowActivated;if(result.shadowActivated){document.querySelector('div#textSadowOptions').style.display="block"}};function onError(error){console.log(`Error:${error}`)};let getting=browser.storage.local.get();getting.then(setCurrentChoice,onError)}};
110108

111109
document.addEventListener("DOMContentLoaded", restoreOptions);
112110
document.addEventListener("DOMContentLoaded", updatePreview);
113111
document.querySelector("form").addEventListener("submit", saveOptions);
114112
document.querySelector("form").addEventListener("keyup", updatePreview);
115113
document.querySelector("form").addEventListener("input", updatePreview);
114+
document.querySelector("#add_custom").addEventListener("click", addCustom);
115+
document.querySelector("#remove_custom").addEventListener("click", removeCustom);
116116
document.querySelector("input#activate_textShadow").addEventListener("change", updatePreview);
117+
document.querySelector("select#custom_select").addEventListener("change", changeCustomDisplay);
118+
document.querySelector("select#custom_select").addEventListener("change", updatePreview);
117119
document.querySelector("input#color-picker-textColor").addEventListener("input", updateColorInput);
118120
document.querySelector("input#color-picker-backgroundColor").addEventListener("input", updateBackgroundColorInput);
119121
document.querySelector("input#color").addEventListener("input", updateColorInputColor);

0 commit comments

Comments
 (0)