Add topsites/basic sample (GoogleChrome#967)

* Update sample file structure. * Update description * Fix wrong favicon path * Add basic sample * Update README.md * Fix comments
ChiefUSA · Jul 6, 2023 · 0af7b51 · 0af7b51
1 parent 2852c64
commit 0af7b51
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 12 deletions.
diff --git a/api-samples/topSites/basic/README.md b/api-samples/topSites/basic/README.md
@@ -0,0 +1,13 @@
+# chrome.topSites - Basic
+
+This sample demonstrates using the `chrome.topSites` API to get the user's most visited sites.
+
+## Overview
+
+The extension uses `chrome.topSites.get` to get the user's most visited sites, and then renders them in the popup.
+
+## 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's action icon.
diff --git a/api-samples/topSites/basic/icon.png b/api-samples/topSites/basic/icon.png
diff --git a/api-samples/topSites/basic/manifest.json b/api-samples/topSites/basic/manifest.json
@@ -0,0 +1,11 @@
+{
+  "name": "Top Sites",
+  "version": "1.2",
+  "description": "Shows the top sites in the popup.",
+  "permissions": ["topSites"],
+  "action": {
+    "default_icon": "icon.png",
+    "default_popup": "popup.html"
+  },
+  "manifest_version": 3
+}
diff --git a/api-samples/topSites/basic/popup.html b/api-samples/topSites/basic/popup.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h2 style="width: 300px">Most Visited:</h2>
+    <div id="mostVisited_div"></div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/api-samples/topSites/basic/popup.js b/api-samples/topSites/basic/popup.js
@@ -0,0 +1,25 @@
+// Event listener for clicks on links in an action popup.
+// Open the link in a new tab of the current window.
+function onAnchorClick(event) {
+  chrome.tabs.create({ url: event.target.href });
+  return false;
+}
+
+// Given an array of URLs, build a DOM list of these URLs in the action popup.
+function buildPopupDom(mostVisitedURLs) {
+  const popupDiv = document.getElementById('mostVisited_div');
+  const ol = popupDiv.appendChild(document.createElement('ol'));
+
+  for (let i = 0; i < mostVisitedURLs.length; i++) {
+    const li = ol.appendChild(document.createElement('li'));
+    const a = li.appendChild(document.createElement('a'));
+    a.href = mostVisitedURLs[i].url;
+    a.appendChild(document.createTextNode(mostVisitedURLs[i].title));
+    a.addEventListener('click', onAnchorClick);
+  }
+}
+
+window.onload = async () => {
+  const mostVisitedURLs = await chrome.topSites.get();
+  buildPopupDom(mostVisitedURLs);
+};
diff --git a/api-samples/topSites/README.md → api-samples/topSites/magic8ball/README.md b/api-samples/topSites/README.md → api-samples/topSites/magic8ball/README.md
@@ -1,4 +1,4 @@
-# chrome.topSites
+# chrome.topSites - New Tab Page
 
 This sample demonstrates using the `chrome.topSites` API to suggest which sites a user should visit.
 

diff --git a/api-samples/topSites/magic8ball/manifest.json b/api-samples/topSites/magic8ball/manifest.json
@@ -0,0 +1,10 @@
+{
+  "name": "topSites API sample",
+  "version": "2",
+  "description": "An extension that demonstrates the chrome.topSites API by registering a custom new tab page.",
+  "chrome_url_overrides": {
+    "newtab": "newTab.html"
+  },
+  "permissions": ["topSites", "favicon"],
+  "manifest_version": 3
+}
diff --git a/api-samples/topSites/newTab.css → api-samples/topSites/magic8ball/newTab.css b/api-samples/topSites/newTab.css → api-samples/topSites/magic8ball/newTab.css
diff --git a/api-samples/topSites/newTab.html → api-samples/topSites/magic8ball/newTab.html b/api-samples/topSites/newTab.html → api-samples/topSites/magic8ball/newTab.html
diff --git a/api-samples/topSites/newTab.js → api-samples/topSites/magic8ball/newTab.js b/api-samples/topSites/newTab.js → api-samples/topSites/magic8ball/newTab.js
@@ -12,13 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+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', '16');
+  return url.toString();
+}
+
 function thumbnailsGotten(data) {
   let eightBallWindow = document.getElementById('mostVisitedThumb');
   let rand = Math.floor(Math.random() * data.length);
   eightBallWindow.href = data[rand].url;
   eightBallWindow.textContent = data[rand].title;
   eightBallWindow.style.backgroundImage =
-    'url(chrome://favicon/' + data[rand].url + ')';
+    'url(' + faviconURL(data[rand].url) + ')';
 }
 
 window.onload = function () {

diff --git a/api-samples/topSites/manifest.json b/api-samples/topSites/manifest.json