info icon added

README.md

@@ -0,0 +1 @@
+# vwo-extension

css/main.css

@@ -0,0 +1,72 @@
+#app {
+  min-width: 400px;
+  min-height: 50px;
+}
+
+#info > img {
+  height: 20px;
+}
+
+#info > .infoText {
+    visibility: hidden;
+    width: 350px;
+    background-color: #edeeef;
+    color: #009fe3;
+    text-align: center;
+    border-radius: 6px;
+    padding: 15px 15px;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+}
+
+#info > img:hover + .infoText {
+    visibility: visible;
+}
+
+.VWONotFound {
+  text-align: center;
+  border-left: 5px solid red;
+}
+
+.mainInformation > .header > h1 {
+  margin-top: 5px;
+}
+
+.mainInformation {
+  text-align: center;
+  border-left: 5px solid #009fe3
+}
+
+.experiments > div[class^='exp'] {
+  padding: 10px;
+  margin-bottom: 10px;
+  border-left:3px solid green;
+  border-width: 80%;
+  background-color: #edeeef;
+  font-weight: bold;
+}
+
+.experiments > div[class^='exp']:hover {
+  background-color: #f2f2f2
+}
+
+.experiments .variation_select{
+  margin-top: 5px;
+  cursor: pointer;
+  padding: 3px;
+}
+
+.experiments select {
+  width: 60%;
+}
+
+.experiments .no-experiments {
+  padding: 10px;
+  margin-bottom: 10px;
+  border-left:3px solid red;
+  border-width: 80%;
+  background-color: #edeeef;
+  color:red;
+}

js/app.js

@@ -0,0 +1,99 @@
+/*
+((d, w) => {
+  const app = d.getElementById('app');
+  function queryContentScript(callback){
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {message: "VWOData"}, function(data) {
+          callback(data);
+      });
+    });
+  }
+  // ASDASDASDASD
+  // on click reset het elke keer
+  // store data ?
+  // http://stackoverflow.com/questions/5364062/how-can-i-save-information-locally-in-my-chrome-extension
+  // hier iets mee of localstorage of andere aanpak idk
+
+  // Eventlistener for content script
+  chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+    console.log(request);
+    console.log(request.valid);
+
+    // Validity checks if VWO is on page
+    if (request.valid === 0) {
+      notAvailable();
+      console.log('VWO not available');
+    } else if (request.valid === 1){
+      initVWO(request);
+      console.log('VWO available');
+    }
+  });
+
+  // If VWO is not on site
+  function notAvailable() {
+    app.querySelector('.loading').remove();
+    const notFound = document.createElement('div');
+          notFound.innerHTML = 'VWO not found on this page';
+    app.appendChild(notFound);
+  }
+
+  // If VWO is on site
+  function initVWO(data){
+    app.querySelector('.loading').remove();
+    const VWOData = JSON.parse(data);
+
+    const accID = VWOData.accID;
+    const userID = VWOData.userID;
+    const experiments = VWOData.experiments;
+
+    const accElement = document.createElement('div');
+          accElement.innerHTML = accID;
+
+    const userElement = document.createElement('div');
+          userElement.innerHTML = userID;
+
+    const experimentsElement = document.createElement('div');
+
+    app.appendChild(accElement);
+    app.appendChild(userElement);
+    app.appendChild(experimentsElement);
+  }
+})(document, window);
+
+
+chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {message: "VWOData"}, function(response) {
+            // Validity checks if VWO is on page
+            chrome.tabs.create({url: "main.html"});
+            if (response.valid === 0) {
+              notAvailable();
+          } else if (response.valid === 1){
+              initVWO(request);
+            }
+      });
+    });
+}); */
+
+// chrome.runtime.onMessage.addListener(
+//   function(request, sender, sendResponse) {
+//       console.log('received');
+//     if (request.message == "count_experiments")
+//       console.log(request.count);
+//   });
+
+
+function reloadPage(){
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {message: "Reload"})
+    });
+}
+
+function queryContentScript(callback){
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {message: "VWOData"}, function(data) {
+          callback(data);
+      });
+    });
+}

js/content-script.js

