Disable the complexity rule.

This makes it so http and https, and www and non-www links are the same.

README.md

@@ -6,7 +6,7 @@
 [![Get Re-Nav for Chrome](./images/chrome-web-store.png)](https://chrome.google.com/webstore/detail/efjignaelidacjdhleaojfmkklganjjb)
 [![Get Re-Nav for Edge](./images/microsoft.png)](https://microsoftedge.microsoft.com/addons/detail/efnkhmlaemggdlpalglioeolbbhfpiic)
 
-![Latest Re-Nav screenshot](./images/re-nav-version-0-1-0.png)
+![Latest Re-Nav screenshot](./images/re-nav-version-0-3-0.png)
 
 ## Installation
 

package.json

@@ -19,6 +19,7 @@
     "@holllo/migration-helper": "^0.1.3",
     "@holllo/preact-components": "^0.2.3",
     "htm": "^3.1.1",
+    "js-base64": "^3.7.3",
     "modern-normalize": "^1.1.0",
     "preact": "^10.11.0",
     "webextension-polyfill": "^0.10.0"
@@ -78,6 +79,7 @@
     "rules": {
       "@typescript-eslint/consistent-type-definitions": "off",
       "@typescript-eslint/consistent-type-imports": "off",
+      "complexity": "off",
       "n/file-extension-in-import": "off",
       "no-await-in-loop": "off"
     },

source/background-scripts/commands.ts

@@ -0,0 +1,7 @@
+import {toggleAllRedirects} from '../utilities/toggle-all-redirects.js';
+
+export async function onCommandsHandler(command: string): Promise<void> {
+  if (command === 'toggleAllRedirects') {
+    await toggleAllRedirects();
+  }
+}

source/background-scripts/context-menus.ts

@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill';
 
-import {updateBadge} from '../utilities/badge.js';
+import {toggleAllRedirects} from '../utilities/toggle-all-redirects.js';
 
 type ContextMenu = browser.Menus.CreateCreatePropertiesType;
 
@@ -48,9 +48,6 @@ export async function contextClicked(
   }
 
   if (id === 're-nav-toggle-redirects') {
-    const state = await browser.storage.local.get({redirectsEnabled: true});
-    const redirectsEnabled = !(state.redirectsEnabled as boolean);
-    await browser.storage.local.set({redirectsEnabled});
-    await updateBadge(redirectsEnabled);
+    await toggleAllRedirects();
   }
 }

source/background-scripts/initialize.ts

@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill';
 
 import storage from '../redirect/storage.js';
 import {updateBadge} from '../utilities/badge.js';
+import {onCommandsHandler} from './commands.js';
 import {
   contextClicked,
   getContextMenus,
@@ -48,8 +49,32 @@ browser.webNavigation.onBeforeNavigate.addListener(async (details) => {
     tab[0]?.url === undefined ? undefined : new URL(tab[0].url);
 
   const url = new URL(details.url);
-  const {latestUrl} = await browser.storage.local.get('latestUrl');
-  if (redirectDelta < 30_000 && url.href === latestUrl) {
+
+  // The undefined.local URL will only be used if no redirects have happened yet.
+  const {latestUrl: savedLatestUrl} = await browser.storage.local.get({
+    latestUrl: 'https://undefined.local',
+  });
+
+  const latestUrl = new URL(savedLatestUrl);
+
+  // Set the latest URL protocol to always be the same as the current. Since
+  // only HTTP URLs are checked here, for us HTTP and HTTPS are equivalent.
+  latestUrl.protocol = url.protocol;
+
+  const currentUrlWwwPrefix = url.hostname.startsWith('www.');
+  const latestUrlWwwPrefix = latestUrl.hostname.startsWith('www.');
+  if (currentUrlWwwPrefix && !latestUrlWwwPrefix) {
+    // Then if the current URL is a `www.` URL and the latest one isn't, prefix it
+    // to the latest URL. This helps the manual bypass check.
+    latestUrl.hostname = `www.${latestUrl.hostname}`;
+  } else if (!currentUrlWwwPrefix && latestUrlWwwPrefix) {
+    // Remove `www.` if the latestUrl starts with it but the current URL doesn't.
+    latestUrl.hostname = latestUrl.hostname.slice(4);
+  }
+
+  // Manually bypass any redirects if the latest redirected and current URLs are
+  // the same.
+  if (redirectDelta < 30_000 && url.href === latestUrl.href) {
     return;
   }
 
@@ -68,7 +93,16 @@ browser.webNavigation.onBeforeNavigate.addListener(async (details) => {
         break;
       }
 
-      const redirectedUrl = redirect.redirect(url);
+      let redirectedUrl = redirect.redirect(url);
+      if (typeof redirectedUrl === 'string') {
+        try {
+          redirectedUrl = new URL(redirectedUrl);
+        } catch {
+          redirectedUrl = `https://${redirectedUrl as string}`;
+          redirectedUrl = new URL(redirectedUrl);
+        }
+      }
+
       await browser.tabs.update(details.tabId, {url: redirectedUrl.href});
       await browser.storage.local.set({
         latestTime: Date.now(),
@@ -88,6 +122,8 @@ browser.contextMenus.onClicked.addListener(async (info, tab) => {
   await contextClicked(contextMenuIds, info, tab);
 });
 
+browser.commands.onCommand.addListener(onCommandsHandler);
+
 if (import.meta.env.VITE_BROWSER === 'chromium') {
   browser.action.onClicked.addListener(browserActionClicked);
 } else {

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

@@ -6,12 +6,29 @@ export default function createManifest(
   const manifest: Record<string, unknown> = {
     name: 'Re-Nav',
     description: 'Navigation redirects for the masses.',
-    version: '0.2.0',
+    version: '0.3.0',
     permissions: ['contextMenus', 'storage', 'tabs', 'webNavigation'],
     options_ui: {
       page: 'options/index.html',
       open_in_tab: true,
     },
+    commands: {
+      toggleAllRedirects: {
+        description:
+          "Toggle all redirects, this does the same as the extension icon's right-click option.",
+        suggested_key: {
+          default: 'Alt+Shift+R',
+        },
+      },
+    },
+    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 = {

source/options/components/editor.ts

@@ -1,4 +1,4 @@
-import {ConfirmButton} from '@holllo/preact-components';
+import {ConfirmButton, FeedbackButton} from '@holllo/preact-components';
 import {html} from 'htm/preact';
 import {Component} from 'preact';
 import browser from 'webextension-polyfill';
@@ -13,6 +13,7 @@ import {
   redirectTypes,
 } from '../../redirect/exports.js';
 import storage from '../../redirect/storage.js';
+import {share} from '../../utilities/share-redirect.js';
 
 type Props = {
   redirect: Redirect;
@@ -124,6 +125,11 @@ export default class Editor extends Component<Props, State> {
     this.setState({enabled});
   };
 
+  copyShareLink = async () => {
+    const link = share(this.state);
+    await navigator.clipboard.writeText(link);
+  };
+
   render() {
     const {
       enabled,
@@ -198,6 +204,13 @@ export default class Editor extends Component<Props, State> {
         >
           ${enabled ? '●' : '○'}
         </button>
+        <${FeedbackButton}
+          attributes=${{class: 'button share', title: 'Copy share link'}}
+          click=${this.copyShareLink}
+          feedbackText="💖"
+          text="📋"
+          timeout=${5 * 1000}
+        />
       </div>
     `;
   }

source/options/components/usage.ts

@@ -49,6 +49,19 @@ export default class Usage extends Component {
           <li>To remove a redirect click the red button with the ✗ twice.</li>
         </ul>
 
+        <p>Sharing & importing redirects:</p>
+        <ul>
+          <li>
+            To share a redirect, click on the button with the clipboard 📋 icon.
+            This will copy a link that you can share around.
+          </li>
+          <li>
+            When you or someone else heads to a share link, it will show the
+            redirect's details and if they have Re-Nav installed it will create
+            an import button on the page.
+          </li>
+        </li>
+
         <p>Some miscellaneous notes:</p>
         <ul>
           <li>Only URLs starting with "http" will be checked.</li>

source/options/scss/components/editor.scss

@@ -25,11 +25,15 @@
     padding: 0;
 
     &.enabled {
-      background-color: var(--da-4);
+      --button-background-color: var(--da-4);
     }
 
     &.disabled {
-      background-color: var(--da-2);
+      --button-background-color: var(--da-2);
+    }
+
+    &.share {
+      --button-background-color: var(--da-7);
     }
   }
 

source/options/scss/components/page-main.scss

@@ -8,7 +8,7 @@
   margin-bottom: 16px;
 
   .button {
-    background-color: var(--da-3);
+    background-color: var(--button-background-color, var(--da-3));
     border: none;
     color: var(--db-1);
     cursor: pointer;

source/redirect/base.ts

@@ -48,5 +48,5 @@ export abstract class Redirect {
     return false;
   }
 
-  public abstract redirect(url: URL | string): URL;
+  public abstract redirect(url: URL | string): URL | string;
 }

source/redirect/exports.ts

@@ -8,7 +8,7 @@ export * from './hostname.js';
 export * from './regex.js';
 export * from './simple.js';
 
-export type Redirects = HostnameRedirect | SimpleRedirect;
+export type Redirects = HostnameRedirect | RegexRedirect | SimpleRedirect;
 
 export function parseRedirect(
   parameters: RedirectParameters,

source/redirect/regex.ts

@@ -1,9 +1,9 @@
 import {Redirect} from './base.js';
 
 export class RegexRedirect extends Redirect {
-  public redirect(redirect: URL | string): URL {
+  public redirect(redirect: URL | string): string {
     const url = redirect instanceof URL ? redirect.href : redirect;
     const regex = new RegExp(this.parameters.matcherValue, 'gi');
-    return new URL(url.replace(regex, this.parameters.redirectValue));
+    return url.replace(regex, this.parameters.redirectValue);
   }
 }

source/redirect/simple.ts

@@ -1,7 +1,7 @@
 import {Redirect} from './base.js';
 
 export class SimpleRedirect extends Redirect {
-  public redirect(): URL {
-    return new URL(this.parameters.redirectValue);
+  public redirect(): string {
+    return this.parameters.redirectValue;
   }
 }

source/utilities/share-redirect.ts

@@ -0,0 +1,28 @@
+import {Base64} from 'js-base64';
+
+import {RedirectParameters} from '../redirect/exports.js';
+
+export const fragmentPrefix = '#json=';
+
+export function decodeBase64<T>(base64: string): T {
+  return JSON.parse(Base64.decode(base64)) as T;
+}
+
+export function encodeBase64(source: any): string {
+  return Base64.encode(JSON.stringify(source), true);
+}
+
+export function share(redirect: RedirectParameters): string {
+  const url = new URL('https://holllo.org/re-nav/share/');
+
+  const encoded = encodeBase64({
+    matcherType: redirect.matcherType,
+    matcherValue: redirect.matcherValue,
+    redirectType: redirect.redirectType,
+    redirectValue: redirect.redirectValue,
+  });
+
+  url.hash = `${fragmentPrefix}${encoded}`;
+
+  return url.href;
+}

source/utilities/toggle-all-redirects.ts

@@ -0,0 +1,10 @@
+import browser from 'webextension-polyfill';
+
+import {updateBadge} from './badge.js';
+
+export async function toggleAllRedirects() {
+  const state = await browser.storage.local.get({redirectsEnabled: true});
+  const redirectsEnabled = !(state.redirectsEnabled as boolean);
+  await browser.storage.local.set({redirectsEnabled});
+  await updateBadge(redirectsEnabled);
+}

tests/redirect.test.ts

@@ -84,7 +84,7 @@ test('Redirect.redirect', (t) => {
     t.snapshot(
       {
         original: url instanceof URL ? url.href : url,
-        redirected: redirect.redirect(url).href,
+        redirected: new URL(redirect.redirect(url)).href,
       },
       `${index} ${redirect.constructor.name}`,
     );