.

background.js

@@ -1,12 +1,12 @@
-chrome.runtime.onInstalled.addListener(function() {
+chrome.runtime.onInstalled.addListener(function () {
-  chrome.storage.sync.set({color: '#3aa757'}, function() {
+  chrome.storage.sync.set({color: '#3aa757'}, function () {
     console.log("The color is green.");
   });
 
-  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
     chrome.declarativeContent.onPageChanged.addRules([{
       conditions: [new chrome.declarativeContent.PageStateMatcher({
-        pageUrl: {hostEquals: 'developer.chrome.com'},
+        pageUrl: {hostEquals: 'youtube.com'},
       })
       ],
       actions: [new chrome.declarativeContent.ShowPageAction()]

contentScript.js

@@ -1 +1,32 @@
-alert("Surprise motherfuckers");
+function applyDefaultStyle(element) {
+  element.style.position = "fixed";
+  element.style.zIndex = 1000;
+}
+
+let mCalorieCount = document.createElement("div");
+applyDefaultStyle(mCalorieCount);
+mCalorieCount.style.left = 0;
+mCalorieCount.style.top = 0;
+mCalorieCount.innerHTML = `
+<b>25</b>:<b>23</b>
+<br/>
+<b>883</b> kal
+`;
+document.body.append(mCalorieCount);
+
+let mResults = document.createElement("div");
+applyDefaultStyle(mResults);
+mResults.style.right = 0;
+mResults.style.bottom = 0;
+mResults.style.textAlign = "right";
+mResults.innerHTML = `
+5&nbsp;161<br/>
+10&nbsp;332<br/>
+15&nbsp;490<br/>
+20&nbsp;712<br/>
+25&nbsp;875<br/>
+`;
+document.body.append(mResults);
+
+chrome.storage.sync.get('color', ({color}) => {
+});

popup.js

@@ -4,9 +4,6 @@ chrome.storage.sync.get('color', function(data) {
   changeColor.setAttribute('value', data.color);
 });
 
-let mOverlay = document.createElement("div");
-mOverlay.innerHTML = "<b>QUQ</b>";
-
 changeColor.onclick = function(element) {
   // TODO: Add settings to STORAGE