Add a content script to insert the import button into the share page.

source/content-scripts/share/share.ts

@@ -0,0 +1,104 @@
+import './style.scss';
+
+import browser from 'webextension-polyfill';
+import {Component, render} from 'preact';
+import {html} from 'htm/preact';
+
+import {decodeBase64, fragmentPrefix} from '../../utilities/share-redirect.js';
+import {
+  RedirectParameters,
+  parseRedirect,
+  narrowMatcherType,
+  narrowRedirectType,
+} from '../../redirect/exports.js';
+import storage from '../../redirect/storage.js';
+
+type Props = Record<string, unknown>;
+
+type State = {
+  error: string | undefined;
+  imported: boolean;
+};
+
+class ImportButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      error: undefined,
+      imported: false,
+    };
+  }
+
+  importRedirect = async () => {
+    const decoded = decodeBase64<RedirectParameters>(
+      location.hash.slice(fragmentPrefix.length),
+    );
+
+    const invalidRedirectError = "This isn't a valid redirect. ☹️";
+
+    if (
+      !narrowMatcherType(decoded.matcherType) ||
+      !narrowRedirectType(decoded.redirectType) ||
+      typeof decoded.matcherValue !== 'string' ||
+      typeof decoded.redirectValue !== 'string'
+    ) {
+      this.setState({error: invalidRedirectError});
+      return;
+    }
+
+    const redirect = parseRedirect({
+      id: -1,
+      enabled: true,
+      matcherType: decoded.matcherType,
+      matcherValue: decoded.matcherValue,
+      redirectType: decoded.redirectType,
+      redirectValue: decoded.redirectValue,
+    });
+    if (redirect === undefined) {
+      this.setState({error: invalidRedirectError});
+      return;
+    }
+
+    const id = await storage.nextRedirectId();
+    redirect.parameters.id = id;
+    await storage.save(redirect);
+
+    this.setState({imported: true});
+  };
+
+  render() {
+    const {error, imported} = this.state;
+
+    if (error !== undefined) {
+      return html`<p>${error}</p>`;
+    }
+
+    if (imported) {
+      return html`
+        <p class="import-success">The redirect has been imported!</p>
+      `;
+    }
+
+    return html`
+      <button class="import-button" onClick=${this.importRedirect}>
+        Import
+      </button>
+    `;
+  }
+}
+
+function main() {
+  if (!location.hash.startsWith(fragmentPrefix)) {
+    return;
+  }
+
+  const importRoot = document.querySelector('.re-nav-import')!;
+  for (const child of Array.from(importRoot.children)) {
+    child.remove();
+  }
+
+  render(html`<${ImportButton} />`, importRoot);
+}
+
+main();

source/content-scripts/share/style.scss

@@ -0,0 +1,20 @@
+.re-nav-import {
+  text-align: center;
+}
+
+.import-button {
+  background-color: var(--da-4);
+  border: none;
+  color: var(--background-1);
+  cursor: pointer;
+  font-weight: bold;
+  padding: var(--spacing-08) var(--spacing-32);
+
+  &:hover {
+    background-color: var(--foreground-1);
+  }
+}
+
+.import-success {
+  margin-bottom: var(--spacing-16);
+}

source/manifest.ts

@@ -21,6 +21,14 @@ export default function createManifest(
         },
       },
     },
+    content_scripts: [
+      {
+        css: ['generated:content-scripts/share/style.css'],
+        js: ['content-scripts/share/share.ts'],
+        matches: ['https://holllo.org/re-nav/share/'],
+        run_at: 'document_end',
+      },
+    ],
   };
 
   const icons = {