Add "Load client" / "Unload client" toggle button to dev server

Add a button to the dev server to facilitate easy testing of unloading
and re-loading the client, as done by the browser extension and also
some third-party pages.

dev-server/serve-dev.js

@@ -29,9 +29,31 @@ function renderScript(context) {
   const scriptTemplate = `
     {{{hypothesisConfig}}}
     <script>
+    const toggleClientButton = document.querySelector('#toggleClient');
+
+    function loadClient() {
       const embedScript = document.createElement('script');
       embedScript.src = '{{{clientUrl}}}'.replace('{current_host}', document.location.hostname);
       document.body.appendChild(embedScript);
+      toggleClient.textContent = 'Unload client';
+    }
+
+    function unloadClient() {
+      const annotatorLink = document.querySelector('link[type="application/annotator+html"]');
+      annotatorLink?.dispatchEvent(new Event('destroy'));
+      toggleClient.textContent = 'Load client';
+    }
+
+    toggleClientButton.onclick = () => {
+      const isLoaded = document.querySelector('link[type="application/annotator+html"]');
+      if (isLoaded) {
+        unloadClient();
+      } else {
+        loadClient();
+      }
+    };
+
+    loadClient();
     </script>
   `;
   return Mustache.render(scriptTemplate, context);

dev-server/templates/index.mustache

@@ -40,6 +40,7 @@
   <button data-hypothesis-trigger>
     Open sidebar
   </button>
+  <button id="toggleClient">Load client</button>
   <h2>Useful links</h2>
   <ul>
     <li><a href="https://github.com/hypothesis/client">GitHub project</a></li>