Refresh button

Author: Timothy Johnson

dest/background.js

@@ -12,10 +12,18 @@ chrome.runtime.onConnect.addListener(port => {
 })
 
 function handleToolsMessage(msg, port) {
-  if (msg.type == 'init') setup(msg.tabId, port)
-
-  const page = pagePorts.get(msg.tabId)
-  if (page) page.postMessage(msg)
+  switch (msg.type) {
+    case 'init':
+      setup(msg.tabId, port)
+      break
+    case 'reload':
+      chrome.tabs.reload(msg.tabId, { bypassCache: true })
+      break
+    default:
+      const page = pagePorts.get(msg.tabId)
+      if (page) page.postMessage(msg)
+      break
+  }
 }
 
 function handlePageMessage(msg, port) {

src/App.svelte

@@ -9,6 +9,7 @@
   import Toolbar from './Toolbar.svelte'
   import VisibilityButton from './VisibilityButton.svelte'
   import Breadcrumbs from './Breadcrumbs.svelte'
+  import ConnectMessage from './ConnectMessage.svelte'
   import Node from './nodes/Node.svelte'
 </script>
 
@@ -51,13 +52,6 @@
     margin-top: 40%;
     text-align: center;
   }
-
-  p {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
 </style>
 
 {#if $rootNodes.length}
@@ -87,9 +81,5 @@
   </div>
   <ComponentView />
 {:else}
-  <p>
-    Refresh the page to connect to&nbsp;
-    <b>svelte</b>
-    .
-  </p>
+  <ConnectMessage />
 {/if}

src/ConnectMessage.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { reload } from './store.js'
+</script>
+
+<style>
+  .root {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .button {
+    color: blue;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    opacity: 0.6;
+  }
+
+  h1 {
+    margin-top: 30px;
+    margin-bottom: 8px;
+    font-size: 1.4em;
+  }
+
+  ul {
+    padding-left: 20px;
+    list-style-type: disc;
+  }
+
+  li {
+    margin-bottom: 8px;
+  }
+</style>
+
+<div class="root">
+  <p>
+    To connect to&nbsp;
+    <b>Svelte</b>
+    &nbsp;proform a hard refresh (ctrl+F5) or&nbsp;
+    <span on:click={reload} class="button">click here</span>
+    .
+  </p>
+  <h1>Not working? Did you...</h1>
+  <ul>
+    <li>Use Svelte version 3.12.0 or above?</li>
+    <li>Build with dev mode enabled?</li>
+  </ul>
+</div>

src/store.js

@@ -30,6 +30,13 @@ port.postMessage({
   tabId: chrome.devtools.inspectedWindow.tabId
 })
 
+export function reload() {
+  port.postMessage({
+    type: 'reload',
+    tabId: chrome.devtools.inspectedWindow.tabId
+  })
+}
+
 selectedNode.subscribe(node =>
   port.postMessage({
     type: 'setSelected',