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

Added mv3 bookmarks API sample (#955)

Browse Source 
* Added mv3 bookmarks API sample

* Changes based on review
This commit is contained in:
IanStanion-google
2023-06-21 14:56:16 -04:00
committed by GitHub
parent 2f74f5563f
commit 29806df1b2
5 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
api-samples/bookmarks/README.md Normal file
View File

@@ -0,0 +1,15 @@
# chrome.bookmarks
This sample demonstrates using the `chrome.bookmarks` API to search through, add, and delete bookmarks from the user's bookmark tree.
## Overview
The full bookmark tree is displayed on the extension popup usin `chrome.bookmarks.getTree`.
`chrome.bookmarks.create`is used to add 'https://www.google.com/' to the user's bookmarks. The `chrome.bookmarks.remove` and `chrome.bookmarks.search` APIs are used to find and delete any bookmarks that match 'https://www.google.com/'.
## 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. Pin the extension to the taskbar and open up the popup by clicking the action button.
4. Experiment with adding and removing bookmarks using the buttons within the popup.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 B

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

@@ -0,0 +1,11 @@
{
"manifest_version": 3,
"name": "Bookmark Viewer",
"version": "1.0",
"description": "A simple Chrome extension to display bookmarks",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["bookmarks"]
}

28
api-samples/bookmarks/popup.html Normal file
View File

@@ -0,0 +1,28 @@
<!--
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.
-->
<!DOCTYPE html>
<html>
<head>
<title>Bookmark Viewer</title>
<script src="popup.js" type="module"></script>
</head>
<body>
<button id="addButton">Add Bookmark</button>
<button id="removeButton">Remove Added Bookmarks</button>
<ul id="bookmarkList"></ul>
</body>
</html>

73
api-samples/bookmarks/popup.js Normal file
View File

@@ -0,0 +1,73 @@
/* eslint-disable no-unused-vars */
// 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.
// Search the bookmarks when entering the search keyword.
// Get the bookmarks and display them in the popup
chrome.bookmarks.getTree((tree) => {
const bookmarkList = document.getElementById('bookmarkList');
displayBookmarks(tree[0].children, bookmarkList);
});
// Recursively display the bookmarks
function displayBookmarks(nodes, parentNode) {
for (const node of nodes) {
// If the node is a bookmark, create a list item and append it to the parent node
if (node.url) {
const listItem = document.createElement('li');
listItem.textContent = node.title;
parentNode.appendChild(listItem);
}
// If the node has children, recursively display them
if (node.children) {
const sublist = document.createElement('ul');
parentNode.appendChild(sublist);
displayBookmarks(node.children, sublist);
}
}
}
// Add a bookmark for www.google.com
function addBookmark() {
chrome.bookmarks.create(
{
parentId: '1',
title: 'Google',
url: 'https://www.google.com'
},
() => {
console.log('Bookmark added');
location.reload(); // Refresh the popup
}
);
}
// Remove the bookmark for www.google.com
function removeBookmark() {
chrome.bookmarks.search({ url: 'https://www.google.com/' }, (results) => {
for (const result of results) {
if (result.url === 'https://www.google.com/') {
chrome.bookmarks.remove(result.id, () => {});
}
}
location.reload();
});
}
// Add click event listeners to the buttons
document.getElementById('addButton').addEventListener('click', addBookmark);
document
.getElementById('removeButton')
.addEventListener('click', removeBookmark);