From f608c65e61c2fbf3749ccba88ddce6fafd65e71f Mon Sep 17 00:00:00 2001 From: Xuezhou Dai Date: Fri, 25 Aug 2023 23:09:05 +0800 Subject: [PATCH] Add new omnibox sample (#988) * Add new omnibox sample * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley * Update api-samples/omnibox/simple-example/README.md Co-authored-by: Joe Medley * Update description * Update description * Rename the global variable --------- Co-authored-by: Joe Medley --- api-samples/omnibox/simple-example/README.md | 17 ++++++++ api-samples/omnibox/simple-example/logs.css | 31 ++++++++++++++ api-samples/omnibox/simple-example/logs.html | 24 +++++++++++ api-samples/omnibox/simple-example/logs.js | 24 +++++++++++ .../omnibox/simple-example/manifest.json | 13 ++++++ .../omnibox/simple-example/service-worker.js | 42 +++++++++++++++++++ 6 files changed, 151 insertions(+) create mode 100644 api-samples/omnibox/simple-example/README.md create mode 100644 api-samples/omnibox/simple-example/logs.css create mode 100644 api-samples/omnibox/simple-example/logs.html create mode 100644 api-samples/omnibox/simple-example/logs.js create mode 100644 api-samples/omnibox/simple-example/manifest.json create mode 100644 api-samples/omnibox/simple-example/service-worker.js diff --git a/api-samples/omnibox/simple-example/README.md b/api-samples/omnibox/simple-example/README.md new file mode 100644 index 0000000000..873f2c4121 --- /dev/null +++ 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 new file mode 100644 index 0000000000..d07025f330 --- /dev/null +++ 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 new file mode 100644 index 0000000000..1c60a5b165 --- /dev/null +++ b/api-samples/omnibox/simple-example/logs.html @@ -0,0 +1,24 @@ + + + + + + Omnibox Logs Output + + + + +
+

Omnibox Logs Output

+ Type 'omnix' plus a search term into the Omnibox and you could find + logs here. +
+
+
---------------Logs--------------
+ +
+ + + diff --git a/api-samples/omnibox/simple-example/logs.js b/api-samples/omnibox/simple-example/logs.js new file mode 100644 index 0000000000..5122acf3b3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..ab03e6bade --- /dev/null +++ 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 new file mode 100644 index 0000000000..f87581b296 --- /dev/null +++ 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 suggestion. It's url here" + }); +}); + +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); +});