From 22403e8fd4fef5cd3e32d7a3f8667cf91e252764 Mon Sep 17 00:00:00 2001 From: Pasquale Riello Date: Fri, 23 Feb 2024 20:36:37 +0100 Subject: [PATCH 1/4] Add search sample --- api-samples/search/README.md | 16 ++++++++++++++++ api-samples/search/manifest.json | 10 ++++++++++ api-samples/search/popup.css | 26 ++++++++++++++++++++++++++ api-samples/search/popup.html | 27 +++++++++++++++++++++++++++ api-samples/search/popup.js | 14 ++++++++++++++ 5 files changed, 93 insertions(+) create mode 100644 api-samples/search/README.md create mode 100644 api-samples/search/manifest.json create mode 100644 api-samples/search/popup.css create mode 100644 api-samples/search/popup.html create mode 100644 api-samples/search/popup.js diff --git a/api-samples/search/README.md b/api-samples/search/README.md new file mode 100644 index 0000000000..0ecbd2a7ab --- /dev/null +++ b/api-samples/search/README.md @@ -0,0 +1,16 @@ +# chrome.search + +This sample demonstrates how to use the [chrome.search API](https://developer.chrome.com/docs/extensions/reference/api/search). + +## Overview + +This extension provides a different way to search via the default provider. +A popup appears when the extension icon is clicked: from there you can specify your query and the location where search results should be displayed. + +## 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 icon to open the popup. +4. Type the query and select a location. +5. Click the "Search" button. diff --git a/api-samples/search/manifest.json b/api-samples/search/manifest.json new file mode 100644 index 0000000000..0179c83b36 --- /dev/null +++ b/api-samples/search/manifest.json @@ -0,0 +1,10 @@ +{ + "manifest_version": 3, + "name": "Search", + "version": "1.0", + "description": "Uses the chrome.search API to do a search query via the default provider", + "action": { + "default_popup": "popup.html" + }, + "permissions": ["search"] +} \ No newline at end of file diff --git a/api-samples/search/popup.css b/api-samples/search/popup.css new file mode 100644 index 0000000000..ff17444b43 --- /dev/null +++ b/api-samples/search/popup.css @@ -0,0 +1,26 @@ +body { + width: 200px; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.row { + margin: 3px; +} + +input { + padding: 4px; +} + +button { + width: 100%; + padding: 8px; + border-radius: 4px; + margin-top: 12px; +} diff --git a/api-samples/search/popup.html b/api-samples/search/popup.html new file mode 100644 index 0000000000..79e57946be --- /dev/null +++ b/api-samples/search/popup.html @@ -0,0 +1,27 @@ + + + + Search + + + +
+

Search

+
+ + +
+
+ + +
+ +
+ + + + diff --git a/api-samples/search/popup.js b/api-samples/search/popup.js new file mode 100644 index 0000000000..f0b90a9941 --- /dev/null +++ b/api-samples/search/popup.js @@ -0,0 +1,14 @@ +document.getElementById('query').addEventListener('input', (evt) => { + // Enable the search button only if there is text in the query + document.getElementById('search').disabled = evt.target.value == ''; +}); + +document.getElementById('search').addEventListener('click', () => { + const query = document.getElementById('query').value; + const location = document.getElementById('location').value; + + // Don't search if the query is empty + if(query == '') return; + + chrome.search.query({text: query, disposition: location}); +}); \ No newline at end of file From 16385bdece17457bc98e93e56c1c699d382d8a12 Mon Sep 17 00:00:00 2001 From: Pasquale Riello Date: Mon, 26 Feb 2024 18:45:40 +0100 Subject: [PATCH 2/4] Update api-samples/search/README.md Co-authored-by: Joe Medley --- api-samples/search/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-samples/search/README.md b/api-samples/search/README.md index 0ecbd2a7ab..1dc429472d 100644 --- a/api-samples/search/README.md +++ b/api-samples/search/README.md @@ -1,6 +1,6 @@ # chrome.search -This sample demonstrates how to use the [chrome.search API](https://developer.chrome.com/docs/extensions/reference/api/search). +This sample demonstrates how to use the [`chrome.search` API](https://developer.chrome.com/docs/extensions/reference/api/search). ## Overview From 3ddd4ab4d7a73b5d77b11519c00243eeda5a5100 Mon Sep 17 00:00:00 2001 From: Pasquale Riello Date: Mon, 26 Feb 2024 18:45:47 +0100 Subject: [PATCH 3/4] Update api-samples/search/README.md Co-authored-by: Joe Medley --- api-samples/search/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-samples/search/README.md b/api-samples/search/README.md index 1dc429472d..81522bef30 100644 --- a/api-samples/search/README.md +++ b/api-samples/search/README.md @@ -13,4 +13,4 @@ A popup appears when the extension icon is clicked: from there you can specify y 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 icon to open the popup. 4. Type the query and select a location. -5. Click the "Search" button. +5. Click the **Search** button. From ae1eab04801862d8a9a138c8db23d0ea63cc6a4a Mon Sep 17 00:00:00 2001 From: Pasquale Riello Date: Mon, 26 Feb 2024 18:45:53 +0100 Subject: [PATCH 4/4] Update api-samples/search/README.md Co-authored-by: Joe Medley --- api-samples/search/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-samples/search/README.md b/api-samples/search/README.md index 81522bef30..5e5e91b7c8 100644 --- a/api-samples/search/README.md +++ b/api-samples/search/README.md @@ -5,7 +5,7 @@ This sample demonstrates how to use the [`chrome.search` API](https://developer. ## Overview This extension provides a different way to search via the default provider. -A popup appears when the extension icon is clicked: from there you can specify your query and the location where search results should be displayed. +A popup appears when the extension icon is clicked. From there you can specify your query and the location where search results should be displayed. ## Running this extension