[New tutorial] Open Chrome API docs (condensed) (#851)

* 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

* Removed long list of suggestions
Only show past history

* Move host permissions

* Rename extension and folder

* REmove await

* Move icons into images folder

functional-samples/tutorial.quick-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;
+}

functional-samples/tutorial.quick-api-reference/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "Quick API Reference",
+  "description": "Quick API can speed up the building of Chrome extensions.",
+  "version": "1.0.0",
+  "icons": {
+    "16": "images/icon-16.png",
+    "128": "images/icon-128.png"
+  },
+  "background": {
+    "service_worker": "service-worker.js",
+    "type": "module"
+  },
+  "minimum_chrome_version": "102",
+  "omnibox": {
+    "keyword": "api"
+  },
+  "permissions": ["alarms", "storage"],
+  "host_permissions": ["https://extension-tips.glitch.me/*"],
+  "content_scripts": [
+    {
+      "matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
+      "js": ["content.js"]
+    }
+  ]
+}

functional-samples/tutorial.quick-api-reference/service-worker.js

@@ -0,0 +1,2 @@
+import './sw-omnibox.js';
+import './sw-tips.js';

functional-samples/tutorial.quick-api-reference/sw-omnibox.js

@@ -0,0 +1,40 @@
+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;
+
+// Display the suggestions after user starts typing
+chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
+  await chrome.omnibox.setDefaultSuggestion({
+    description: 'Enter a Chrome API or choose from past searches'
+  });
+  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
+  const suggestions = apiSuggestions.map((api) => {
+    return { content: api, description: `Open chrome.${api} API` };
+  });
+  suggest(suggestions);
+});
+
+// Open the reference page of the chosen API
+chrome.omnibox.onInputEntered.addListener((input) => {
+  chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
+  // Save 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);
+  return chrome.storage.local.set({ apiSuggestions });
+}

functional-samples/tutorial.quick-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;
+  }
+});