GoogleChrome · Pask00 · Feb 23, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/api-samples/search/README.md 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
@@ -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"]
+}
diff --git a/api-samples/search/popup.css 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
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Search</title>
+ <link rel="stylesheet" type="text/css" href="popup.css" />
+ </head>
+ <body>
+ <div class="container">
+ <h1>Search</h1>
+ <div class="row">
+ <label for="query">Query:</label>
+ <input type="text" id="query" />
+ </div>
+ <div class="row">
+ <label for="location">Location:</label>
+ <select id="location">
+ <option value="CURRENT_TAB">Current Tab</option>
+ <option value="NEW_TAB">New Tab</option>
+ <option value="NEW_WINDOW">New Window</option>
+ </select>
+ </div>
+ <button type="button" id="search" disabled>Search</button>
+ </div>
+
+ <script src="popup.js"></script>
+ </body>
+</html>
diff --git a/api-samples/search/popup.js 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});
+});