From 0af48630574913e462bc5fc896306858e29a49ea Mon Sep 17 00:00:00 2001 From: IanStanion-google <112102430+IanStanion-google@users.noreply.github.com> Date: Wed, 21 Jun 2023 14:57:18 -0400 Subject: [PATCH] Top sites mv3 sample (#957) * Implemented topsites API sample * Added topSites mv3 API sample * Changes based on review --- api-samples/topSites/README.md | 13 ++++++++++++ api-samples/topSites/manifest.json | 10 +++++++++ api-samples/topSites/newTab.css | 28 ++++++++++++++++++++++++ api-samples/topSites/newTab.html | 34 ++++++++++++++++++++++++++++++ api-samples/topSites/newTab.js | 26 +++++++++++++++++++++++ 5 files changed, 111 insertions(+) create mode 100644 api-samples/topSites/README.md create mode 100644 api-samples/topSites/manifest.json create mode 100644 api-samples/topSites/newTab.css create mode 100644 api-samples/topSites/newTab.html create mode 100644 api-samples/topSites/newTab.js diff --git a/api-samples/topSites/README.md b/api-samples/topSites/README.md new file mode 100644 index 0000000000..87087972fc --- /dev/null +++ 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 new file mode 100644 index 0000000000..27d151b372 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6c070fb88c --- /dev/null +++ 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 new file mode 100644 index 0000000000..5d3c0fda42 --- /dev/null +++ b/api-samples/topSites/newTab.html @@ -0,0 +1,34 @@ + + + + + + + + + New 8ball + + +
+
+ Magic 8 ball says to visit + + + +
+ + diff --git a/api-samples/topSites/newTab.js b/api-samples/topSites/newTab.js new file mode 100644 index 0000000000..b9da951106 --- /dev/null +++ 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); +};