Forget it (#183)

* started browsingData example

* Added browsingData example

* Remove unwanted files

* Remove logging statements

* Added comments

* Simplify storage inititialization

* Fix review comments

forget-it/README.md

@@ -0,0 +1,5 @@
+# Forget it!
+
+This add-on adds a button to the browser's toolbar. When the user clicks the button, the add-on clears some browsing data using the browsingData API. The details of what exactly it clears are determined by the add-on's settings, which can be accessed and modified in its options page.
+
+The example shows how to use the browsingData API, and how to use the options page to handle settings.

forget-it/background.js

@@ -0,0 +1,89 @@
+/*
+Default settings. If there is nothing in storage, use these values.
+*/
+var defaultSettings = {
+  since: "hour",
+  dataTypes: ["history", "downloads"]
+};
+
+/*
+Generic error logger.
+*/
+function onError(e) {
+  console.error(e);
+}
+
+/*
+On startup, check whether we have stored settings.
+If we don't, then store the default settings.
+*/
+function checkStoredSettings(storedSettings) {
+  if (!storedSettings.since || !storedSettings.dataTypes) {
+    browser.storage.local.set(defaultSettings);
+  }
+}
+
+const gettingStoredSettings = browser.storage.local.get();
+gettingStoredSettings.then(checkStoredSettings, onError);
+
+/*
+Forget browsing data, according to the settings passed in as storedSettings
+or, if this is empty, according to the default settings.
+*/
+function forget(storedSettings) {
+
+  /*
+  Convert from a string to a time.
+  The string is one of: "hour", "day", "week", "forever".
+  The time is given in milliseconds since the epoch.
+  */
+  function getSince(selectedSince) {
+    if (selectedSince === "forever") {
+      return 0;
+    }
+
+    const times = {
+      hour: () => { return 1000 * 60 * 60 },
+      day: () => { return 1000 * 60 * 60 * 24 },
+      week: () => { return 1000 * 60 * 60 * 24 * 7}
+    }
+
+    const sinceMilliseconds = times[selectedSince].call();
+    return Date.now() - sinceMilliseconds;
+  }
+
+  /*
+  Convert from an array of strings, representing data types,
+  to an object suitable for passing into browsingData.remove().
+  */
+  function getTypes(selectedTypes) {
+    let dataTypes = {};
+    for (let item of selectedTypes) {
+      dataTypes[item] = true;
+    }
+    return dataTypes;
+  }
+
+  const since = getSince(storedSettings.since);
+  const dataTypes = getTypes(storedSettings.dataTypes);
+
+  function notify() {
+    let dataTypesString = Object.keys(dataTypes).join(", ");
+    let sinceString = new Date(since).toLocaleString();
+    browser.notifications.create({
+      "type": "basic",
+      "title": "Removed browsing data",
+      "message": `Removed ${dataTypesString}\nsince ${sinceString}`
+    });
+  }
+
+  browser.browsingData.remove({since}, dataTypes).then(notify);
+}
+
+/*
+On click, fetch stored settings and forget browsing data.
+*/
+browser.browserAction.onClicked.addListener(() => {
+  const gettingStoredSettings = browser.storage.local.get();
+  gettingStoredSettings.then(forget, onError);
+});

forget-it/icons/LICENSE

@@ -0,0 +1 @@
+The trash.svg” icon is taken from the miu iconset and is used under the terms of its license: https://www.iconfinder.com/iconsets/miu.

forget-it/icons/trash.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="Artboard-1" transform="translate(-863.000000, -479.000000)"><g id="slice" transform="translate(215.000000, 119.000000)"/><path d="M866.001204,480 C866.001204,480 865.500001,480 865.5,481 C865.5,482 866.001204,482 866.001204,482 L883.998796,482 C883.998796,482 884.5,482 884.5,481 C884.5,480 883.998796,480 883.998796,480 L866.001204,480 L866.001204,480 Z M866.473755,483 L867.472736,483 L869.473755,500 L880.473755,500 L882.473755,483 L883.473755,483 L881.473755,501 L868.473755,501 L866.473755,483 Z M873.473755,479 C872.473755,479 872.473755,480 872.473755,480 L877.473755,480 C877.473755,480 877.473755,479 876.473755,479 L873.473755,479 L873.473755,479 Z M871.473755,499 L872.473755,499 L871.473755,482.962891 L870.473755,482.962891 L871.473755,499 Z M878.473755,482.962891 L877.473755,499 L878.473755,499 L879.473755,482.962891 L878.473755,482.962891 L878.473755,482.962891 Z M874.473755,482.962891 L874.473755,499 L875.473755,499 L875.473755,482.962891 L874.473755,482.962891 L874.473755,482.962891 Z" fill="#000000" id="editor-trash-delete-recycle-bin-outline-stroke"/></g></g></svg>

forget-it/manifest.json

@@ -0,0 +1,30 @@
+{
+
+  "description": "Forget it!",
+  "manifest_version": 2,
+  "name": "forget-it",
+  "version": "2.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/forget-it",
+  "icons": {
+    "48": "icons/trash.svg"
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": "icons/trash.svg",
+    "default_title": "Forget it!"
+  },
+
+  "options_ui": {
+    "page": "options/options.html"
+  },
+
+  "permissions": [
+    "browsingData",
+    "notifications",
+    "storage"
+  ]
+}

forget-it/options/options.css

@@ -0,0 +1,36 @@
+
+body {
+  width: 25em;
+  font-family: "Open Sans Light", sans-serif;
+  font-size: 0.9em;
+  font-weight: 300;
+}
+
+section.clear-options {
+  padding: 0.5em 0;
+  margin: 1em 0;
+}
+
+#clear-button {
+  margin: 0 1.3em 1em 0;
+}
+
+section.clear-options input,
+section.clear-options>select,
+#clear-button {
+  float: right;
+}
+
+label {
+  display: block;
+  padding: 0.2em 0;
+}
+
+label:hover {
+  background-color: #EAEFF2;
+}
+
+.title {
+  font-size: 1.2em;
+  margin-bottom: 0.5em;
+}

