Browsing data mv3 sample (#954)

* WIP implementation of an mv3 updated browsingData sample * Update popup.js * Implements mv3 browsingData sample * Corrections based on review
2026-03-26 13:19:49 +07:00 · 2023-06-21 14:31:07 -04:00
parent 41e3f968a5
commit c6088ff5ab
6 changed files with 223 additions and 0 deletions
--- a/api-samples/browsingData/README.md
+++ b/api-samples/browsingData/README.md
@@ -0,0 +1,14 @@
+# chrome.browsingData
+
+This sample demonstrates using the `chrome.browsingData` API to clear the user's history without having to visit the history page.
+
+## Overview
+
+Elements on the extension popup are used to take in user input, and `chrome.browsingData.remove` is implemented to delete the user's history.
+
+## 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 to access the action button.
+4. Open the extension popup by clicking the action button and interact with the UI. Caution: This extension deletes your browser history.
--- a/api-samples/browsingData/icon.png
+++ b/api-samples/browsingData/icon.png
--- a/api-samples/browsingData/manifest.json
+++ b/api-samples/browsingData/manifest.json
@@ -0,0 +1,11 @@
+{
+  "name": "BrowsingData API: Basics",
+  "version": "1.2",
+  "description": "An example implementation of the chrome.browsingData API",
+  "permissions": ["browsingData"],
+  "action": {
+    "default_icon": "icon.png",
+    "default_popup": "popup.html"
+  },
+  "manifest_version": 3
+}
--- a/api-samples/browsingData/popup.css
+++ b/api-samples/browsingData/popup.css
@@ -0,0 +1,82 @@
+/**
+ // 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.
+ */
+
+body {
+  margin: 5px 10px 10px;
+}
+
+h1 {
+  color: #53637D;
+  font: 26px/1.2 Helvetica, sans-serif;
+  font-size: 200%;
+  margin: 0;
+  padding-bottom: 4px;
+  text-shadow: white 0 1px 2px;
+}
+
+label {
+  color: #222;
+  font: 18px/1.4 Helvetica, sans-serif;
+  margin: 0.5em 0;
+  display: inline-block;
+}
+
+form {
+  transition: transform 0.25s ease;
+  width: 563px;
+}
+
+button {
+  display: block;
+  border-radius: 2px;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-user-select: none;
+  background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
+  border: 1px solid #AAA;
+  color: #444;
+  margin-bottom: 0;
+  min-width: 4em;
+  padding: 3px 12px;
+  margin-top: 0;
+  font-size: 1.1em;
+}
+
+.overlay {
+  display: block;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 500px;
+  padding: 20px;
+  margin: -40px 0 0 -270px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  color: #FFF;
+  font: 1.5em/1.2 Helvetica Neue, sans-serif;
+  transition: all 1.0s ease;
+  transform: scale(0);
+}
+
+.overlay a {
+  color:  #FFF;
+}
+
+.overlay.visible {
+  opacity: 1;
+  transform: scale(1);
+}
--- a/api-samples/browsingData/popup.html
+++ b/api-samples/browsingData/popup.html
@@ -0,0 +1,40 @@
+<!--
+ 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>Popup</title>
+    <link href="popup.css" rel="stylesheet" />
+    <script src="popup.js"></script>
+  </head>
+  <body>
+    <h1>BrowsingData API Sample</h1>
+    <div role="main">
+      <form>
+        <label for="timeframe">Remove all browsing data from:</label>
+        <select id="timeframe">
+          <option value="hour">the past hour</option>
+          <option value="day">the past day</option>
+          <option value="week">the past week</option>
+          <option value="4weeks">the past four weeks</option>
+          <option value="forever">the beginning of time</option>
+        </select>
+        <button id="button">OBLITERATE!</button>
+      </form>
+    </div>
+  </body>
+</html>
--- a/api-samples/browsingData/popup.js
+++ b/api-samples/browsingData/popup.js
@@ -0,0 +1,76 @@
+// 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 parseMilliseconds(timeframe) {
+  let now = new Date().getTime();
+  let milliseconds = {
+    hour: 60 * 60 * 1000,
+    day: 24 * 60 * 60 * 1000,
+    week: 7 * 24 * 60 * 60 * 1000,
+    '4weeks': 4 * 7 * 24 * 60 * 60 * 1000
+  };
+
+  if (milliseconds[timeframe]) return now - milliseconds[timeframe];
+
+  if (timeframe === 'forever') return 0;
+
+  return null;
+}
+
+function buttonClicked() {
+  const option = document.getElementById('timeframe');
+  let selectedTimeframe = option.value;
+  let removal_start = parseMilliseconds(selectedTimeframe);
+  if (removal_start == undefined) {
+    return null;
+  }
+  chrome.browsingData.remove(
+    { since: removal_start },
+    {
+      appcache: true,
+      cache: true,
+      cacheStorage: true,
+      cookies: true,
+      downloads: true,
+      fileSystems: true,
+      formData: true,
+      history: true,
+      indexedDB: true,
+      localStorage: true,
+      serverBoundCertificates: true,
+      serviceWorkers: true,
+      pluginData: true,
+      passwords: true,
+      webSQL: true
+    }
+  );
+  const success = document.createElement('div');
+  success.classList.add('overlay');
+  success.setAttribute('role', 'alert');
+  success.textContent = 'Data has been cleared.';
+  document.body.appendChild(success);
+
+  setTimeout(function () {
+    success.classList.add('visible');
+  }, 10);
+  setTimeout(function () {
+    if (close === false) success.classList.remove('visible');
+    else window.close();
+  }, 4000);
+}
+
+window.addEventListener('DOMContentLoaded', function () {
+  const selection = document.getElementById('button');
+  selection.addEventListener('click', buttonClicked);
+});