Merge pull request #80 from kiacolbert/pageAction

victorvrv · web-flow · commit bcabed9ec9ea · 2019-03-20T23:47:04.000-04:00
Page action
diff --git a/src/browser/chrome/icon.png b/src/browser/chrome/icon.png
diff --git a/src/browser/chrome/manifest.json b/src/browser/chrome/manifest.json
@@ -4,6 +4,9 @@
   "description": "Time travel",
   "manifest_version": 2,
   "page_action": {
+    "default_icon": {        
+      "32": "icon.png"   
+    },
     "default_popup": "page_action.html"
   },
   "background": {
@@ -24,7 +27,7 @@
     "webRequestBlocking"
   ],
   "web_accessible_resources": [
-    "scripts/deepclone_bundle.js"
+    "scripts/deepclone_bundle.js" 
   ],
   "devtools_page": "devtools.html"
 }
diff --git a/src/browser/chrome/page_action.html b/src/browser/chrome/page_action.html
@@ -5,11 +5,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Page Action</title>
+  <script src="links.js"></script>
+  <style>
+    html, body {
+      font-size:14px;
+      min-width: 460px;
+      min-height: 60px;
+    }
+    body {
+      margin: 8px;
+    }
+    hr {
+      width: 100%;
+    }
+
+    button {
+      height: 30px;
+      width: 100px;
+      outline: none;
+    }
+    a:link {
+      text-decoration: none;
+    }
+  </style>
 </head>
 <body>
-  Page Action
-  <a href="http://www.google.com">Test - goto google</a>
-  <button id="color_btn">CHANGE COLOR!</button>
+  <p><strong>React Rewind</strong></p>
+  <p>Open Chrome developer tools, React Rewind tab is on the right.</p>
+  <a href="https://rewindjs.io">rewindjs.io</a>
+  <a href="https://github.com/reactrewind/react-rewind">Github</a>
   <script src="page_action.js"></script>
 </body>
 </html>
diff --git a/src/browser/chrome/page_action.js b/src/browser/chrome/page_action.js
@@ -1,9 +1,12 @@
-document.addEventListener('DOMContentLoaded', () => {
-  const btn = document.querySelector('#color_btn');
-  btn.addEventListener('click', () => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
-      console.log(tabs);
-      chrome.tabs.sendMessage(tabs[0].id, "change_color");  
-    });
-  });
+document.addEventListener('DOMContentLoaded', function() {
+  var links = document.getElementsByTagName('a');
+  for (var i = 0; i < links.length; i++) {
+    (function() {
+      var ln = links[i];
+      var location = ln.href;
+      ln.onclick = function() {
+        chrome.tabs.create({active: true, url: location});
+      };
+    })();
+  }
 });
