pre live

css/main.css

@@ -98,6 +98,11 @@ body {
   margin-top: 10px;
 }
 
+.succes-message {
+  background-color: #d6fed6;
+  padding: 3px;
+}
+
 .experiments .experiments-wrapper {
   max-height: 250px;
   overflow-y: auto;

js/app.js

@@ -19,15 +19,16 @@ function queryContentScript(callback){
     });
 }
 
-function openTab(){
-    chrome.tabs.create({url:"http://www.clickvalue.nl"});
+function openCVTab(){
+  chrome.tabs.create({url:"http://www.clickvalue.nl"});
+}
+
+function openDevTokenTab(){
+  chrome.tabs.create({url:"http://app.vwo.com/#/developers/tokens"});
 }
 
 function prevDefault(){
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
         chrome.tabs.sendMessage(tabs[0].id, {message: "prevDefault"});
     });
 }
-// chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-//     queryContentScript(initVWO);
-// });

main.html

@@ -35,15 +35,19 @@ <h3>API key</h3>
       </p>
       <ul>
         <li>
-        Visit <a href="http://app.vwo.com/#/developers/tokens">
+        Visit <a class="dev-token" href="http://app.vwo.com/#/developers/tokens">
         http://app.vwo.com/#/developers/tokens</a>.
         </li>
         <li>Login to the account for which you want to create a token</li>
         <li>Press "Add another API token"</li>
         <li>Insert a token name and as a permission select browse</li>
         <li>Press "Generate"</li>
         <li>Copy the token text and add it to the extension</li>
+        <li>Add a descriptive name to the token</li>
       </ul>
+      <p>You should now be able to see active experiments on pages that belong to
+        your account.
+      </p>
     </div>
     <div id=main-content>
       <div class="API-key">
@@ -56,8 +60,8 @@ <h3>API key</h3>
         </div>
         <div class="add-new-key" style="display:none">
           <form>
-            <label>Add API key: </label>
-            <input class="add-api-key" type="text">
+            <input class="add-api-key" type="text" placeholder="token"><br>
+            <input class="api-key-name" type="text" placeholder="name"><br>
             <button class="add-api-key-btn">Add</button>
           </form>
         </div>

manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "ClickValue's VWO Chrome extension",
-  "version": "4.0.0",
+  "name": "ClickValue's VWO Chrome extension V2",
+  "version": "4.0.1",
   "description": "A Visual Web Optimizer extension to see active experiments and change variations",
-  "author": "Richard Bieringa & Daan van Ingen",
+  "author": "Daan van Ingen",
 
   "icons": { "16": "./img/vwo.png",
            "48": "./img/vwo.png",
@@ -15,7 +15,7 @@
             "24": "./img/vwo.png",
             "32": "./img/vwo.png"
           },
-          "default_title": "ClickValue's VWO Chrome Extension",
+          "default_title": "ClickValue's VWO Chrome Extension V2",
           "default_popup": "main.html"
         },
   "permissions": [