Our prvacy policy's summary is that we don't abuse any user's information. This application will send a message on every webpage changed to our app's background js file from local storage which popup javascript saved. The message is kind of a flag for choosing one of our themes. Popup javascript file send message to background to order execute javascript files to decorate with themes. With each theme executed javascript file will use client's mouse x, y position when moving mouse pointer.
+
+ When users moving mouse pointer on every webpage, client.x and client.y are collected for the time decorated div tag on the web page.
+ We collect users email for polls, saving user's options and etc.
+ Client.x and client.y are saved to put decorated div tag on mouse pointer's position. After the div tag delted then client.x, y data also are deleted.
+ When user's logging in with extensions then emails are sent to our web server, which check user's options and send them to the extension. The option information is used in our extension.
+ Client.x and y are only saved for decorated div alive on current web page.
+ Emails are saved in our web server till user's account is deleted.
+ We may change this policy on github page and when we change policy then we will notice below:
+ https://github.com/jacobkim9881/tailing-mouse-footprint/releases/
+
+
+
diff --git a/functions/atom.js b/functions/atom.js
new file mode 100644
index 0000000..448ab01
--- /dev/null
+++ b/functions/atom.js
@@ -0,0 +1,310 @@
+//test.js
+
+function getObj() {
+ let obj = document.createElement('div');
+ obj.id = 'test-obj';
+ obj.style.width = 60 + 'px';
+ obj.style.height = 45 + 'px';
+ document.body.appendChild(obj);
+
+ let obj1 = document.createElement('div');
+ obj1.id = 'test-obj1';
+ obj1.style.width = 70 + 'px';
+ obj1.style.height = 50 + 'px';
+ document.body.appendChild(obj1);
+
+ let obj2 = document.createElement('div');
+ obj2.id = 'test-obj2';
+ obj2.style.width = 70 + 'px';
+ obj2.style.height = 50 + 'px';
+ document.body.appendChild(obj2);
+
+ let nuc1 = document.createElement('div');
+ nuc1.id = 'test-nuc1';
+ nuc1.style.width = 10 + 'px';
+ nuc1.style.height = 10 + 'px';
+ document.body.appendChild(nuc1);
+
+ let nuc2 = document.createElement('div');
+ nuc2.id = 'test-nuc2';
+ nuc2.style.width = 10 + 'px';
+ nuc2.style.height = 10 + 'px';
+ document.body.appendChild(nuc2);
+
+ let nuc3 = document.createElement('div');
+ nuc3.id = 'test-nuc3';
+ nuc3.style.width = 10 + 'px';
+ nuc3.style.height = 10 + 'px';
+ document.body.appendChild(nuc3);
+
+ let nuc4 = document.createElement('div');
+ nuc4.id = 'test-nuc4';
+ nuc4.style.width = 10 + 'px';
+ nuc4.style.height = 10 + 'px';
+ document.body.appendChild(nuc4);
+
+
+
+ let sub = document.createElement('div');
+ sub.id = 'test-sub';
+ sub.style.width = 10 + 'px';
+ sub.style.height = 10 + 'px';
+ document.body.appendChild(sub);
+
+ let sub1 = document.createElement('div');
+ sub1.id = 'test-sub1';
+ sub1.style.width = 10 + 'px';
+ sub1.style.height = 10 + 'px';
+ document.body.appendChild(sub1);
+
+ let sub2 = document.createElement('div');
+ sub2.id = 'test-sub2';
+ sub2.style.width = 10 + 'px';
+ sub2.style.height = 10 + 'px';
+ document.body.appendChild(sub2);
+
+ localStorage.mouseEventOn = false;
+ localStorage.mouseLazy = true;
+
+ obj.style.display = 'block';
+ obj1.style.display = 'block';
+ obj2.style.display = 'block';
+
+ sub.style.display = 'block';
+ sub1.style.display = 'block';
+ sub2.style.display = 'block';
+ // sub.style.display = 'none';
+// sub1.style.display = 'none';
+// sub2.style.display = 'none';
+// return obj;
+}
+getObj();
+
+function ballStyle(ball) {
+ ball.style.position = 'fixed';
+ ball.style.borderRadius = '50%';
+ // ball.style.border = '1px solid black';
+ ball.style.boxShadow = '0px 0px 2px 1px #d37e04';
+ ball.style.zIndex = '1';
+ ball.style.backgroundImage = `linear-gradient(to bottom right, hsl(170, 100%, 50%), hsl(170, 100%, 0%)`;
+}
+
+function orbitStyle(orbit) {
+ orbit.style.position = 'fixed';
+ orbit.style.borderRadius = '50%';
+ orbit.style.border = '1px solid red';
+ orbit.style.zIndex = '1';
+ // orbit.style.backgroundImage = `linear-gradient(to bottom right, hsl(170, 100%, 50%), hsl(170, 100%, 0%)`;
+ orbit.style.borderRadius = '50%';
+}
+
+function mouseEvent(e) {
+// object for styling
+ let obj = document.getElementById('test-obj');
+ let obj1 = document.getElementById('test-obj1');
+ let obj2 = document.getElementById('test-obj2');
+
+ let nuc1 = document.getElementById('test-nuc1');
+ let nuc2 = document.getElementById('test-nuc2');
+ let nuc3 = document.getElementById('test-nuc3');
+ let nuc4 = document.getElementById('test-nuc4');
+
+ let sub = document.getElementById('test-sub');
+ let sub1 = document.getElementById('test-sub1');
+ let sub2 = document.getElementById('test-sub2');
+
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+
+ obj.style.display = 'block';
+ obj1.style.display = 'block';
+ obj2.style.display = 'block';
+
+ sub.style.display = 'block';
+ sub1.style.display = 'block';
+ sub2.style.display = 'block';
+
+
+ let num0 = num % 315 / 10;
+ let wid = 30;
+ let hei = 10;
+ let farX = -30;
+ let farY = -30;
+ let num1 = (num + 60)% 252 / 20;
+ let x1 = Math.sin(num1 - 45) * wid;
+ let y1 = Math.cos(num1 + 45) * (wid);
+ let rad = Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2));
+
+ x = Math.sin(num1 + 45) * wid;
+ y = Math.cos(num1 - 45) * (wid);
+
+ let num2 = (num + 120) % 315 / 10;
+ let x2 = Math.sin(num2) * hei;
+ let y2 = Math.cos(num2) * wid;
+
+ sub.style.top = (e.clientY -farX) + x + 'px';
+ sub.style.left = (e.clientX - farY) + y + 'px';
+ sub.style.transform = `translateZ(${num0}deg)`
+
+ sub1.style.top = (e.clientY -farX) + x1 + 'px';
+ sub1.style.left = (e.clientX - farY) + y1 + 'px';
+ sub1.style.transform = `translateZ(${num1}deg)`
+
+ sub2.style.top = (e.clientY -farY) + x2 + 'px';
+ sub2.style.left = (e.clientX - farX) + y2 + 'px';
+ sub2.style.transform = `translateZ(${num2}deg)`
+
+ ballStyle(sub);
+ ballStyle(sub1);
+ ballStyle(sub2);
+
+ obj.style.top = (e.clientY + 13) + 'px';
+ obj.style.left = (e.clientX + 5) + 'px';
+ obj.style.transform = 'rotateX(60deg)';
+
+ obj1.style.top = (e.clientY + 10) + 'px';
+ obj1.style.left = (e.clientX ) + 'px';
+ obj1.style.transform = 'rotate(45deg) rotateX(60deg)';
+
+ obj2.style.top = (e.clientY + 10) + 'px';
+ obj2.style.left = (e.clientX + 2) + 'px';
+ obj2.style.transform = 'rotate(-45deg) rotateX(60deg)';
+
+ orbitStyle(obj);
+ orbitStyle(obj1);
+ orbitStyle(obj2);
+
+ localStorage.xMousePos = e.clientX;
+ localStorage.yMousePos = e.clientY;
+
+ function turnonEvent() {
+ new Promise((resolve, reject) => {
+ setTimeout(() => {
+ localStorage.mouseLazy = true;
+ localStorage.mouseEventOn = false;
+ // console.log('3 sec');
+ resolve();
+ }, 3000)
+ })
+ ;
+
+ }
+ if (localStorage.mouseEventOn == 'false' && localStorage.mouseLazy === 'true') {
+ // console.log('false');
+ turnonEvent()
+ localStorage.mouseLazy = false;
+ }
+ return;
+}
+
+function lazyEvent(clientX, clientY) {
+ clientX = parseInt(clientX);
+ clientY = parseInt(clientY);
+ // object for styling
+ let obj = document.getElementById('test-obj');
+ let obj1 = document.getElementById('test-obj1');
+ let obj2 = document.getElementById('test-obj2');
+
+ let nuc1 = document.getElementById('test-nuc1');
+ let nuc2 = document.getElementById('test-nuc2');
+ let nuc3 = document.getElementById('test-nuc3');
+ let nuc4 = document.getElementById('test-nuc4');
+
+ let sub = document.getElementById('test-sub');
+ let sub1 = document.getElementById('test-sub1');
+ let sub2 = document.getElementById('test-sub2');
+
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+
+ let num0 = num % 315 / 10;
+ let wid = 30;
+ let hei = 10;
+ let farX = -30;
+ let farY = -30;
+ let num1 = (num + 60)% 252 / 20;
+ let x1 = Math.sin(num1 - 45) * wid;
+ let y1 = Math.cos(num1 + 45) * (wid);
+ let rad = Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2));
+
+ x = Math.sin(num1 + 45) * wid;
+ y = Math.cos(num1 - 45) * (wid);
+
+ let num2 = (num + 120) % 315 / 10;
+ let x2 = Math.sin(num2) * hei;
+ let y2 = Math.cos(num2) * wid;
+ sub.style.top = (clientY -farX) + x + 'px';
+ sub.style.left = (clientX - farY) + y + 'px';
+ sub.style.transform = `translateZ(${num0}deg)`
+
+ sub1.style.top = (clientY -farX) + x1 + 'px';
+ sub1.style.left = (clientX - farY) + y1 + 'px';
+ sub1.style.transform = `translateZ(${num1}deg)`
+
+ sub2.style.top = (clientY -farY) + x2 + 'px';
+ sub2.style.left = (clientX - farX) + y2 + 'px';
+ sub2.style.transform = `translateZ(${num2}deg)`
+
+ ballStyle(sub);
+ ballStyle(sub1);
+ ballStyle(sub2);
+
+ obj.style.top = (clientY + 13) + 'px';
+ obj.style.left = (clientX + 5) + 'px';
+ obj.style.transform = 'rotateX(60deg)';
+
+ obj1.style.top = (clientY + 10) + 'px';
+ obj1.style.left = (clientX ) + 'px';
+ obj1.style.transform = 'rotate(45deg) rotateX(60deg)';
+
+ obj2.style.top = (clientY + 10) + 'px';
+ obj2.style.left = (clientX + 2) + 'px';
+ obj2.style.transform = 'rotate(-45deg) rotateX(60deg)';
+
+ orbitStyle(obj);
+ orbitStyle(obj1);
+ orbitStyle(obj2);
+
+ return;
+}
+
+function displayToggleObj(stat) {
+ let obj = document.getElementById('test-obj');
+ let obj1 = document.getElementById('test-obj1');
+ let obj2 = document.getElementById('test-obj2');
+
+ let nuc1 = document.getElementById('test-nuc1');
+ let nuc2 = document.getElementById('test-nuc2');
+ let nuc3 = document.getElementById('test-nuc3');
+ let nuc4 = document.getElementById('test-nuc4');
+
+ let sub = document.getElementById('test-sub');
+ let sub1 = document.getElementById('test-sub1');
+ let sub2 = document.getElementById('test-sub2');
+
+ obj.style.display = stat;
+ obj1.style.display = stat;
+ obj2.style.display = stat;
+
+ sub.style.display = stat;
+ sub1.style.display = stat;
+ sub2.style.display = stat;
+}
+
+function numCount() {
+ setInterval(() => {
+ if(localStorage.mouseLazy == 'true') {
+ lazyEvent(localStorage.xMousePos, localStorage.yMousePos);
+ } else {
+ }
+ },50)
+}
+
+numCount()
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent);
+ displayToggleObj('none');
+});
+
diff --git a/functions/baseFunction.js b/functions/baseFunction.js
new file mode 100644
index 0000000..f9a3a40
--- /dev/null
+++ b/functions/baseFunction.js
@@ -0,0 +1,12 @@
+//baseFunction.js
+//Add mouse events for decorating
+
+function mouseEvent(e) {
+ return;
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/bubble.js b/functions/bubble.js
new file mode 100644
index 0000000..7cc3c8c
--- /dev/null
+++ b/functions/bubble.js
@@ -0,0 +1,34 @@
+//bubble.js
+function mouseEvent(e) {
+ let obj = document.createElement('div');
+
+ let ran10 = Math.trunc(Math.random() * 10) + 5;
+ let ranXpos = Math.trunc(Math.random() * ran10) + parseInt(e.clientX, 10);
+ let ranYpos = Math.trunc(Math.random() * -10 - 10) + parseInt(e.clientY, 10);
+ let ran20 = ranYpos - 30;
+ obj.style.position = 'fixed';
+ obj.style.backgroundImage = `linear-gradient(to bottom right, hsl(170, 100%, 50%), hsl(170, 100%, 0%)`;
+ obj.style.borderRadius = '50%';
+ obj.animate([
+ {top: ranYpos + 'px',
+ left: e.clientX + 'px',
+ width: 5 + 'px',
+ height: 5 + 'px'
+ },
+ {top: ran20 + 'px',
+ left: ranXpos + 'px',
+ width: ran10 + 'px',
+ height: ran10 + 'px'
+ }
+ ], 200)
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 200);
+ return;
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/bunny.js b/functions/bunny.js
new file mode 100644
index 0000000..0c89dc3
--- /dev/null
+++ b/functions/bunny.js
@@ -0,0 +1,536 @@
+//bunny.js
+localStorage.mouseObjArr = ['face', 'eye1', 'eye2',
+ 'ear1', 'ear2', 'ear3', 'ear4',
+ 'mouth', 'mouth1', 'mouth2', 'mouth3', 'mouth4', 'mouth5', 'mouth6', 'mouth7',
+ 'tie', 'tie1', 'tie2',
+ 'blush', 'blush1',
+ 'emotion', 'emotion1', 'emotion2',
+ 'emotion3', 'emotion4', 'emotion5',
+ 'emotion6', 'emotion7', 'emotion8'];
+
+function createObjs() {
+ let grpDivs = document.createElement('div');
+ grpDivs.id = 'grpDivs'
+ let ids = localStorage.mouseObjArr.match(/[^,]\w+/gi);
+ for (let oneId in ids) {
+ let arr = document.createElement('div')
+ arr.id = ids[oneId];
+ grpDivs.appendChild(arr);
+ }
+ document.body.appendChild(grpDivs);
+}
+
+function deleteObjs() {
+ let ids = localStorage.mouseObjArr.match(/[^,]\w+/gi);
+ for (let oneId in ids) {
+ let ele = document.getElementById(ids[oneId]);
+ }
+
+}
+
+function objProto({element, position, left, top, width, height, borderRadius, zIndex, backgroundColor:{h,s,l}, transform}) {
+ element.style.position = position;
+ element.style.left = left + 'px';
+ element.style.top = top + 'px';
+ element.style.width = width + 'px';
+ element.style.height = height + 'px';
+ element.style.borderRadius = borderRadius;
+ element.style.zIndex = zIndex;
+ element.style.backgroundColor = `hsl(${h}, ${s}%, ${l}%)`;
+ element.style.transform = transform;
+
+}
+
+function getId(id) {
+ return document.getElementById(id);
+}
+
+function stylingFace() {
+ const config = {
+ element: getId('face'),
+ position: 'fixed',
+ left: 100,
+ top: 100,
+ width: 100,
+ height: 100,
+ borderRadius: 30 + 'px',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 85},
+ transform: 'none'
+
+ }
+ objProto(config);
+
+}
+
+function stylingEye({id, left}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 140,
+ width: 15,
+ height: 15,
+ borderRadius: 50 + 'px',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 0},
+ transform: 'none'
+ }
+ objProto(config);
+ getId(id).style.border = '2px solid black';
+
+}
+
+function stylingEar({id, left, skewness}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 5,
+ width: 50,
+ height: 100,
+ borderRadius: '',
+ zIndex: 0,
+ backgroundColor: {h: 0, s: 100, l: 85},
+ transform: `skew(${skewness}deg)`
+ }
+ objProto(config);
+ getId(id).animate([
+ {borderRadius: '100% 80% 50% 30%' },
+ {borderRadius: '100% 0% 0% 10%' },
+ {borderRadius: '100% 80% 50% 30%' }], {duration:1000, iterations: Infinity})
+
+}
+
+function stylingEarHole({id, left, skewness}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 35,
+ width: 20,
+ height: 60,
+ borderRadius: '100% 30% 50% 30%',
+ zIndex: 1,
+ backgroundColor: {h: 305, s: 100, l: 84},
+ transform: `skew(${skewness}deg)`
+ }
+ objProto(config);
+}
+
+function stylingMouth({id, left, rotate}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 180,
+ width: 10,
+ height: 10,
+ borderRadius: '',
+ zIndex: 2,
+ backgroundColor: '',
+ transform: `rotate(${rotate}deg)`
+ }
+ objProto(config);
+
+ getId(id).style.borderTop = `2px solid black`;
+ getId(id).style.borderLeft = `2px solid black`;
+
+}
+
+function stylingMouth1({id, left}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 170,
+ width: 10,
+ height: 10,
+ borderRadius: '',
+ zIndex: 1,
+ backgroundColor: '',
+ transform: ``
+ }
+ objProto(config);
+ getId(id).style.borderLeft = `2px solid black`;
+
+}
+
+function stylingMouth2({id, left, rotate}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 160,
+ width: 13,
+ height: 13,
+ borderRadius: '100% 30% 30% 100%',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 0},
+ transform: `rotate(${rotate}deg)`
+ }
+ objProto(config);
+ getId(id).style.borderTop = `2px solid black`;
+ getId(id).style.borderLeft = `2px solid black`;
+
+}
+
+function stylingMouth3({id, left, rotate}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 155,
+ width: 20,
+ height: 10,
+ borderRadius: '',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 85},
+ transform: `rotate(${rotate}deg)`
+ }
+ objProto(config);
+}
+
+function stylingSmile({id, left, top, width, height, skewness}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ borderRadius: '50%',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 50},
+ transform: `skewY(${skewness}deg)`
+ }
+ objProto(config);
+
+}
+
+function stylingTie({id, left, rotate}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 207,
+ width: 20,
+ height: 20,
+ borderRadius: '30%',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 0},
+ transform: `rotate(${rotate}deg)`
+ }
+ objProto(config);
+ getId(id).style.borderTop = `2px solid black`;
+ getId(id).style.borderLeft = `2px solid black`;
+
+}
+
+function stylingTie1({id, left, rotate}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 210,
+ width: 13,
+ height: 13,
+ borderRadius: '100%',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 0},
+ }
+ objProto(config);
+
+}
+
+function stylingBlush({id, left}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: 160,
+ width: 20,
+ height: 10,
+ borderRadius: '50%',
+ zIndex: 1,
+ backgroundColor: {h: 305, s: 100, l: 70},
+ }
+ objProto(config);
+
+}
+
+function stylingHeart({id, left, top, size, skewness}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: top,
+ width: size,
+ height: size,
+ borderRadius: '50%',
+ zIndex: 1,
+ backgroundColor: {h: 0, s: 100, l: 50},
+ transform: `skewY(${skewness}deg)`
+ }
+ objProto(config);
+
+}
+
+function addMusicNote({id, left, top}) {
+ const config = {
+ element: getId(id),
+ position: 'fixed',
+ left: left,
+ top: top,
+ width: '',
+ height: '',
+ borderRadius: '',
+ zIndex: 1,
+ backgroundColor: {h: '', s: '', l: ''},
+ transform: ''
+
+ }
+ objProto(config);
+
+ getId(id).innerText = '♪';
+ getId(id).style.fontWeight = 'bold';
+ getId(id).style.fontSize = (window.screen.width/30) + 'px'
+
+}
+
+function musicNoteAni() {
+ addMusicNote({id: 'emotion6' , left: 222, top: 100});
+ getId('emotion6').style.display = 'block';
+ setTimeout(() => {getId('emotion6').style.top = 20 + 'px';
+ getId('emotion6').style.left = 50 + 'px';
+ getId('emotion6').innerText = '♩'}, 200);
+
+}
+
+function sleepyEyes() {
+ getId('eye1').style.borderRadius = '0%';
+ getId('eye1').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+ getId('eye1').style.border = '3px solid black';
+ getId('eye1').style.borderTop = 'none';
+ getId('eye1').style.borderLeft = 'none';
+ getId('eye1').style.borderRight = 'none';
+ getId('eye1').style.left = 114 + 'px';
+ getId('eye2').style.borderRadius = '0%';
+ getId('eye2').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+ getId('eye2').style.border = '3px solid black';
+ getId('eye2').style.borderTop = 'none';
+ getId('eye2').style.borderRight = 'none';
+ getId('eye2').style.borderLeft = 'none';
+ getId('eye2').style.left = 172 + 'px';
+
+}
+
+function excitingEyes() {
+ getId('eye1').style.borderRadius = '0%';
+ getId('eye1').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+ getId('eye1').style.border = '3px solid black';
+ getId('eye1').style.borderBottom = 'none';
+ getId('eye1').style.borderLeft = 'none';
+ getId('eye1').style.transform = 'rotate(45deg)';
+ getId('eye1').style.left = 120 + 'px';
+ getId('eye2').style.borderRadius = '0%';
+ getId('eye2').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+ getId('eye2').style.border = '3px solid black';
+ getId('eye2').style.borderTop = 'none';
+ getId('eye2').style.borderRight = 'none';
+ getId('eye2').style.transform = 'rotate(45deg)';
+ getId('eye2').style.left = 175 + 'px';
+
+}
+
+function sighEmoj() {
+ stylingHeart({id: 'emotion7', left: 130, top: 190, size: 13, skewness: 0});
+ stylingHeart({id: 'emotion8', left: 120, top: 193, size: 20, skewness: 0});
+
+ getId('emotion7').style.backgroundColor = 'hsl(60, 25%, 75%)';
+ getId('emotion7').style.borderRadius = '0%';
+ getId('emotion7').style.zIndex = 1;
+ getId('emotion7').style.display = 'block';
+ getId('emotion7').style.transform = 'rotate(45deg)';
+
+ getId('emotion8').style.backgroundColor = 'hsl(60, 25%, 75%)';
+ getId('emotion8').style.borderRadius = '100%';
+ getId('emotion8').style.zIndex = 1;
+ getId('emotion8').style.display = 'block';
+
+ getId('emotion6').style.display = 'none';
+
+}
+
+function questionEmoj() {
+ addMusicNote({id: 'emotion6' , left: 222, top: 100});
+ getId('emotion6').style.display = 'block';
+ getId('emotion6').innerText = '?';
+
+}
+
+function heartEmoj(num) {
+ switch(num) {
+ case 1:
+ getId('emotion').style.display = 'block';
+ getId('emotion1').style.display = 'block';
+ getId('emotion2').style.display = 'none';
+ getId('emotion3').style.display = 'none';
+ getId('emotion4').style.display = 'none';
+ getId('emotion5').style.display = 'none';
+ break;
+ case 2:
+ getId('emotion').style.display = 'block';
+ getId('emotion1').style.display = 'block';
+ getId('emotion2').style.display = 'block';
+ getId('emotion3').style.display = 'block';
+ getId('emotion4').style.display = 'none';
+ getId('emotion5').style.display = 'none';
+ break;
+ case 3:
+ getId('emotion').style.display = 'block';
+ getId('emotion1').style.display = 'block';
+ getId('emotion2').style.display = 'block';
+ getId('emotion3').style.display = 'block';
+ getId('emotion4').style.display = 'block';
+ getId('emotion5').style.display = 'block';
+ break;
+ default:
+ getId('emotion').style.display = 'none';
+ getId('emotion1').style.display = 'none';
+ getId('emotion2').style.display = 'none';
+ getId('emotion3').style.display = 'none';
+ getId('emotion4').style.display = 'none';
+ getId('emotion5').style.display = 'none';
+ break;
+
+ }
+}
+
+function dragEndEvent(e) {
+ getId('mouth').style.backgroundColor = 'hsl(0, 100%, 50%)';
+
+}
+
+function dragEvent(e) {
+ stylingEye({id: 'eye1', left: 114});
+ stylingEye({id: 'eye2', left: 170});
+ getId('mouth').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+ questionEmoj();
+}
+
+function dblclickEvent(e) {
+ let none = null;
+ heartEmoj(none);
+
+ excitingEyes();
+
+ getId('mouth').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+
+ getId('emotion7').style.display = 'none';
+ getId('emotion8').style.display = 'none';
+
+ musicNoteAni();
+
+}
+
+function mousedownEvent(e) {
+ questionEmoj();
+
+ sleepyEyes();
+
+ getId('eye1').style.transform = 'rotate(0deg)';
+ getId('eye2').style.transform = 'rotate(0deg)';
+
+}
+
+function mouseupEvent(e) {
+ sleepyEyes();
+
+ getId('mouth').style.backgroundColor = 'hsl(0, 100%, 50%)';
+
+ sighEmoj();
+}
+
+function onScrollEvent(e) {
+ let typeOfEmoj = Math.ceil((window.scrollY% 300)/100);
+
+ getId('emotion6').style.display = 'none';
+
+ stylingHeart({id: 'emotion', left: 222, top: 150, size: 13, skewness: 25});
+ stylingHeart({id: 'emotion1', left: 227, top: 150, size: 13, skewness: -25});
+ stylingHeart({id: 'emotion2', left: 232, top: 120, size: 20, skewness: 25});
+ stylingHeart({id: 'emotion3', left: 239, top: 120, size: 20, skewness: -25});
+ stylingHeart({id: 'emotion4', left: 242, top: 85, size: 26, skewness: 25});
+ stylingHeart({id: 'emotion5', left: 251, top: 85, size: 26, skewness: -25});
+
+ heartEmoj(typeOfEmoj);
+}
+
+function mouseEvent(e) {
+
+ function trigger(e, moveX) {
+ let none = null;
+
+ heartEmoj(none);
+ getId('emotion7').style.display = 'none';
+ getId('emotion8').style.display = 'none';
+
+ stylingFace();
+ stylingEar({id: 'ear1', left: 80, skewness: 20});
+ stylingEar({id: 'ear2', left: 160, skewness: -20});
+ stylingEarHole({id: 'ear3', left: 171, skewness: -20});
+ stylingEarHole({id: 'ear4', left: 100, skewness: 20});
+ stylingEye({id: 'eye1', left: 114});
+ stylingEye({id: 'eye2', left: 170});
+ stylingMouth({id: 'mouth', left: 148, rotate: 45});
+ stylingMouth1({id: 'mouth1', left: 152});
+ stylingMouth2({id: 'mouth2', left: 147, rotate: 270});
+ stylingMouth3({id: 'mouth3', left: 145, rotate: 0});
+ stylingTie({id: 'tie', left: 129, rotate: 45});
+ stylingTie({id: 'tie1', left: 159, rotate: 45});
+ stylingTie1({id: 'tie2', left: 148});
+ stylingBlush({id: 'blush', left: 113});
+ stylingBlush({id: 'blush1', left: 171});
+
+ getId('eye1').style.left = (Math.sin(num/10) * 6 + 114) + 'px';
+ getId('eye2').style.left = (Math.sin(num/10) * 6 + 172) + 'px';
+ getId('mouth').style.backgroundColor = 'hsl(0, 0%, 0%, 0)';
+
+ return;
+ }
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+ trigger(e, 0);
+ getId('grpDivs').style.transform = 'scale(0.3, 0.3)'
+ getId('grpDivs').style.position = 'fixed';
+ getId('grpDivs').style.top = e.clientY + 'px';
+ getId('grpDivs').style.left = e.clientX + 'px';
+}
+
+//createObj
+createObjs();
+
+document.body.addEventListener('mousemove', mouseEvent);
+document.body.addEventListener('mousedown', mousedownEvent);
+document.body.addEventListener('mouseup', mouseupEvent);
+document.body.addEventListener('dblclick', dblclickEvent);
+document.body.addEventListener('drag', dragEvent);
+document.body.addEventListener('dragend', dragEndEvent);
+
+window.addEventListener('scroll', onScrollEvent);
+chrome.runtime.onMessage.addListener((msg) => {
+ if (msg.name === 'bunny') {
+ document.getElementById('grpDivs').style.display = 'block';
+ } else {
+ document.getElementById('grpDivs').style.display = 'none';
+ document.body.removeEventListener('mousemove', mouseEvent);
+ document.body.removeEventListener('mousedown', mousedownEvent);
+ document.body.removeEventListener('mouseup', mouseupEvent);
+ document.body.removeEventListener('scroll', onScrollEvent);
+ document.body.removeEventListener('dblclick', dblclickEvent);
+ document.body.removeEventListener('drag', dragEvent);
+ document.body.removeEventListener('dragend', dragEvent);
+
+ }
+});
diff --git a/functions/card.js b/functions/card.js
new file mode 100644
index 0000000..68e824c
--- /dev/null
+++ b/functions/card.js
@@ -0,0 +1,64 @@
+//card.js
+
+function getObj() {
+ let obj = document.createElement('div');
+ obj.id = 'card-obj-playing';
+ obj.style.width = 0 + 'px';
+ obj.style.height = 0 + 'px';
+ obj.style.fontFamily = 'sans-serif';
+ document.body.appendChild(obj);
+// return obj;
+}
+getObj();
+
+function mouseEvent(e) {
+// object for styling
+ let obj = document.getElementById('card-obj-playing');
+ let ran10 = Math.trunc(Math.random() * 10) + 5;
+ let ranXpos = Math.trunc(Math.random() * ran10) + parseInt(e.clientX, 10);
+ let ranYpos = Math.trunc(Math.random() * 10) + parseInt(e.clientY, 10);
+ let ran20 = ranYpos - 30;
+ let txtArr = ['♠','♥','♦','♣'];
+ let ran4 = Math.trunc(Math.random() * 4);
+ obj.style.fontSize = '20px';
+ obj.style.position = 'fixed';
+ obj.style.top = (e.clientY + 10) + 'px';
+ obj.style.left = (e.clientX + 10) + 'px';
+ obj.style.zIndex = '1';
+ obj.style.borderRadius = '50%';
+ //setTimeout(() => obj.remove(), 200);
+ return;
+}
+setInterval(() => {
+ let obj = document.getElementById('card-obj-playing');
+ let txtArr = ['♥','♠','♦','♣'];
+ let ran = Math.random();
+ let ran4 = Math.trunc(ran * 4);
+ let chance = 0.03;
+ let txtColor = ran4 % 2 === 0 ? 'red': 'black';
+ obj.style.color = txtColor;
+ obj.innerText = ran.toString()[2] + ran.toString()[3] === '03' ? '★' :txtArr[ran4];
+ }, 1500);
+function animateObj() {
+ let obj = document.getElementById('card-obj-playing');
+ obj.innerText = '♠';
+ obj.style.color = 'black';
+ obj.style.textIndent = '-10px';
+ obj.animate([
+ {transform: 'rotateY(90deg)'},
+ {transform: 'rotateY(270deg)'},
+ {transform: 'rotateY(90deg)'},
+ ], {
+ iterations: Infinity,
+ duration: 3000
+ })
+
+}
+animateObj();
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+document.body.removeEventListener('mousemove', mouseEvent)
+document.getElementById('card-obj-playing').remove();
+
+});
diff --git a/functions/colorfulBall.js b/functions/colorfulBall.js
new file mode 100644
index 0000000..6c693dc
--- /dev/null
+++ b/functions/colorfulBall.js
@@ -0,0 +1,48 @@
+//colofulBall.js
+
+function mouseEvent(e) {
+
+ function trigger(e) {
+ let obj = document.createElement('div');
+ let ballSize = window.innerWidth/100;
+ let randomBallSize = Math.trunc(Math.random() * ballSize) + 5;
+ let ranXpos = ballSize + parseInt(e.clientX, 10);
+ let ranYpos = ballSize + parseInt(e.clientY, 10);
+ let ranH = Math.trunc(Math.random() * 360);
+ let ranH2 = Math.trunc(Math.random() * 360);
+ obj.style.position = 'fixed';
+ obj.style.left = ranXpos + 'px';
+ obj.style.width = randomBallSize + 'px';
+ obj.style.height = randomBallSize + 'px';
+ obj.style.backgroundColor = `hsl(${ranH}, 100%, 50%)`;
+ obj.style.borderRadius = '50%';
+
+ obj.animate([
+ {top: (ranYpos + randomBallSize) + 'px',
+ backgroundColor: `hsl(${ranH}, 100%, 50%)` },
+ {top: (ranYpos - 10 )+ 'px'},
+ {top: (ranYpos + randomBallSize) + 'px'},
+ {top: ((ranYpos + 100 )+ randomBallSize) + 'px'},
+ {top: (ranYpos + 80) + 'px',
+ backgroundColor: `hsl(${ranH2}, 100%, 50%)` }
+ ], {duration: 800,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 700);
+ return;
+ }
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+ if (num % 4 === 0 ) {
+ trigger(e);
+ }
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/dna.js b/functions/dna.js
new file mode 100644
index 0000000..c8436fa
--- /dev/null
+++ b/functions/dna.js
@@ -0,0 +1,129 @@
+//dna.js
+
+function mouseEvent(e) {
+ let pxByScreenWidth = window.innerWidth/100;
+ let basicSize = 10;
+ let randomBallSize = Math.trunc(Math.random() * (pxByScreenWidth -15)) + basicSize;
+
+ function trigger(e, isItUp=true) {
+ let stick = document.createElement('div');
+ let xPos = pxByScreenWidth + parseInt(e.clientX, 10);
+ let yPos = pxByScreenWidth + parseInt(e.clientY, 10);
+ let ranH = Math.trunc(Math.random() * 360);
+ let ranH2 = Math.trunc(Math.random() * 360);
+
+ //stick between DNAs
+ let middleOfBall = randomBallSize/2 - window.innerWidth/800;
+ let stickWidth = window.innerWidth/400;
+ let pink = 336;
+ stick.style.position = 'fixed';
+ stick.style.left = xPos + middleOfBall + 'px';
+ stick.style.width = stickWidth + 'px';
+ stick.style.backgroundColor = `hsl(${pink}, 100%, 50%)`;
+
+ //This animation decides length of sticks between DNAs
+ //This condition with a DNA ball of two
+ //Sticks' lengths aren't exact to DNAs
+ if (isItUp) {
+ stick.animate([
+ {top: (yPos + randomBallSize) + 'px',
+ height: (30 - randomBallSize) + 'px',
+ backgroundColor: `hsl(${115}, 100%, 50%)`
+ },
+ {top: (yPos + 30 - randomBallSize) + 'px',
+ height: 0 + 'px'
+ },
+ {top: (yPos + randomBallSize) + 'px',
+ height: (29 - randomBallSize) + 'px'
+ },
+ {top: (yPos + 30 - randomBallSize) + 'px',
+ height: 0 + 'px',
+ backgroundColor: `hsl(${115}, 100%, 50%)`
+ }
+ ], {duration: 700,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+ }
+ //This condition with the other DNA ball of two
+ else {
+ stick.animate([
+ {top: (yPos + 30 - randomBallSize) + 'px',
+ height: 0 + 'px',
+ backgroundColor: `hsl(${336}, 100%, 50%)`
+ },
+ {top: (yPos + randomBallSize) + 'px',
+ height: (30 - randomBallSize) + 'px'
+ },
+ {top: (yPos + 30 - randomBallSize) + 'px',
+ height: 0 + 'px'
+ },
+ {top: (yPos + randomBallSize) + 'px',
+ height: (30 - randomBallSize) + 'px',
+ backgroundColor: `hsl(${336}, 100%, 50%)` }
+ ], {duration: 700,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+
+ }
+
+ let dnaBall = document.createElement('div');
+ dnaBall.style.position = 'fixed';
+ dnaBall.style.left = xPos + 'px';
+ dnaBall.style.width = randomBallSize + 'px';
+ dnaBall.style.height = randomBallSize + 'px';
+ dnaBall.style.backgroundColor = `hsl(${ranH}, 100%, 50%)`;
+ dnaBall.style.borderRadius = '50%';
+
+ //This if condition makes balls cross moving like waves
+ //This condition with a DNA of two
+ if (isItUp) {
+ dnaBall.animate([
+ {top: yPos + 'px',
+ backgroundColor: `hsl(${ranH}, 100%, 50%)` },
+ {top: (yPos + 30 ) + 'px'},
+ {top: yPos + 'px'},
+ {top: (yPos + 30)+ 'px',
+ backgroundColor: `hsl(${ranH2}, 100%, 50%)` }
+ ], {duration: 700,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+ }
+ //This condition with other DNA of two
+ else {
+ dnaBall.animate([
+ {top: (yPos + 30 ) + 'px',
+ backgroundColor: `hsl(${ranH}, 100%, 50%)`},
+ {top: yPos + 'px'},
+ {top: (yPos + 30)+ 'px'},
+ {top: yPos + 'px',
+ backgroundColor: `hsl(${ranH2}, 100%, 50%)` }
+ ], {duration: 700,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+
+ }
+
+ document.body.appendChild(dnaBall);
+ setTimeout(() => dnaBall.remove(), 690);
+ document.body.appendChild(stick);
+ setTimeout(() => stick.remove(), 690);
+ return;
+ }
+ //This decides number of objects by mousemove
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+ if (num % 2 === 0 ) {
+ trigger(e, true);
+ trigger(e, false);
+ }
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/float.js b/functions/float.js
new file mode 100644
index 0000000..833670f
--- /dev/null
+++ b/functions/float.js
@@ -0,0 +1,78 @@
+//colofulBall.js
+
+function mouseEvent(e) {
+//let ranH = num % 360;
+
+ function trigger(e) {
+ let obj = document.createElement('div');
+ let ballSize = window.innerWidth/100;
+ let randomBallSize = Math.trunc(Math.random() * ballSize);
+ let ranXpos = parseInt(e.clientX, 10);
+ let ranYpos = parseInt(e.clientY, 10);
+// let ranH = Math.trunc(Math.random() * 360);
+ obj.className = 'flubbers'
+ obj.style.position = 'fixed';
+ obj.style.left = ranXpos + 'px';
+ obj.style.width = ballSize + 'px';
+ obj.style.height = ballSize + 'px';
+ obj.style.backgroundColor = `hsl(${ranH}, 100%, 50%)`;
+ obj.style.borderRadius = '50%';
+obj.style.top= ranYpos + 'px';
+
+
+ obj.animate([
+ {top: (ranYpos * 0.96) + 'px',
+ transform: 'scale(1,1)',
+ width: (ballSize * 1.1) + 'px',
+ borderRadius: '70% 70% 50% 50%',
+ opacity: '1',
+ backgroundColor: `hsl(${ranH}, 100%, 50%)`},
+ {top: (ranYpos * 0.8 )+ 'px',
+ transform: 'scale(0.95, 0.95)',
+ width: (ballSize * 0.95) + 'px',
+ borderRadius: '50% 50% 50% 50%',
+ opacity: '1',
+
+ backgroundColor: `hsl(${ranH + 10}, 100%, 50%)`},
+ {top: (ranYpos * 0.6) + 'px',
+ transform: 'scale(1,1)',
+ width: (ballSize * 1.05) + 'px',
+ borderRadius: '60% 60% 50% 50%',
+ opacity: '0.8',
+
+ backgroundColor: `hsl(${ranH + 20}, 100%, 50%)`},
+ {top: (ranYpos * 0.3) + 'px',
+ transform: 'scale(0.95, 0.95)',
+ width: (ballSize * 1) + 'px',
+ borderRadius: '50% 50% 50% 50%',
+ opacity: '0.3',
+
+ backgroundColor: `hsl(${ranH + 30}, 100%, 50%)`},
+ ], 5000)
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 4900);
+ return;
+ }
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+ let ranH = num % 360;
+
+ if (num % 7 === 0 ) {
+ trigger(e);
+
+ }
+}
+
+function clickEvent() {
+let objs = document.getElementsByClassName('flubbers');
+console.log(objs[0].backgroundColor)
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+document.body.addEventListener('click', clickEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent);
+ document.body.removeEventListener('click', clickEvent);
+});
diff --git a/functions/heart.js b/functions/heart.js
new file mode 100644
index 0000000..36759f4
--- /dev/null
+++ b/functions/heart.js
@@ -0,0 +1,69 @@
+//snowflake.js
+
+function mouseEvent(e) {
+
+ function trigger(e, moveX) {
+ let mouseMoveCounter = localStorage.mouseCounter;
+ let halfHeart = document.createElement('div');
+ let ran7 = Math.trunc(Math.random() * 7);
+ let colorArr = ['#ff0000', '#ff7700', '#fbff00', '#08ff00', '#0011ff', '#5900ff', '#ff00e1'];
+ let randomColor = colorArr[ran7];
+ let ranXpos = Math.trunc(Math.random() * 15) + parseInt(e.clientX, 10);
+ let ranYpos = Math.trunc(Math.random() * 20) + parseInt(e.clientY, 10);
+ let ran10 = Math.trunc(Math.random() * 8) + window.innerWidth/200;
+ let ranYpos2 = ranYpos + ran10;
+ let secLeft = ranXpos + ran10/2;
+ halfHeart.style.position = 'fixed';
+ if (moveX === 1) {
+ halfHeart.style.left = - secLeft + 'px';
+ } else {
+ halfHeart.style.left = ranXpos + 'px';
+ }
+ halfHeart.style.width = ran10 + 'px';
+ halfHeart.style.height = ran10 + 'px';
+ halfHeart.style.backgroundColor = randomColor;
+ halfHeart.style.borderRadius = '50%';
+ halfHeart.style.transform = 'skewY(25deg)';
+
+ halfHeart.animate([
+ {top: ranYpos2 + 'px',
+ transform: 'skewY(25deg)'},
+ {top: ranYpos + 'px',
+ transform: 'skewY(30deg)'}
+ ], 500);
+
+ document.body.appendChild(halfHeart);
+ setTimeout(() => halfHeart.remove(), 490);
+
+ let OtherHalfHeart = document.createElement('div');
+ OtherHalfHeart.style.position = 'fixed';
+ OtherHalfHeart.style.left = secLeft + 'px';
+ OtherHalfHeart.style.width = ran10 + 'px';
+ OtherHalfHeart.style.height = ran10 + 'px';
+ OtherHalfHeart.style.backgroundColor = randomColor;
+ OtherHalfHeart.style.borderRadius = '50%';
+ OtherHalfHeart.style.transform = 'skewY(25deg)';
+
+ OtherHalfHeart.animate([
+ {top: ranYpos2 + 'px',
+ transform: 'skewY(-25deg)'},
+ {top: ranYpos + 'px',
+ transform: 'skewY(-30deg)'}
+
+ ], 500);
+
+ document.body.appendChild(OtherHalfHeart);
+ setTimeout(() => OtherHalfHeart.remove(), 490);
+
+ return;
+ }
+ if (new Date().getTime() % 13 === 0 ) {
+ trigger(e, 0);
+ }
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/letter.js b/functions/letter.js
new file mode 100644
index 0000000..3f346a4
--- /dev/null
+++ b/functions/letter.js
@@ -0,0 +1,30 @@
+//letter.js
+function mouseEvent(e) {
+ let alphabet = 'abcdefghijklmnopqrstuvwxyz'
+
+ let obj = document.createElement('div');
+ let ranXpos = Math.trunc(Math.random() * 10) + parseInt(e.clientX, 10);
+ let ranYpos = Math.trunc(Math.random() * 10) + parseInt(e.clientY, 10);
+ let ran15 = Math.trunc(Math.random() * 20) + 5;
+ let ranAlpha = Math.trunc(Math.random() * alphabet.length);
+ obj.style.position = 'fixed';
+ obj.style.top = ranYpos + 'px';
+ obj.style.left = ranXpos + 'px';
+ obj.innerText = alphabet[ranAlpha];
+ obj.style.fontSize = ran15 + 'px';
+
+ obj.animate([
+ {opacity: 1},
+ {opacity: 0}
+ ], 200)
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 200);
+ return;
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/petal.js b/functions/petal.js
new file mode 100644
index 0000000..487d903
--- /dev/null
+++ b/functions/petal.js
@@ -0,0 +1,126 @@
+//test.js
+
+function objAnimate(obj, e, randomBallSize, top, left) {
+ obj.animate([
+ {top: (e.clientY + top + randomBallSize * 1) + 'px',
+ left: (e.clientX + left + (randomBallSize*0)) + 'px',
+ opacity: 1},
+ {top: (e.clientY + top + randomBallSize * 1.3) + 'px',
+ left: (e.clientX + left + (randomBallSize*1.5)) + 'px',
+ opacity: 0.8},
+ {top: (e.clientY + top + randomBallSize * 1) + 'px',
+ left: (e.clientX + left + (randomBallSize*2)) + 'px',
+ opacity: 0.5},
+ {top: (e.clientY + top + randomBallSize * 1.3) + 'px',
+ left: (e.clientX + left + (randomBallSize*2.5)) + 'px',
+ opacity: 0.3},
+ {top: (e.clientY + top + randomBallSize * 1) + 'px',
+ left: (e.clientX + left + (randomBallSize*3)) + 'px',
+ opacity: 0}
+
+
+ ], {duration: 800,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+
+}
+
+function petal(e, top, left, upside = true, randomBallSize) {
+ let obj = document.createElement('div');
+ let ballSize = window.innerWidth/160;
+ obj.style.position = 'fixed';
+ obj.style.top = (e.clientY + top) + 'px';
+ obj.style.left = (e.clientX + left) + 'px';
+ obj.style.width = ballSize + 'px';
+ obj.style.height = ballSize + 'px';
+ obj.style.backgroundColor = `hsl(300, 60%, 80%)`;
+ obj.style.borderRadius = upside ? '50% 50%' : '50% 50%';
+obj.style.zIndex = '-2';
+// let randomBallSize = Math.trunc(Math.random() * ballSize) + 5;
+// randomBallSize = upside ? randomBallSize * -1 : randomBallSize * 1
+ obj.style.position = 'fixed';
+ objAnimate(obj, e, randomBallSize, top, left)
+/*
+ obj.animate([
+ {top: (e.clientY + top + randomBallSize) + 'px'},
+ {top: (e.clientY + top + (randomBallSize*1.3)) + 'px'},
+ {top: (e.clientY + top + (randomBallSize*1)) + 'px'}
+
+ ], {duration: 800,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+*/
+ return obj;
+}
+
+function center(e, randomBallSize) {
+ let obj = document.createElement('div');
+ let ballSize = window.innerWidth/200;
+// let randomBallSize = Math.trunc(Math.random() * ballSize) + 5;
+ obj.style.position = 'fixed';
+ obj.style.top = (e.clientY) + 'px';
+ obj.style.left = (e.clientX) + 'px';
+ obj.style.width = ballSize + 'px';
+ obj.style.height = ballSize + 'px';
+ obj.style.backgroundColor = `hsl(60, 100%, 50%)`;
+ obj.style.borderRadius = '50%';
+ obj.style.zIndex = '-1';
+ objAnimate(obj, e, randomBallSize, 0, 0)
+ return obj;
+}
+
+function objProtoType(e) {
+ let obj = document.createElement('div');
+ let ballSize = window.innerWidth/200;
+ let randomBallSize = Math.trunc(Math.random() * ballSize) + 5;
+ obj.style.position = 'fixed';
+ obj.appendChild(petal(e,(ballSize * 0.5),(ballSize * 0.5), true, randomBallSize));
+ obj.appendChild(petal(e,-(ballSize * 0.6),(ballSize * 0.5), false, randomBallSize));
+ obj.appendChild(petal(e,(ballSize * 0.5),-(ballSize * 0.6), false, randomBallSize));
+ obj.appendChild(petal(e,-(ballSize * 0.6),-(ballSize * 0.6), true, randomBallSize));
+
+ obj.appendChild(center(e, randomBallSize));
+
+ return obj;
+}
+
+function mouseEvent(e) {
+// object for styling
+ function trigger(e) {
+ let obj = objProtoType(e);
+ let ballSize = window.innerWidth/100;
+ let randomBallSize = Math.trunc(Math.random() * ballSize) + 5;
+ let ranXpos = ballSize + parseInt(e.clientX, 10);
+ let ranYpos = ballSize + parseInt(e.clientY, 10);
+ let ranH = Math.trunc(Math.random() * 360);
+ let ranH2 = Math.trunc(Math.random() * 360);
+ obj.style.left = 300 + 'px';
+ obj.animate([
+ {top: (ranYpos + randomBallSize) + 'px'},
+ {top: (ranYpos + (randomBallSize*1.3)) + 'px'},
+ {top: (ranYpos + (randomBallSize*1)) + 'px'}
+
+ ], {duration: 800,
+ timing(timeFraction) {
+ return 1 - Math.sin(Math.acos(timeFraction))}
+ })
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 700);
+ return;
+ }
+ let num = parseInt(localStorage.mouseCounter);
+ localStorage.mouseCounter = num + 1;
+ if (num % 10 === 0 ) {
+ trigger(e);
+ }
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+document.body.removeEventListener('mousemove', mouseEvent);
+
+});
diff --git a/functions/snowflake.js b/functions/snowflake.js
new file mode 100644
index 0000000..a3543e6
--- /dev/null
+++ b/functions/snowflake.js
@@ -0,0 +1,44 @@
+//snowflake.js
+
+function mouseEvent(e) {
+
+ function trigger(e, background) {
+ let obj = document.createElement('div');
+ let flakeSize = window.innerWidth/100;
+ obj.id = 'obj' + sec;
+ x = background ? Math.trunc(Math.random() * window.innerWidth) : e.clientX;
+ y = background ? 0 : e.clientY;
+ let bottomY = window.innerHeight - 30;
+ obj.style.position = 'fixed';
+ obj.style.width = flakeSize + 'px';
+ obj.style.height = flakeSize + 'px';
+ obj.style.borderRadius = '50%';
+ obj.style.backgroundImage = `radial-gradient(circle, hsl(0, 0%, 70%), hsl(0, 0%, 90%))`;
+ obj.style.left = x + 'px';
+ let fallingTime = background ? 16000 : 8000;
+
+ obj.animate([
+ {top: y + 'px'},
+ {top: bottomY + 'px'}
+ ], fallingTime);
+
+ document.body.appendChild(obj);
+ setTimeout(() => obj.remove(), 8000)
+ return;
+ }
+
+ let sec = new Date().getSeconds();
+ let id = document.getElementById('obj' + sec);
+ let ran2000 = Math.trunc(Math.random() * 2000);
+
+ if (id === null) {
+ trigger(e, 0);
+ setTimeout(() => trigger(e, 1), ran2000);
+ }
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/functions/stop.js b/functions/stop.js
new file mode 100644
index 0000000..5f241bb
--- /dev/null
+++ b/functions/stop.js
@@ -0,0 +1,11 @@
+//stop.js
+
+function mouseEvent(e) {
+ return;
+}
+
+document.body.addEventListener('mousemove', mouseEvent);
+
+chrome.runtime.onMessage.addListener((msg) => {
+ document.body.removeEventListener('mousemove', mouseEvent)
+});
diff --git a/images/atom/atom32.png b/images/atom/atom32.png
new file mode 100644
index 0000000..469a431
Binary files /dev/null and b/images/atom/atom32.png differ
diff --git a/images/bubble/bubble.png b/images/bubble/bubble.png
new file mode 100644
index 0000000..a606d07
Binary files /dev/null and b/images/bubble/bubble.png differ
diff --git a/images/bubble/bubble16.png b/images/bubble/bubble16.png
new file mode 100644
index 0000000..719391c
Binary files /dev/null and b/images/bubble/bubble16.png differ
diff --git a/images/bubble/bubble32.png b/images/bubble/bubble32.png
new file mode 100644
index 0000000..282cefc
Binary files /dev/null and b/images/bubble/bubble32.png differ
diff --git a/images/bubble/bubble64.png b/images/bubble/bubble64.png
new file mode 100644
index 0000000..fee1440
Binary files /dev/null and b/images/bubble/bubble64.png differ
diff --git a/images/bunny/bunny16.png b/images/bunny/bunny16.png
new file mode 100644
index 0000000..54d121e
Binary files /dev/null and b/images/bunny/bunny16.png differ
diff --git a/images/bunny/bunny32.png b/images/bunny/bunny32.png
new file mode 100644
index 0000000..5c04992
Binary files /dev/null and b/images/bunny/bunny32.png differ
diff --git a/images/card/card16.png b/images/card/card16.png
new file mode 100644
index 0000000..343a8ed
Binary files /dev/null and b/images/card/card16.png differ
diff --git a/images/card/card32.png b/images/card/card32.png
new file mode 100644
index 0000000..f0c3a12
Binary files /dev/null and b/images/card/card32.png differ
diff --git a/images/co/colorfulBall.png b/images/co/colorfulBall.png
new file mode 100644
index 0000000..01f72d7
Binary files /dev/null and b/images/co/colorfulBall.png differ
diff --git a/images/co/colorfulBall16.png b/images/co/colorfulBall16.png
new file mode 100644
index 0000000..03365cf
Binary files /dev/null and b/images/co/colorfulBall16.png differ
diff --git a/images/co/colorfulBall32.png b/images/co/colorfulBall32.png
new file mode 100644
index 0000000..94c0b6a
Binary files /dev/null and b/images/co/colorfulBall32.png differ
diff --git a/images/csquare/colofulSquare16.png b/images/csquare/colofulSquare16.png
new file mode 100644
index 0000000..9b67bd3
Binary files /dev/null and b/images/csquare/colofulSquare16.png differ
diff --git a/images/csquare/colofulSquare32.png b/images/csquare/colofulSquare32.png
new file mode 100644
index 0000000..e0ab335
Binary files /dev/null and b/images/csquare/colofulSquare32.png differ
diff --git a/images/csquare/colorfulSquare64.png b/images/csquare/colorfulSquare64.png
new file mode 100644
index 0000000..124f34d
Binary files /dev/null and b/images/csquare/colorfulSquare64.png differ
diff --git a/images/dna/dna16.png b/images/dna/dna16.png
new file mode 100644
index 0000000..5c66726
Binary files /dev/null and b/images/dna/dna16.png differ
diff --git a/images/dna/dna32.png b/images/dna/dna32.png
new file mode 100644
index 0000000..80fde79
Binary files /dev/null and b/images/dna/dna32.png differ
diff --git a/images/float/float32.png b/images/float/float32.png
new file mode 100644
index 0000000..7a781d2
Binary files /dev/null and b/images/float/float32.png differ
diff --git a/images/float/float64.png b/images/float/float64.png
new file mode 100644
index 0000000..abed862
Binary files /dev/null and b/images/float/float64.png differ
diff --git a/images/heart/heart.png b/images/heart/heart.png
new file mode 100644
index 0000000..fb94dd9
Binary files /dev/null and b/images/heart/heart.png differ
diff --git a/images/heart/heart16.png b/images/heart/heart16.png
new file mode 100644
index 0000000..a748e75
Binary files /dev/null and b/images/heart/heart16.png differ
diff --git a/images/heart/heart32.png b/images/heart/heart32.png
new file mode 100644
index 0000000..8304c27
Binary files /dev/null and b/images/heart/heart32.png differ
diff --git a/images/icon.png b/images/icon.png
new file mode 100644
index 0000000..fab9931
Binary files /dev/null and b/images/icon.png differ
diff --git a/images/icon16.png b/images/icon16.png
new file mode 100644
index 0000000..f94aed9
Binary files /dev/null and b/images/icon16.png differ
diff --git a/images/icon32.png b/images/icon32.png
new file mode 100644
index 0000000..7938068
Binary files /dev/null and b/images/icon32.png differ
diff --git a/images/icon64.png b/images/icon64.png
new file mode 100644
index 0000000..e9ea44f
Binary files /dev/null and b/images/icon64.png differ
diff --git a/images/leaf/leaf16.png b/images/leaf/leaf16.png
new file mode 100644
index 0000000..3ca5c43
Binary files /dev/null and b/images/leaf/leaf16.png differ
diff --git a/images/leaf/leaf32.png b/images/leaf/leaf32.png
new file mode 100644
index 0000000..2344b89
Binary files /dev/null and b/images/leaf/leaf32.png differ
diff --git a/images/leaf/leaf64.png b/images/leaf/leaf64.png
new file mode 100644
index 0000000..493fa5b
Binary files /dev/null and b/images/leaf/leaf64.png differ
diff --git a/images/letter/letter.png b/images/letter/letter.png
new file mode 100644
index 0000000..32ff160
Binary files /dev/null and b/images/letter/letter.png differ
diff --git a/images/letter/letter16.png b/images/letter/letter16.png
new file mode 100644
index 0000000..94c060b
Binary files /dev/null and b/images/letter/letter16.png differ
diff --git a/images/letter/letter32.png b/images/letter/letter32.png
new file mode 100644
index 0000000..a0b6f94
Binary files /dev/null and b/images/letter/letter32.png differ
diff --git a/images/letter/letter64.png b/images/letter/letter64.png
new file mode 100644
index 0000000..93f06c3
Binary files /dev/null and b/images/letter/letter64.png differ
diff --git a/images/petal/petal128.png b/images/petal/petal128.png
new file mode 100644
index 0000000..ca3b732
Binary files /dev/null and b/images/petal/petal128.png differ
diff --git a/images/petal/petal32.png b/images/petal/petal32.png
new file mode 100644
index 0000000..40a22cd
Binary files /dev/null and b/images/petal/petal32.png differ
diff --git a/images/petal/petal64.png b/images/petal/petal64.png
new file mode 100644
index 0000000..9b451ed
Binary files /dev/null and b/images/petal/petal64.png differ
diff --git a/images/snow/snowflake.png b/images/snow/snowflake.png
new file mode 100644
index 0000000..9d1dcf7
Binary files /dev/null and b/images/snow/snowflake.png differ
diff --git a/images/snow/snowflake16.png b/images/snow/snowflake16.png
new file mode 100644
index 0000000..489977d
Binary files /dev/null and b/images/snow/snowflake16.png differ
diff --git a/images/snow/snowflake32.png b/images/snow/snowflake32.png
new file mode 100644
index 0000000..9d177fa
Binary files /dev/null and b/images/snow/snowflake32.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4970ffa
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
Prvacy Policy on tailing-mouse-footprint
+
+
+
Privacy policy
+
+
diff --git a/localization-manager b/localization-manager
new file mode 160000
index 0000000..d453e5e
--- /dev/null
+++ b/localization-manager
@@ -0,0 +1 @@
+Subproject commit d453e5e01fca6c50f59ebe8e780066092be7f6e9
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..80ed56a
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,32 @@
+{
+ "name": "__MSG_appName__",
+ "version": "0.2.5.1",
+ "permissions": ["activeTab", "declarativeContent", "contextMenus", "https://*/*"],
+ "content_scripts": [
+ {
+ "matches": ["https://*/*"],
+ "js": ["contents.js"]
+ }
+ ],
+ "background": {
+ "scripts": ["background.js"],
+ "persistent": false
+ },
+ "page_action": {
+ "default_popup": "popup.html",
+ "default_icon": {
+ "16": "images/icon16.png",
+ "32": "images/icon32.png",
+ "64": "images/icon64.png",
+ "128": "images/icon.png"
+ }
+ },
+ "icons": {
+ "16": "images/icon16.png",
+ "48": "images/icon64.png",
+ "128": "images/icon.png"
+ },
+ "description": "__MSG_appDesc__",
+ "default_locale": "en",
+ "manifest_version": 2
+}
diff --git a/popup.html b/popup.html
new file mode 100644
index 0000000..2d97af8
--- /dev/null
+++ b/popup.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
Choose your mouse effect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ STOP Extension
+
+
+
+
diff --git a/popup.js b/popup.js
new file mode 100644
index 0000000..edc548d
--- /dev/null
+++ b/popup.js
@@ -0,0 +1,102 @@
+function buttonElement(targetId) {
+ return document.getElementById(targetId);
+}
+
+function setButtonImage(targetId, targetUrl) {
+ buttonElement(targetId).style.backgroundImage = `url(${targetUrl})`;
+ return
+}
+
+function addClickEvent(func, targetId, targetUrl, type) {
+ func(targetId).addEventListener('click', () => {
+
+ let stopButton = buttonElement('stop');
+ if (stopButton.innerHTML === 'START Extension') {
+ stopButton.innerHTML= 'STOP Extension'};
+ chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+
+ chrome.tabs.sendMessage(
+ tabs[0].id,
+ {
+ name: targetId,
+ path: targetUrl,
+ type: type,
+ eventName: func(targetId).className ,
+ isItOn: true,
+ sender: 'popup'}
+ );
+
+ chrome.runtime.onMessage.addListener((msg, _, sendRes) => {
+ chrome.pageAction.setIcon({path: targetUrl,
+ tabId: tabs[0].id
+ });
+ });
+
+ });
+
+ });
+ return;
+}
+
+function startPointerFunction(targetId, targetUrl, type) {
+ buttonElement(targetId);
+ setButtonImage(targetId, targetUrl);
+ addClickEvent(buttonElement, targetId, targetUrl, type);
+ return;
+}
+
+function triggerStop(func, targetId) {
+ func(targetId).addEventListener('click', () => {
+
+ let buttonName = ''
+ if (targetId === 'stop') buttonName = stopEvent(func, targetId);
+
+ chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+
+ chrome.tabs.sendMessage(
+ tabs[0].id,
+ {
+ name: buttonName === 'STOP Extension' ? localStorage.pointerName : targetId,
+ path: buttonName === 'STOP Extension' ? localStorage.pointerPath : '',
+ type: buttonName === 'STOP Extension' ? 'moving' : targetId,
+ sender: 'popup'}
+ );
+
+ });
+
+ });
+}
+
+function stopEvent(func, targetId) {
+ let stopButton = func(targetId);
+ stopButton.innerHTML === 'STOP Extension' ?
+ stopButton.innerHTML = 'START Extension' :
+ stopButton.innerHTML = 'STOP Extension';
+ return stopButton.innerHTML;
+}
+
+let bubble = './images/bubble/bubble32.png'
+let letter = './images/letter/letter32.png'
+let snowflake = './images/snow/snowflake32.png'
+let heart = './images/heart/heart32.png'
+let colorfulBall = './images/co/colorfulBall32.png'
+let bunny = './images/bunny/bunny32.png';
+let dna = './images/dna/dna32.png';
+let card = './images/card/card32.png';
+let atom = './images/atom/atom32.png';
+let petal = './images/petal/petal32.png';
+let float = './images/float/float32.png';
+startPointerFunction('bubble', bubble, 'moving');
+startPointerFunction('letter', letter, 'moving');
+startPointerFunction('snowflake', snowflake, 'moving');
+startPointerFunction('heart', heart, 'moving');
+startPointerFunction('colorfulBall', colorfulBall, 'moving');
+startPointerFunction('bunny', bunny, 'moving');
+startPointerFunction('dna', dna, 'moving');
+startPointerFunction('card', card, 'moving');
+startPointerFunction('atom', atom, 'moving');
+startPointerFunction('petal', petal, 'moving');
+startPointerFunction('float', float, 'moving');
+triggerStop(buttonElement, 'stop');
+
+if (localStorage.type === 'stop') buttonElement('stop').innerHTML = 'START Extension';