Add new omnibox sample (GoogleChrome#988)

* Add new omnibox sample * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley <[email protected]> * Update description * Update description * Rename the global variable --------- Co-authored-by: Joe Medley <[email protected]>
ChiefUSA · Aug 25, 2023 · f608c65 · f608c65
1 parent a98b3cd
commit f608c65
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 0 deletions.
diff --git a/api-samples/omnibox/simple-example/README.md b/api-samples/omnibox/simple-example/README.md
@@ -0,0 +1,17 @@
+# chrome.omnibox - Simple Example
+
+This sample demonstrates the `"omnibox"` manifest key and most of the omnibox APIs.
+
+## Overview
+
+The extension uses the `"omnibox"` manifest key and its parameter `"keyword"`. The extension will print logs to the logs page when the omnibox events are triggered.
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+3. Click the extension's action icon to open the logs page.
+4. Type `omnix` in the omnibox and press `Space` to see the suggestions.
+5. Try to type something to see how the `onInputChanged` event is triggered.
+6. Try to left-click or middle-click on the suggestions to see how the `onInputEntered` event is triggered.
+7. Try to remove some suggestions by clicking the `x` icon on the right of the suggestion to see how the `onInputCancelled` event is triggered.
diff --git a/api-samples/omnibox/simple-example/logs.css b/api-samples/omnibox/simple-example/logs.css
@@ -0,0 +1,31 @@
+html,
+body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    padding: 10px;
+    height: 100vh;
+}
+
+h1 {
+    margin: 0;
+    padding: 0;
+}
+
+#logs {
+    max-height: calc(100vh - 100px);
+    font-size: 1.2rem;
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+    overflow: auto;
+}
diff --git a/api-samples/omnibox/simple-example/logs.html b/api-samples/omnibox/simple-example/logs.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Omnibox Logs Output</title>
+    <link rel="stylesheet" href="./logs.css" />
+  </head>
+
+  <body>
+    <header>
+      <h1>Omnibox Logs Output</h1>
+      <small
+        >Type 'omnix' plus a search term into the Omnibox and you could find
+        logs here.</small
+      >
+    </header>
+    <div id="logs">
+      <div class="log-item">---------------Logs--------------</div>
+      <!-- New logs will be appended here -->
+    </div>
+    <script src="./logs.js"></script>
+  </body>
+</html>
diff --git a/api-samples/omnibox/simple-example/logs.js b/api-samples/omnibox/simple-example/logs.js
@@ -0,0 +1,24 @@
+const LOGS_CONTAINER = document.getElementById('logs');
+
+const getFormattedTime = () => {
+  const now = new Date();
+  const hours = now.getHours().toString().padStart(2, '0');
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  const seconds = now.getSeconds().toString().padStart(2, '0');
+  const milliseconds = now.getMilliseconds().toString().padStart(3, '0');
+  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+};
+
+const appendLog = (text) => {
+  const log = document.createElement('div');
+  log.classList.add('log-item');
+  log.innerText = `[${getFormattedTime()}] ${text}`;
+  LOGS_CONTAINER.appendChild(log);
+  LOGS_CONTAINER.scrollTop = LOGS_CONTAINER.scrollHeight;
+};
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.type === 'append-log') {
+    appendLog(message.text);
+  }
+});
diff --git a/api-samples/omnibox/simple-example/manifest.json b/api-samples/omnibox/simple-example/manifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Omnibox Simple Example",
+  "description": "Demonstrates the \"omnibox\" manifest key and most members of the omnibox API.",
+  "version": "1.1",
+  "background": {
+    "service_worker": "service-worker.js"
+  },
+  "action": {},
+  "omnibox": {
+    "keyword": "omnix"
+  },
+  "manifest_version": 3
+}
diff --git a/api-samples/omnibox/simple-example/service-worker.js b/api-samples/omnibox/simple-example/service-worker.js
@@ -0,0 +1,42 @@
+const appendLog = (text) => {
+  chrome.runtime.sendMessage({ type: 'append-log', text });
+};
+
+chrome.action.onClicked.addListener(() => {
+  chrome.tabs.create({ url: 'logs.html' });
+});
+
+chrome.omnibox.onInputStarted.addListener(function () {
+  appendLog('💬 onInputStarted');
+
+  chrome.omnibox.setDefaultSuggestion({
+    description:
+      "Here is a default <match>suggestion</match>. <url>It's <match>url</match> here</url>"
+  });
+});
+
+chrome.omnibox.onInputChanged.addListener(function (text, suggest) {
+  appendLog('✏️ onInputChanged: ' + text);
+  suggest([
+    { content: text + ' one', description: 'the first one', deletable: true },
+    {
+      content: text + ' number two',
+      description: 'the second entry',
+      deletable: true
+    }
+  ]);
+});
+
+chrome.omnibox.onInputEntered.addListener(function (text, disposition) {
+  appendLog(
+    `✔️ onInputEntered: text -> ${text} | disposition -> ${disposition}`
+  );
+});
+
+chrome.omnibox.onInputCancelled.addListener(function () {
+  appendLog('❌ onInputCancelled');
+});
+
+chrome.omnibox.onDeleteSuggestion.addListener(function (text) {
+  appendLog('⛔ onDeleteSuggestion: ' + text);
+});