From 0af7b5132d72fec42e184c2509ceb4e885ac0075 Mon Sep 17 00:00:00 2001 From: Xuezhou Dai Date: Thu, 6 Jul 2023 18:19:56 +0800 Subject: [PATCH] Add topsites/basic sample (#967) * Update sample file structure. * Update description * Fix wrong favicon path * Add basic sample * Update README.md * Fix comments --- api-samples/topSites/basic/README.md | 13 +++++++++ api-samples/topSites/basic/icon.png | Bin 0 -> 77 bytes api-samples/topSites/basic/manifest.json | 11 ++++++++ api-samples/topSites/basic/popup.html | 8 ++++++ api-samples/topSites/basic/popup.js | 25 ++++++++++++++++++ .../topSites/{ => magic8ball}/README.md | 2 +- api-samples/topSites/magic8ball/manifest.json | 10 +++++++ .../topSites/{ => magic8ball}/newTab.css | 0 .../topSites/{ => magic8ball}/newTab.html | 0 .../topSites/{ => magic8ball}/newTab.js | 9 ++++++- api-samples/topSites/manifest.json | 10 ------- 11 files changed, 76 insertions(+), 12 deletions(-) create mode 100644 api-samples/topSites/basic/README.md create mode 100644 api-samples/topSites/basic/icon.png create mode 100644 api-samples/topSites/basic/manifest.json create mode 100644 api-samples/topSites/basic/popup.html create mode 100644 api-samples/topSites/basic/popup.js rename api-samples/topSites/{ => magic8ball}/README.md (93%) create mode 100644 api-samples/topSites/magic8ball/manifest.json rename api-samples/topSites/{ => magic8ball}/newTab.css (100%) rename api-samples/topSites/{ => magic8ball}/newTab.html (100%) rename api-samples/topSites/{ => magic8ball}/newTab.js (78%) delete mode 100644 api-samples/topSites/manifest.json diff --git a/api-samples/topSites/basic/README.md b/api-samples/topSites/basic/README.md new file mode 100644 index 0000000000..0fcfb75233 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..ea42f3f1d428afc88baa09c982fcb482f549861c GIT binary patch literal 77 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|BAzaeAr*|tf6hBdNgR`MGwsP@ ZVE8j#fKiKeW;IZr!PC{xWt~$(696(`5kLR{ literal 0 HcmV?d00001 diff --git a/api-samples/topSites/basic/manifest.json b/api-samples/topSites/basic/manifest.json new file mode 100644 index 0000000000..d985a5a35c --- /dev/null +++ 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 new file mode 100644 index 0000000000..913fe5ec52 --- /dev/null +++ b/api-samples/topSites/basic/popup.html @@ -0,0 +1,8 @@ + + + +

Most Visited:

+
+ + + diff --git a/api-samples/topSites/basic/popup.js b/api-samples/topSites/basic/popup.js new file mode 100644 index 0000000000..e972810a98 --- /dev/null +++ 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 b/api-samples/topSites/magic8ball/README.md similarity index 93% rename from api-samples/topSites/README.md rename to api-samples/topSites/magic8ball/README.md index 87087972fc..5dded112bd 100644 --- a/api-samples/topSites/README.md +++ b/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 new file mode 100644 index 0000000000..eeb008db93 --- /dev/null +++ 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 b/api-samples/topSites/magic8ball/newTab.css similarity index 100% rename from api-samples/topSites/newTab.css rename to api-samples/topSites/magic8ball/newTab.css diff --git a/api-samples/topSites/newTab.html b/api-samples/topSites/magic8ball/newTab.html similarity index 100% rename from api-samples/topSites/newTab.html rename to api-samples/topSites/magic8ball/newTab.html diff --git a/api-samples/topSites/newTab.js b/api-samples/topSites/magic8ball/newTab.js similarity index 78% rename from api-samples/topSites/newTab.js rename to api-samples/topSites/magic8ball/newTab.js index b9da951106..022bee7c74 100644 --- a/api-samples/topSites/newTab.js +++ b/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 deleted file mode 100644 index 27d151b372..0000000000 --- a/api-samples/topSites/manifest.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "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 -}