Add on device summary sample (#1263)

* Add on device summary sample

* small tweaks and clean up

* more clean up

* Add link to blog post

* show correct error when ai is not supported in browser

* addressed comments

* fix path

functional-samples/ai.gemini-on-device-summarization/.gitignore

@@ -0,0 +1 @@
+dist

functional-samples/ai.gemini-on-device-summarization/README.md

@@ -0,0 +1,16 @@
+# On-device Summarization with Gemini Nano
+
+This sample demonstrates how to use the experimental Summarization API in Chrome. To learn more about the API and how to sign-up for the preview, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/ai/built-in).
+
+## Overview
+
+The extension summarizes the content of the currently open tab. It uses Mozilla's [readability](https://github.com/mozilla/readability) library to extract the content of the currently active tab and displays a summary of the page generated by [Chrome's experimental summarization API](https://developer.chrome.com/blog/august2024-summarization-ai) in a side panel.
+
+## Running this extension
+
+1. Clone this repository
+2. Run `npm install` in this folder to install all dependencies.
+3. Run `npm run build` to bundle the content script .
+4. Load the 'dist' directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+5. Click the extension icon to open the summary side panel.
+6. Open any web page, the page's content summary will automatically be displayed in the side panel.

functional-samples/ai.gemini-on-device-summarization/background.js

@@ -0,0 +1,22 @@
+chrome.sidePanel
+  .setPanelBehavior({ openPanelOnActionClick: true })
+  .catch((error) => console.error(error));
+
+chrome.tabs.onActivated.addListener((activeInfo) => {
+  showSummary(activeInfo.tabId);
+});
+chrome.tabs.onUpdated.addListener(async (tabId) => {
+  showSummary(tabId);
+});
+
+async function showSummary(tabId) {
+  const tab = await chrome.tabs.get(tabId);
+  if (!tab.url.startsWith('http')) {
+    return;
+  }
+  const injection = await chrome.scripting.executeScript({
+    target: { tabId },
+    files: ['scripts/extract-content.js']
+  });
+  chrome.storage.session.set({ pageContent: injection[0].result });
+}

functional-samples/ai.gemini-on-device-summarization/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Summarizer",
+  "version": "0.1",
+  "manifest_version": 3,
+  "description": "Get a short summary of every webpage.",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": ["tabs", "scripting", "sidePanel", "storage"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "side_panel": {
+    "default_path": "sidepanel/index.html"
+  },
+  "action": {
+    "default_icon": {
+      "16": "images/icon16.png",
+      "32": "images/icon32.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    },
+    "default_title": "Generate a summary"
+  }
+}