From 90249bc95603cc17e04409a5fae357a3acee5aa0 Mon Sep 17 00:00:00 2001
From: amysteamdev <37001393+AmySteam@users.noreply.github.com>
Date: Wed, 21 Aug 2024 05:53:13 -0600
Subject: [PATCH] [New sample] Open Chrome API reference page (omnibox, alarms,
 messaging sample) (#848)

* First draft

* Rename folder

* Tweak comments

* Update index.html

* remove extra closing div

* Rename sw file

* Apply first round of @sebastianbenz suggestions

* Fix import

* Update popover

* Second tech review round
---
 .../tutorial.open-api-reference/api-list.js   |  81 ++++++++++++++++++
 .../tutorial.open-api-reference/content.js    |  30 +++++++
 .../tutorial.open-api-reference/icon-128.png  | Bin 0 -> 7057 bytes
 .../tutorial.open-api-reference/icon-16.png   | Bin 0 -> 7057 bytes
 .../tutorial.open-api-reference/manifest.json |  25 ++++++
 .../service-worker.js                         |   2 +
 .../tutorial.open-api-reference/sw-omnibox.js |  37 ++++++++
 .../sw-suggestions.js                         |  23 +++++
 .../tutorial.open-api-reference/sw-tips.js    |  28 ++++++
 9 files changed, 226 insertions(+)
 create mode 100644 functional-samples/tutorial.open-api-reference/api-list.js
 create mode 100644 functional-samples/tutorial.open-api-reference/content.js
 create mode 100644 functional-samples/tutorial.open-api-reference/icon-128.png
 create mode 100644 functional-samples/tutorial.open-api-reference/icon-16.png
 create mode 100644 functional-samples/tutorial.open-api-reference/manifest.json
 create mode 100644 functional-samples/tutorial.open-api-reference/service-worker.js
 create mode 100644 functional-samples/tutorial.open-api-reference/sw-omnibox.js
 create mode 100644 functional-samples/tutorial.open-api-reference/sw-suggestions.js
 create mode 100644 functional-samples/tutorial.open-api-reference/sw-tips.js

diff --git a/functional-samples/tutorial.open-api-reference/api-list.js b/functional-samples/tutorial.open-api-reference/api-list.js
new file mode 100644
index 00000000..72554e9c
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/api-list.js
@@ -0,0 +1,81 @@
+export default [
+  {
+    content: 'commands',
+    description:
+      'Use the <match>Commands API</match> to add a keyboard shortcuts.'
+  },
+  {
+    content: 'contextmenus',
+    description:
+      "Use the <match>ContextMenus API</match> to add a custom item to Chrome's context menu."
+  },
+  {
+    content: 'declarativeNetRequest',
+    description:
+      'Use the <match>DeclarativeNetRequest API</match> to block or modify network requests.'
+  },
+  {
+    content: 'downloads',
+    description:
+      'Use the <match>Downloads API</match> to programmatically manipulate downloads.'
+  },
+  {
+    content: 'i18n',
+    description: 'Use the <match>i18n API</match> to localize your extension'
+  },
+  {
+    content: 'identity',
+    description:
+      'Use the <match>Identity API</match> to get OAuth2 access tokens.'
+  },
+  {
+    content: 'notifications',
+    description:
+      'Use the <match>Notifications API</match> show notifications to users in the system tray.'
+  },
+  {
+    content: 'offscreen',
+    description:
+      'Use the <match>Offscreen API</match> to create and manage offscreen documents.'
+  },
+  {
+    content: 'omnibox',
+    description:
+      "Use the <match>Omnibox API</match> to register a keyword with Chrome's address bar."
+  },
+  {
+    content: 'permissions',
+    description:
+      'Use the <match>Permissions API</match> to request optional permissions at run time.'
+  },
+  {
+    content: 'runtime',
+    description:
+      'Use the <match>Runtime API</match> pass messages, manage extension lifecycle, and access other helper utils.'
+  },
+  {
+    content: 'scripting',
+    description:
+      'Use the <match>Scripting API</match> to execute scripts in different contexts.'
+  },
+  {
+    content: 'storage',
+    description:
+      'Use the <match>Storage API</match> to store, retrieve, and track changes to user data.'
+  },
+  {
+    content: 'tabs',
+    description:
+      'Use the <match>Tabs API</match> to create, update and manipulate tabs.'
+  },
+  {
+    content: 'topSites',
+    description:
+      'Use the <match>TopSites API</match> to access the most visited sites that are displayed on the new tab page.'
+  },
+  {
+    content: 'webNavigation',
+    description:
+      'Use the <match>WebNavigation API</match> to receive notifications about the status of navigation requests in-flight.'
+  }
+];
diff --git a/functional-samples/tutorial.open-api-reference/content.js b/functional-samples/tutorial.open-api-reference/content.js
new file mode 100644
index 00000000..1a5f65d4
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/content.js
@@ -0,0 +1,30 @@
+// Popover API https://chromestatus.com/feature/5463833265045504
+
+(async () => {
+  const nav = document.querySelector('.navigation-rail__links');
+
+  const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
+
+  const tipWidget = createDomElement(`
+    <button class="navigation-rail__link" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0; border: none; background: none;>
+      <div class="navigation-rail__icon">
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none"> 
+        <path d='M15 16H9M14.5 9C14.5 7.61929 13.3807 6.5 12 6.5M6 9C6 11.2208 7.2066 13.1599 9 14.1973V18.5C9 19.8807 10.1193 21 11.5 21H12.5C13.8807 21 15 19.8807 15 18.5V14.1973C16.7934 13.1599 18 11.2208 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9Z'"></path>
+        </svg>
+      </div>
+      <span>Tip</span> 
+    </button>
+  `);
+
+  const popover = createDomElement(
+    `<div id='tip-popover' popover>${tip}</div>`
+  );
+
+  document.body.append(popover);
+  nav.append(tipWidget);
+})();
+
+function createDomElement(html) {
+  const dom = new DOMParser().parseFromString(html, 'text/html');
+  return dom.body.firstElementChild;
+}
diff --git a/functional-samples/tutorial.open-api-reference/icon-128.png b/functional-samples/tutorial.open-api-reference/icon-128.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fb1368633a771bf1adc750fb74ddaf67a98f407
GIT binary patch
literal 7057
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
E1324-?*IS*

literal 0
HcmV?d00001

diff --git a/functional-samples/tutorial.open-api-reference/icon-16.png b/functional-samples/tutorial.open-api-reference/icon-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..4537f9d574bc8ccd0fa7e756e664630cc3b3f9d1
GIT binary patch
literal 7057
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
Fe*nUEgvbB@

literal 0
HcmV?d00001

diff --git a/functional-samples/tutorial.open-api-reference/manifest.json b/functional-samples/tutorial.open-api-reference/manifest.json
new file mode 100644
index 00000000..e88d16a1
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/manifest.json
@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "Open extension API reference",
+  "version": "1.0.0",
+  "icons": {
+    "16": "icon-16.png",
+    "128": "icon-128.png"
+  },
+  "background": {
+    "service_worker": "service-worker.js",
+    "type": "module"
+  },
+  "minimum_chrome_version": "102",
+  "omnibox": {
+    "keyword": "api"
+  },
+  "permissions": ["alarms", "storage"],
+  "content_scripts": [
+    {
+      "matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
+      "js": ["content.js"]
+    }
+  ],
+  "host_permissions": ["https://extension-tips.glitch.me/*"]
+}
diff --git a/functional-samples/tutorial.open-api-reference/service-worker.js b/functional-samples/tutorial.open-api-reference/service-worker.js
new file mode 100644
index 00000000..1af54df2
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/service-worker.js
@@ -0,0 +1,2 @@
+import './sw-omnibox.js';
+import './sw-tips.js';
diff --git a/functional-samples/tutorial.open-api-reference/sw-omnibox.js b/functional-samples/tutorial.open-api-reference/sw-omnibox.js
new file mode 100644
index 00000000..005869bf
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/sw-omnibox.js
@@ -0,0 +1,37 @@
+import { getApiSuggestions } from './sw-suggestions.js';
+
+console.log('sw-omnibox.js');
+
+// Initialize default API suggestions
+chrome.runtime.onInstalled.addListener(({ reason }) => {
+  if (reason === 'install') {
+    chrome.storage.local.set({
+      apiSuggestions: ['tabs', 'storage', 'scripting']
+    });
+  }
+});
+
+const URL_CHROME_EXTENSIONS_DOC =
+  'https://developer.chrome.com/docs/extensions/reference/';
+const NUMBER_OF_PREVIOUS_SEARCHES = 4;
+
+// Displays the suggestions after user starts typing
+chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
+  const { description, suggestions } = await getApiSuggestions(input);
+  await chrome.omnibox.setDefaultSuggestion({ description });
+  suggest(suggestions);
+});
+
+// Opens the reference page of the chosen API
+chrome.omnibox.onInputEntered.addListener((input) => {
+  chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
+  // Saves the latest keyword
+  updateHistory(input);
+});
+
+async function updateHistory(input) {
+  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
+  apiSuggestions.unshift(input);
+  apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
+  await chrome.storage.local.set({ apiSuggestions });
+}
diff --git a/functional-samples/tutorial.open-api-reference/sw-suggestions.js b/functional-samples/tutorial.open-api-reference/sw-suggestions.js
new file mode 100644
index 00000000..42dd477a
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/sw-suggestions.js
@@ -0,0 +1,23 @@
+import apiList from './api-list.js';
+
+/**
+ * Returns a list of suggestions and a description for the default suggestion
+ */
+export async function getApiSuggestions(input) {
+  const suggestions = apiList.filter((api) => api.content.startsWith(input));
+
+  // return suggestions if any exist
+  if (suggestions.length) {
+    return {
+      description: 'Matching Chrome APIs',
+      suggestions: suggestions
+    };
+  }
+
+  // return past searches if no match was found
+  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
+  return {
+    description: 'No matches found. Choose from past searches',
+    suggestions: apiList.filter((item) => apiSuggestions.includes(item.content))
+  };
+}
diff --git a/functional-samples/tutorial.open-api-reference/sw-tips.js b/functional-samples/tutorial.open-api-reference/sw-tips.js
new file mode 100644
index 00000000..912d236d
--- /dev/null
+++ b/functional-samples/tutorial.open-api-reference/sw-tips.js
@@ -0,0 +1,28 @@
+console.log('sw-tips.js');
+
+// Fetch tip & save in storage
+const updateTip = async () => {
+  const response = await fetch('https://extension-tips.glitch.me/tips.json');
+  const tips = await response.json();
+  const randomIndex = Math.floor(Math.random() * tips.length);
+  await chrome.storage.local.set({ tip: tips[randomIndex] });
+};
+
+// Create a daily alarm and retrieves the first tip when extension is installed.
+chrome.runtime.onInstalled.addListener(({ reason }) => {
+  if (reason === 'install') {
+    chrome.alarms.create({ delayInMinutes: 1, periodInMinutes: 1440 });
+    updateTip();
+  }
+});
+
+// Retrieve tip of the day
+chrome.alarms.onAlarm.addListener(updateTip);
+
+// Send tip to content script via messaging
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.greeting === 'tip') {
+    chrome.storage.local.get('tip').then(sendResponse);
+    return true;
+  }
+});