centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

Add topsites/basic sample (#967)

Browse Source 
* Update sample file structure.

* Update description

* Fix wrong favicon path

* Add basic sample

* Update README.md

* Fix comments
This commit is contained in:
Xuezhou Dai
2023-07-06 18:19:56 +08:00
committed by GitHub
parent 2852c64790
commit 0af7b5132d
11 changed files with 76 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
api-samples/topSites/basic/README.md Normal file
View File

@@ -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.

BIN
api-samples/topSites/basic/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 B

11
api-samples/topSites/basic/manifest.json Normal file
View File

@@ -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
}

8
api-samples/topSites/basic/popup.html Normal file
View File

@@ -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>

25
api-samples/topSites/basic/popup.js Normal file
View File

@@ -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);
};

2
api-samples/topSites/README.md → api-samples/topSites/magic8ball/README.md
View File

@@ -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.

10
api-samples/topSites/magic8ball/manifest.json Normal file
View File

@@ -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
}

0
api-samples/topSites/newTab.css → api-samples/topSites/magic8ball/newTab.css
View File

0
api-samples/topSites/newTab.html → api-samples/topSites/magic8ball/newTab.html
View File

9
api-samples/topSites/newTab.js → api-samples/topSites/magic8ball/newTab.js
View File

@@ -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 () {

10
api-samples/topSites/manifest.json
View File

@@ -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
}