Skip to content

Commit

Permalink
added feature of changin background to any image of internet
Browse files Browse the repository at this point in the history
  • Loading branch information
MoriorInvictus committed Sep 25, 2022
1 parent 7524f80 commit 80492d4
Show file tree
Hide file tree
Showing 10 changed files with 236 additions and 54 deletions.
28 changes: 28 additions & 0 deletions assets/css/features/changebg/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

.change-bg-video{

width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 8;

}

.change-bg-video iframe{

width: 100%;
height: 100%;

}



#app *:not(.change-bg-video){

z-index: 10;

}


62 changes: 45 additions & 17 deletions assets/js/background.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,55 @@

socket_tasks = {
'updateLocalStorage': updateStorage,
'getItemFromLocalStorate': getFromStorage
};

async function sendMessageToActiveTab(messageArgs, callback) {
let queryOptions = { active: true, currentWindow: true };
let tab = await chrome.tabs.query(queryOptions);
chrome.tabs.sendMessage(tab[0].id, messageArgs, callback);

return true;

}


function updateStorage(data){
if(data){
for (const [key, value] of Object.entries(data)) {
localStorage.setItem(key, value);
}

}

return false;
}
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(async function(msg) {
if (msg.task in socket_tasks){
rslt = await socket_tasks[msg.task](...msg.args);
port.postMessage({result: rslt, task: msg.task});
}
});
})

