Top sites mv3 sample (GoogleChrome#957)

* Implemented topsites API sample * Added topSites mv3 API sample * Changes based on review
ChiefUSA · Jun 21, 2023 · 0af4863 · 0af4863
1 parent 29806df
commit 0af4863
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 0 deletions.
diff --git a/api-samples/topSites/README.md b/api-samples/topSites/README.md
@@ -0,0 +1,13 @@
+# chrome.topSites
+
+This sample demonstrates using the `chrome.topSites` API to suggest which sites a user should visit.
+
+## Overview
+
+The extension replaces the user's new tab page, and uses `chrome.topSites.get` to display a link to a site to visit.
+
+## 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. Enable the extension and open a new tab.
diff --git a/api-samples/topSites/manifest.json b/api-samples/topSites/manifest.json
@@ -0,0 +1,10 @@
+{
+  "name": "topSites API sample",
+  "version": "2",
+  "description": "An extension demonstrating the chrome.topSites API",
+  "chrome_url_overrides": {
+    "newtab": "newTab.html"
+  },
+  "permissions": ["topSites"],
+  "manifest_version": 3
+}
diff --git a/api-samples/topSites/newTab.css b/api-samples/topSites/newTab.css
@@ -0,0 +1,28 @@
+/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+html {
+  background-color: #ddd;
+}
+
+#spacer {
+  height: 200px;
+}
+
+#title {
+  color: #555;
+  font-weight: bold;
+  height: 200px;
+  vertical-align: middle;
+}
+
+#mostVisitedThumb {
+  background-repeat: no-repeat;
+  height: 200px;
+  margin-left: 20px;
+  padding-left: 20px;
+  vertical-align: middle;
+  width: 212px;
+}
diff --git a/api-samples/topSites/newTab.html b/api-samples/topSites/newTab.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+  -->
+
+<html>
+  <meta charset="utf-8" />
+  <script src="newTab.js"></script>
+  <link rel="stylesheet" href="newTab.css" />
+
+  <title>New 8ball</title>
+
+  <body>
+    <center>
+      <div id="spacer"></div>
+      <span id="title">Magic 8 ball says to visit</span>
+      <a id="mostVisitedThumb">
+        <span></span>
+      </a>
+    </center>
+  </body>
+</html>
diff --git a/api-samples/topSites/newTab.js b/api-samples/topSites/newTab.js
@@ -0,0 +1,26 @@
+// Copyright 2023 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+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 + ')';
+}
+
+window.onload = function () {
+  chrome.topSites.get(thumbnailsGotten);
+};