Add "search extensions"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chrome-palette",
   "displayName": "Chrome Palette",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Command Palette for Chrome",
   "license": "MIT",
   "packageManager": "[email protected]",

src/manifest.ts

@@ -42,7 +42,7 @@ const manifest = defineManifest(async () => ({
     "tabs",
     "sessions",
     "bookmarks",
-    // "processes",
+    "management",
     "history",
     "favicon",
   ],

src/pages/popup/App.tsx

@@ -16,6 +16,7 @@ import Shortcut from "./Shortcut";
 import audibleTabSuggestions from "./commands/audio";
 import bookmarkThisSuggestions from "./commands/bookmark-this";
 import bookmarkSuggestions from "./commands/bookmarks";
+import extenionsSuggestions from "./commands/extensions";
 import generalSuggestions, { Command } from "./commands/general";
 import historySuggestions from "./commands/history";
 import switchTabSuggestions from "./commands/tabs";
@@ -42,6 +43,7 @@ const allCommands = createMemo(() => {
     ...switchTabSuggestions(),
     ...historySuggestions(),
     ...bookmarkSuggestions(),
+    ...extenionsSuggestions(),
     ...websitesSuggestions(),
     ...themeSuggestions(),
   ];

src/pages/popup/Entry.tsx

@@ -11,7 +11,8 @@ import Shortcut from "./Shortcut";
 import { Command } from "./commands/general";
 import { parsedInput } from "./util/signals";
 
-function faviconURL(u: string) {
+export function faviconURL(u?: string) {
+  if (!u) return u;
   const url = new URL(chrome.runtime.getURL("/_favicon/"));
   url.searchParams.set("pageUrl", u);
   url.searchParams.set("size", "32");
@@ -56,14 +57,14 @@ export default function Entry(props: {
         });
       }}
     >
-      <Show when={props.command.icon}>
+      <Show when={props.command.icon || faviconURL(props.command.url)}>
         {(icon) => (
           <img
             classList={{
               img: true,
               img_big: !!(subtitle() || url()),
             }}
-            src={faviconURL(icon())}
+            src={icon()}
             alt=""
             loading="lazy"
           />
@@ -80,6 +81,8 @@ export default function Entry(props: {
           <Show when={parsedInput().query} fallback={props.command.subtitle}>
             {subtitle()}
           </Show>
+        </div>
+        <div class="subtitle">
           <Show when={parsedInput().query} fallback={props.command.url}>
             {url()}
           </Show>

src/pages/popup/commands/bookmark-this.ts

@@ -1,5 +1,6 @@
 import { createLazyResource, matchCommand, setInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { Command } from "./general";
 
 const KEYWORD = "bt";
@@ -14,7 +15,7 @@ const traverse = (
     if (!url && path !== "") {
       list.push({
         title: path,
-        icon: "chrome://favicon/",
+        icon: faviconURL("chrome://favicon/"),
         lastVisitTime: dateAdded,
         command: async function () {
           const [tab] = await chrome.tabs.query({

src/pages/popup/commands/bookmarks.ts

@@ -1,5 +1,6 @@
 import { createLazyResource, matchCommand, setInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { Command } from "./general";
 
 const KEYWORD = "b";
@@ -18,7 +19,7 @@ const traverse = (
       url ||= "";
       return {
         title: `${title} > ${breadcrumb}`,
-        icon: "chrome://favicon/" + url,
+        icon: faviconURL(url),
         lastVisitTime: dateAdded,
         url,
       };
@@ -36,7 +37,7 @@ const base: Command[] = [
     command: async function () {
       setInput(KEYWORD + ">");
     },
-    icon: "chrome://bookmarks/",
+    icon: faviconURL("chrome://bookmarks/"),
     keyword: KEYWORD + ">",
   },
 ];

src/pages/popup/commands/extensions.ts

@@ -0,0 +1,42 @@
+import { createLazyResource, matchCommand, setInput } from "~/util/signals";
+
+import { faviconURL } from "../Entry";
+import { Command } from "./general";
+
+const KEYWORD = "e";
+
+const commands = createLazyResource<Command[]>([], async (setVal) => {
+  return (await chrome.management.getAll()).map(
+    ({ name, icons, id, enabled, version, description }) => {
+      return {
+        title: `${name} (${version})`,
+        subtitle: description,
+        icon:
+          icons
+            ?.map((o) => o?.url)
+            .filter(Boolean)
+            .at(-1) ?? "chrome://extensions/",
+        url: `chrome://extensions/?id=${id}`,
+        enabled,
+      };
+    }
+  );
+});
+
+const base: Command[] = [
+  {
+    title: "Search Extensions",
+    icon: faviconURL("chrome://extensions/"),
+    command: async function () {
+      setInput(KEYWORD + ">");
+    },
+    keyword: KEYWORD + ">",
+  },
+];
+
+export default function extensionSuggestions(): Command[] {
+  const { isMatch, isCommand } = matchCommand(KEYWORD);
+  if (isMatch) return commands();
+  if (isCommand) return [];
+  return base;
+}

src/pages/popup/commands/general.ts

@@ -2,6 +2,7 @@
 import { resetHistory } from "~/util/last-used";
 import { inputSignal, parsedInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { isTruthy } from "../util/isTruthy";
 
 export type Command = {
@@ -78,6 +79,7 @@ const base: Command[] = [
     title: "Open Settings",
     shortcut: "⌘ ,",
     url: "chrome://settings",
+    icon: faviconURL("chrome://settings"),
   },
   {
     title: "Close Current Tab",

src/pages/popup/commands/history.ts

@@ -1,5 +1,6 @@
 import { createLazyResource, matchCommand, setInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { Command } from "./general";
 
 const KEYWORD = "h";
@@ -32,7 +33,7 @@ const commands = createLazyResource<Command[]>([], async (setVal) => {
           return {
             title: title || "Untitled",
             lastVisitTime,
-            icon: url,
+            icon: faviconURL(url),
             url,
           };
         })
@@ -50,7 +51,7 @@ const commands = createLazyResource<Command[]>([], async (setVal) => {
 const base: Command[] = [
   {
     title: "Search History",
-    icon: "chrome://history/",
+    icon: faviconURL("chrome://history/"),
     command: async function () {
       setInput(KEYWORD + ">");
     },

src/pages/popup/commands/tabs.ts

@@ -1,6 +1,7 @@
 import niceUrl from "~/util/nice-url";
 import { createLazyResource, matchCommand, setInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { Command } from "./general";
 
 const KEYWORD = "t";
@@ -12,7 +13,7 @@ const commands = createLazyResource<Command[]>([], async () => {
     return {
       title: title || "Untitled",
       subtitle: niceUrl(url),
-      icon: url,
+      icon: faviconURL(url),
       command: () => {
         chrome.tabs.update(id!, { highlighted: true });
         chrome.windows.update(windowId!, { focused: true });
@@ -29,7 +30,7 @@ const base: Command[] = [
       setInput(KEYWORD + ">");
     },
     keyword: KEYWORD + ">",
-    icon: "about:blank",
+    icon: faviconURL("about:blank"),
   },
 ];
 

src/pages/popup/commands/website-search.ts

@@ -1,5 +1,6 @@
 import { matchCommand, parsedInput, setInput } from "~/util/signals";
 
+import { faviconURL } from "../Entry";
 import { Command } from "./general";
 
 type Template = {
@@ -37,7 +38,7 @@ const templates: Template[] = [
 
 const base: Command[] = templates.map((template) => ({
   title: `Search ${template.title}`,
-  icon: template.icon,
+  icon: faviconURL(template.icon),
   command: async function () {
     setInput(template.keyword + ">");
   },