function getFromStorage(storageElement){
if(storageElement){
return localStorage.getItem(storageElement);
}
return false;

const convertImageToBase64Image = async (url) => {
const data = await fetch(url)
const blob = await data.blob();
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = async () => {
const base64data = await reader.result;
return await sendMessageToActiveTab({ task: 'handleBgChanging', args: [base64data] }, _ => {console.log('must to update')})
}
}


















socket_tasks = {
'convertImageToBase64': convertImageToBase64Image,
};
20 changes: 2 additions & 18 deletions assets/js/content_script.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ socket_tasks = {
'resetFont': handleResetFont,
'updateGlobalFontSize': handleGlobalFontSizeChanging,
'handleChatFontSizeChanging': handleChatFontSizeChanging,
'handleBgChanging': handleBgChange,
'handleResetBg': handleResetBg,
};


Expand All @@ -71,24 +73,6 @@ chrome.runtime.onMessage.addListener(function(request,sender,sendResponse) {
});


function updateStorage(data){
if(data){
for (const [key, value] of Object.entries(data)) {
localStorage.setItem(key, value);
}

}

return false;
}

function getFromStorage(storageElement){
if(storageElement){
return localStorage.getItem(storageElement);
}
return false;
}


function updateGlobalFontSize() {

Expand Down
51 changes: 51 additions & 0 deletions assets/js/features/changebg/injected__bg-change.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@


function handleBgChange(imageUrl){

updateStorage({
'voxiomBgImage': imageUrl
})
updateHomePageBg();


}


function handleResetBg(base64Image){

updateStorage({
'voxiomBgImage': base64Image
})

updateHomePageBg();

}



function updateHomePageBg() {
bgImageFromCache = getFromStorage('voxiomBgImage');

if(bgImageFromCache === undefined) return false;

bgImageChangeStyles = {

"background": `url(${bgImageFromCache}) no-repeat center !important`,
"background-size": `cover !important`
};


objectToTagStyles('.bNczYf', bgImageChangeStyles);
}

updateHomePageBg();










6 changes: 6 additions & 0 deletions assets/js/features/changebg/popup__bg-change.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

async function convertImage(imgUrl){
base64Image = await port.postMessage({ task: 'convertImageToBase64', args: [imgUrl] });
return base64Image;

}
53 changes: 38 additions & 15 deletions assets/js/pop_up.js

Large diffs are not rendered by default.

21 changes: 20 additions & 1 deletion assets/js/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -320,4 +320,23 @@ async function sendMessageToActiveTab(messageArgs, callback) {

return true;

}
}


function updateStorage(data){
if(data){
for (const [key, value] of Object.entries(data)) {
localStorage.setItem(key, value);
}

}

return false;
}

function getFromStorage(storageElement){
if(storageElement){
return localStorage.getItem(storageElement);
}
return false;
}
Binary file removed icon-32.png
Binary file not shown.
16 changes: 13 additions & 3 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,27 +1,37 @@
{
"name": "Voxiom Community Updater",
"description": "Voxiom Community Updater",
"version": "0.0.5",
"version": "0.0.6",
"manifest_version": 3,
"permissions": ["declarativeContent", "browsingData", "tabs", "scripting", "storage"],
"host_permissions": ["*://*.voxiom.io/*"],
"host_permissions": ["*://*/*"],
"content_scripts": [
{
"run_at": "document_end",
"matches": ["*://*.voxiom.io/*"],
"js": [
"assets/js/utils.js",
"assets/js/features/changebg/injected__bg-change.js",
"assets/js/features/changebg/popup__bg-change.js",
"assets/js/content_script.js"
],
"css": [
"assets/css/features/changebg/main.css"
]
}
],
"web_accessible_resources": [{
"resources": ["assets/js/content_script.js"],
"resources": [
"assets/js/content_script.js"
],
"matches": ["*://*.voxiom.io/*"]
}],
"externally_connectable": {
"matches": ["*://*.voxiom.io/*"]
},
"background": {
"service_worker": "assets/js/background.js"
},
"action": {
"default_title": "Voxiom Community Updater",
"default_icon": "assets/icons/favicon-32x32.png",
Expand Down
33 changes: 33 additions & 0 deletions popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@
<div class="voxiom__window-content">
<div class="voxiom__switches">

<div class="voxiom__switch toggle-element with-delay" data-toggle_element="changebg" data-toggle_clear=".voxiom__window">
<div class="voxiom__switch-title">Change Home Page Background</div>
<label class="switch">
<input type="checkbox">
<span class="toggle-slider"></span>
</label>
</div>


<div class="voxiom__switch toggle-element with-delay" data-toggle_element="font-family-window" data-toggle_clear=".voxiom__window">
<div class="voxiom__switch-title">Change Font</div>
<label class="switch">
Expand Down Expand Up @@ -55,6 +64,29 @@

</div>

<div class="voxiom__window changebg">
<div class="voxiom__window-title">Change Home Page Background</div>
<div class="voxiom__window-subtitle">Choose any image and copy it link.</div>
<div class="voxiom__window-content">
<div class="font-url">
<input type="text" id="bgimageurl" placeholder="Choose any image and copy it link." class="def-input" value="">
</div>
<div class="voxiom__controls">
<button class="voxiom__control-btn accept-btn" id="change-bg">
<svg id="Layer_1" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m23.707 16.325a1 1 0 0 0 -1.414 0l-5.627 5.628-2.688-2.653a1 1 0 0 0 -1.435 1.4l2.744 2.7a1.876 1.876 0 0 0 1.345.6h.033a1.873 1.873 0 0 0 1.335-.553l5.707-5.708a1 1 0 0 0 0-1.414z"/><path d="m11.09 21.959a10 10 0 1 1 10.91-9.959c0 .307-.015.611-.041.911a1 1 0 0 0 .907 1.089.989.989 0 0 0 1.085-.907c.032-.363.049-.726.049-1.093a12 12 0 1 0 -13.09 11.951h.091a1 1 0 0 0 .089-2z"/><path d="m11 7v4.586l-2.707 2.707a1 1 0 1 0 1.414 1.414l3-3a1 1 0 0 0 .293-.707v-5a1 1 0 0 0 -2 0z"/></svg>
</button>

<button class="voxiom__control-btn clear-btn"> <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M16,8a1,1,0,0,0-1.414,0L12,10.586,9.414,8A1,1,0,0,0,8,9.414L10.586,12,8,14.586A1,1,0,0,0,9.414,16L12,13.414,14.586,16A1,1,0,0,0,16,14.586L13.414,12,16,9.414A1,1,0,0,0,16,8Z"/><path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z"/></svg> </button>

<button class="voxiom__control-btn reset-btn" id="resetBgBtn"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.806 513.806" style="enable-background:new 0 0 513.806 513.806;" xml:space="preserve" width="512" height="512"> <g> <path d="M66.074,228.731C81.577,123.379,179.549,50.542,284.901,66.045c35.944,5.289,69.662,20.626,97.27,44.244l-24.853,24.853 c-8.33,8.332-8.328,21.84,0.005,30.17c3.999,3.998,9.423,6.245,15.078,6.246h97.835c11.782,0,21.333-9.551,21.333-21.333V52.39 c-0.003-11.782-9.556-21.331-21.338-21.329c-5.655,0.001-11.079,2.248-15.078,6.246L427.418,65.04 C321.658-29.235,159.497-19.925,65.222,85.835c-33.399,37.467-55.073,83.909-62.337,133.573 c-2.864,17.607,9.087,34.202,26.693,37.066c1.586,0.258,3.188,0.397,4.795,0.417C50.481,256.717,64.002,244.706,66.074,228.731z"/> <path d="M479.429,256.891c-16.108,0.174-29.629,12.185-31.701,28.16C432.225,390.403,334.253,463.24,228.901,447.738 c-35.944-5.289-69.662-20.626-97.27-44.244l24.853-24.853c8.33-8.332,8.328-21.84-0.005-30.17 c-3.999-3.998-9.423-6.245-15.078-6.246H43.568c-11.782,0-21.333,9.551-21.333,21.333v97.835 c0.003,11.782,9.556,21.331,21.338,21.329c5.655-0.001,11.079-2.248,15.078-6.246l27.733-27.733 c105.735,94.285,267.884,85.004,362.17-20.732c33.417-37.475,55.101-83.933,62.363-133.615 c2.876-17.605-9.064-34.208-26.668-37.084C482.655,257.051,481.044,256.91,479.429,256.891z"/> </g></svg> </button>

<button class="voxiom__control-btn back-btn toggle-element disable-switch" data-toggle_element="base-window" data-toggle_clear=".voxiom__window"> <svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M10.482,19.5a1.5,1.5,0,0,1-1.06-.439L4.836,14.475a3.505,3.505,0,0,1,0-4.95L9.422,4.939a1.5,1.5,0,0,1,2.121,2.122L6.957,11.646a.5.5,0,0,0,0,.708l4.586,4.585A1.5,1.5,0,0,1,10.482,19.5Z"/><path d="M17.482,19.5a1.5,1.5,0,0,1-1.06-.439l-6-6a1.5,1.5,0,0,1,0-2.122l6-6a1.5,1.5,0,1,1,2.121,2.122L13.6,12l4.939,4.939A1.5,1.5,0,0,1,17.482,19.5Z"/></svg> </button>

</div>
</div>

</div>

<div class="voxiom__window font-family-window">
<div class="voxiom__window-title">Voxiom Font Changer</div>
<a href="https://fonts.google.com" target="_blank" class="voxiom__window-subtitle">Click to choose fonts</a>
Expand Down Expand Up @@ -113,6 +145,7 @@

</div>
<script src="/assets/js/utils.js"></script>
<script src="assets/js/features/changebg/popup__bg-change.js"></script>
<script src="/assets/js/pop_up.js"></script>
</body>
</html>
Expand Down

0 comments on commit 80492d4

Please sign in to comment.