Split favicon into two separate examples (GoogleChrome#806)

AmySteam · web-flow · commit c7bd96fc5103 · 2023-01-19T08:08:44.000-06:00
* Favicon split examples draft * Fix content script * Tweak popup * Add alt to img Tweak css * Add readme * Tweak img * Tweak img * Apply @oliverdunk's tech review
diff --git a/api/favicon/content.html b/api/favicon/content.html
diff --git a/api/favicon/content.js b/api/favicon/content.js
diff --git a/api/favicon/manifest.json b/api/favicon/manifest.json
@@ -1,17 +1,9 @@
 {
-  "name": "Favicon",
-  "version": "1",
+  "name": "Favicon API in a popup",
+  "version": "1.1",
   "manifest_version": 3,
   "permissions": ["favicon"],
-  "content_scripts": [{
-    "matches": ["<all_urls>"],
-    "js": ["content.js"],
-    "run_at": "document_idle"
-  }],
-  "web_accessible_resources": [{
-    "resources": [ "_favicon/*" ],
-    "matches": ["<all_urls>"],
-    "extension_ids": [ "*" ]
-  }],
-  "action": { "default_popup": "content.html" }
+  "action": {
+    "default_popup": "popup.html"
+  }
 }
diff --git a/api/favicon/popup.html b/api/favicon/popup.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+    <script src="popup.js"></script>
+</body>
+</html>
diff --git a/api/favicon/popup.js b/api/favicon/popup.js
@@ -0,0 +1,11 @@
+function faviconURL(u) {
+  const url = new URL(chrome.runtime.getURL("/_favicon/"));
+  url.searchParams.set("pageUrl", u); // this encodes the URL as well
+  url.searchParams.set("size", "32");
+  return url.toString();
+}
+
+const img = document.createElement('img');
+// chrome-extension://EXTENSION_ID/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32
+img.src = faviconURL("https://www.google.com") 
+document.body.appendChild(img);
diff --git a/examples/favicon-cs/README.md b/examples/favicon-cs/README.md
@@ -0,0 +1,16 @@
+## Fetching a favicon in a content script
+
+This example fetches the favicon from www.google.com and inserts it at the top left of every page.
+
+Note: This extension does not work on `chrome://extensions`.
+
+See [Fetching favicons](https://developer.chrome.com/docs/extensions/mv3/favicon) to learn more. 
+
+## Testing the extension
+
+1. Follow the instructions to load an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+2. Navigate to [www.example.com](https://www.example.com/).
+
+It should look like this:
+
+<img src="https://wd.imgix.net/image/BhuKGJaIeLNPW9ehns59NfwqKxF2/3Q1glvnzbWhraXRtnGOy.png" alt="Content script using the Favicon API" width="400"/>
diff --git a/examples/favicon-cs/content.js b/examples/favicon-cs/content.js
@@ -0,0 +1,12 @@
+function faviconURL(u) {
+  const url = new URL(chrome.runtime.getURL("/_favicon/"));
+  url.searchParams.set("pageUrl", u); // this encodes the URL as well
+  url.searchParams.set("size", "32");
+  return url.toString();
+}
+
+const imageOverlay = document.createElement('img');
+imageOverlay.src = faviconURL("https://www.google.com");
+imageOverlay.alt = "Google's favicon";
+imageOverlay.classList.add('favicon-overlay');
+document.body.appendChild(imageOverlay);
diff --git a/examples/favicon-cs/manifest.json b/examples/favicon-cs/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Favicon API in content scripts",
+  "version": "1.1",
+  "manifest_version": 3,
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["style.css"]
+    }
+  ],
+  "permissions": ["favicon"],
+  "web_accessible_resources": [
+    {
+      "resources": ["_favicon/*"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}
diff --git a/examples/favicon-cs/style.css b/examples/favicon-cs/style.css
@@ -0,0 +1,7 @@
+.favicon-overlay {
+    all: initial !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    z-index: 9999 !important;
+  }