@@ -0,0 +1,49 @@
+//Create script in DOM to collect VWO data
+const scriptEl = document.createElement('script');
+      scriptEl.type = 'text/javascript';
+      scriptEl.src = chrome.extension.getURL('/js/dom-script.js');
+
+let VWOData;
+let length;
+// console.log(window);
+// console.log("content-script " + window._vwo_acc_id);
+window.addEventListener("load", function() {
+    requestVWOData();
+}, true);
+
+function requestVWOData() {
+  let body = document.getElementsByTagName('body')[0];
+  body.append(scriptEl);
+}
+
+
+document.addEventListener('VWOData', function (e){
+  // Receive VWO data from script
+  VWOData = e.detail;
+  scriptEl.remove();
+  // length = Object.keys(VWOData.experiments).length;
+});
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.message == "VWOData"){
+      sendResponse(VWOData);
+    }
+    if(request.message == "Reload"){
+        window.location.reload();
+    }
+    if(request.message == "count_experiments"){
+        console.log('eeeyyyy');
+        sendResponse({num_exp:length});
+    }
+  });
+  // Remove script element from page
+
+
+// chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse){
+//   console.log('eeeeyeyeyeye');
+//   if (msg.greeting == 'hello') {
+//     console.log("Message recieved!");
+//   }
+//   return true; // <-- Required if you want to use sendResponse asynchronously!
+// });

js/dom-script.js

@@ -0,0 +1,30 @@
+(() => {
+  // VWO data object
+  const VWOData = {};
+
+  // Determines VWO on page and fills data object
+  const getVWOData = () => {
+    if (window._vwo_acc_id) {
+      VWOData.valid = 1;
+      VWOData.accID = window._vwo_acc_id;
+      VWOData.userID = window._vwo_uuid;
+      VWOData.experiments = window._vwo_exp;
+      VWOData.campaignData = window._vwo_campaignData;
+      VWOData.curhref = window.location.href;
+    }
+    else if(window._vwo_code){
+        VWOData.valid = 2;
+    }
+    else {
+      VWOData.valid = 0;
+    }
+    return VWOData
+  }
+
+  // Custom event for content script
+  const customVWOEvent = document.createEvent('CustomEvent');
+        customVWOEvent.initCustomEvent('VWOData', true, true, getVWOData());
+
+  // Dispatch event
+  document.dispatchEvent(customVWOEvent);
+})();

main.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link href="./css/main.css" rel="stylesheet">
+  <script src="vwo-controller.js"></script>
+</head>
+<body>
+  <div id="info">
+    <img src="./img/infoicon.png">
+    <span class="infoText">This chrome extension is build by ClickValue.
+      ClickValue is an Amsterdam based, data driven, web analytics company.
+      The tool makes user able to see active VWO experiments and change test
+      variations. For more information you can visit www.clickvalue.nl.
+    </span>
+  </div>
+  <div id="app">
+    <div class="loading"> Loading... </div>
+  </div>
+</body>
+</html>

manifest.json

@@ -0,0 +1,40 @@
+{
+  "manifest_version": 2,
+  "name": "ClickValue's VWO Chrome extension",
+  "version": "1.1.1",
+  "description": "A Visual Web Optimizer extension to see active experiments and change variations",
+  "author": "Richard Bieringa & Daan van Ingen",
+
+  "icons": { "16": "./img/vwo.png",
+           "48": "./img/vwo.png",
+          "128": "./img/vwo.png" },
+
+  "browser_action": {
+          "default_icon": {
+            "16": "./img/vwo.png",
+            "24": "./img/vwo.png",
+            "32": "./img/vwo.png"
+          },
+          "default_title": "ClickValue's VWO Chrome Extension",
+          "default_popup": "main.html"
+        },
+  "permissions": [
+    "activeTab",
+    "http://*/*",
+    "https://*/*",
+    "storage",
+    "cookies"
+  ],
+  "web_accessible_resources" : ["/js/dom-script.js"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["./js/content-script.js"],
+      "permissions":"activeTab"
+    }
+  ],
+    "background": {
+    "scripts": ["./js/app.js"]
+  }
+}