forget-it/options/options.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="options.css"/>
+  </head>
+
+  <body>
+
+    <section class="clear-options">
+      <span class="title">Time range to forget:</span>
+      <select id="since">
+        <option value="hour" selected>Last hour</option> 
+        <option value="day">Last day</option>
+        <option value="week">Last week</option>
+        <option value="forever">Forever</option>
+      </select>
+    </section>
+
+    <section class="clear-options data-types">
+      <div class="title" >Type of data to forget:</div>
+
+      <label>Downloads<input type="checkbox" checked="true" data-type="downloads"/></label>
+      <label>Cache<input type="checkbox" checked="true" data-type="cache"/></label>
+      <label>Passwords<input type="checkbox" data-type="passwords"/></label>
+      <label>History<input type="checkbox" checked="true" data-type="history"/></label>
+      <label>Plugin data<input type="checkbox" data-type="pluginData"/></label>
+      <label>Form data<input type="checkbox" data-type="formData"/></label>
+      <label>Cookies<input type="checkbox" data-type="cookies"/></label>
+      <label>Service workers<input type="checkbox" data-type="serviceWorkers"/></label>
+
+    </section>
+
+    <input type="button" value="Save preferences" id="save-button"/>
+
+    <script src="options.js"></script>
+  </body>
+
+</html>

forget-it/options/options.js

@@ -0,0 +1,62 @@
+/*
+Store the currently selected settings using browser.storage.local.
+*/
+function storeSettings() {
+
+  function getSince() {
+    const since = document.querySelector("#since");
+    return since.value;
+  }
+
+  function getTypes() {
+    let dataTypes = [];
+    const checkboxes = document.querySelectorAll(".data-types [type=checkbox]");
+    for (let item of checkboxes) {
+      if (item.checked) {
+        dataTypes.push(item.getAttribute("data-type"));
+      }
+    }
+    return dataTypes;
+  }
+
+  const since = getSince();
+  const dataTypes = getTypes();
+  browser.storage.local.set({
+    since,
+    dataTypes
+  });
+}
+
+/*
+Update the options UI with the settings values retrieved from storage,
+or the default settings if the stored settings are empty.
+*/
+function updateUI(restoredSettings) {
+  const selectList = document.querySelector("#since");
+  selectList.value = restoredSettings.since;
+
+  const checkboxes = document.querySelectorAll(".data-types [type=checkbox]");
+  for (let item of checkboxes) {
+    if (restoredSettings.dataTypes.indexOf(item.getAttribute("data-type")) != -1) {
+      item.checked = true;
+    } else {
+      item.checked = false;
+    }
+  }
+}
+
+function onError(e) {
+  console.error(e);
+}
+
+/*
+On opening the options page, fetch stored settings and update the UI with them.
+*/
+const gettingStoredSettings = browser.storage.local.get();
+gettingStoredSettings.then(updateUI, onError);
+
+/*
+On clicking the save button, save the currently selected settings.
+*/
+const saveButton = document.querySelector("#save-button");
+saveButton.addEventListener("click", storeSettings);