diff --git a/emojifier.js b/emojifier.js
index cd75669..3849670 100644
--- a/emojifier.js
+++ b/emojifier.js
@@ -1,7 +1,6 @@
 let apiKey;
 chrome.storage.local.get('apiKey', (data) => {
     apiKey = data.apiKey;
-    console.log('API key', apiKey);
 });
 
 let imgNode;
@@ -9,74 +8,70 @@ let imgNode;
 const popupNode = document.createElement('a');
 popupNode.textContent = 'Emojify';
 popupNode.style.position = 'absolute';
-popupNode.style.background = '#eee';
-popupNode.style.padding = '2px';
+popupNode.style.background = '#d1d800';
+popupNode.style.padding = '4px 6px';
 popupNode.style.cursor = 'pointer';
 popupNode.style.textDecoration = 'underline';
+popupNode.hidden = true;
 document.body.appendChild(popupNode);
 
 function convertImage(event) {
-    alert('hahaha');
+    console.log('convertImage')
+    popupNode.hidden = true;
+    imgNode.dataset.coverted = true;
+    getFaceData();
 }
 
-popupNode.addEventListener('click', convertImage);
-
-function getFaceData(img){
-    console.log(img);
-    let imgUrl = img.src;
-    console.log('IMG_URL:', imgUrl);
-    const requestUrl = 'https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize?';
-    let data = {
-        url: imgUrl
-    };
-
-    var myHeaders = new Headers();
-    myHeaders.append('Content-Type', 'application/json');
-    myHeaders.append('Ocp-Apim-Subscription-Key', 'add_key');
-
-    let fetchData = {
+function getFaceData(){
+    fetch('https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize', {
         method: 'POST',
-        body: JSON.stringify(data), 
-        headers: myHeaders
-    };
-
-    fetch(requestUrl, fetchData)
-      .then((resp) => resp.json())
-      .then(function(resp) {
-        // Here you get the data to modify as you please
-        if (resp.length > 0) {
-            console.log(resp);
-        } else {
-            console.log('No face detected');
+        body: JSON.stringify({url: imgNode.src}),
+        headers: {
+            'Content-Type': 'application/json',
+            'Ocp-Apim-Subscription-Key': apiKey
         }
-        
-        })
-      
-      .catch(function(error) {
-        // If there is any error you will catch them here
+    }).then((resp) => resp.json())
+    .then((resp) => {
+        replaceImage(resp);
+    })
+    .catch((error) => {
         console.log(error);
-      });
+    });
 }
 
-function showPopup(event) {
-    imgNode = event.target;
-    let left = imgNode.offsetLeft + imgNode.offsetWidth - popupNode.offsetWidth;
-    let top = imgNode.offsetTop + imgNode.offsetHeight - popupNode.offsetHeight;
-    popupNode.style.left = `${left}px`;
+function replaceImage(faces) {
+    for (const {faceRectangle, scores} of faces) {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = imgNode.width;
+        canvas.height = imgNode.height;
+        context.drawImage(image, 0, 0, image.width, image.height);
+        imgNode.src = canvas.toDataURL();
+    }
+}
+
+function showPopup({target}) {
+    console.log('showPopup')
+    imgNode = target;
+    if (imgNode.dataset.coverted) {
+        return;
+    }
+    const rect = imgNode.getBoundingClientRect();
+    const top = rect.top + window.scrollY + imgNode.offsetHeight - popupNode.offsetHeight;
+    const left = rect.left + window.scrollX + imgNode.offsetWidth - popupNode.offsetWidth;
     popupNode.style.top = `${top}px`;
+    popupNode.style.left = `${left}px`;
     popupNode.hidden = false;
-    getFaceData(event.target);
-    console.log(event);
-
-
 }
 
 function hidePopup(event) {
+    console.log('hidePopup')
     imgNode = event.target;
     popupNode.hidden = true;
-    console.log(event);
 }
 
+popupNode.addEventListener('click', convertImage);
+
 for (const node of document.images) {
     node.addEventListener('mouseover', showPopup);
     //node.addEventListener('mouseout', hidePopup);
diff --git a/options.js b/options.js
index 3009cfa..e6b1c18 100644
--- a/options.js
+++ b/options.js
@@ -6,12 +6,9 @@ function saveOptions(e) {
 }
 
 function restoreOptions() {
-
-  function setCurrentChoice(result) {
-    document.querySelector("#apiKey").value = result.apiKey || "";
-  }
-
-  var getting = chrome.storage.local.get("apiKey", setCurrentChoice);
+    chrome.storage.local.get("apiKey", ({apiKey}) => {
+        document.querySelector("#apiKey").value = result.apiKey || "";
+    });
 }
 
 document.addEventListener("DOMContentLoaded", restoreOptions);