WebExtensionsメモ forget-it

2017/10/30-編集中

水色背景文字は未確認の部分

forget-it

https://github.com/mdn/webextensions-examples/tree/master/forget-it

右下に表示させる通知を作る方法
アドオンの設定オプションページの作成方法
ブラウザに保存されている履歴やクッキーなどを削除する方法

などの役に立つと思います。通知はFirefoxではオプションがまだ少ないです。表示位置などを調整できるようになるといろいろ使えそうなんですが。

manifest.json

  "browser_action": {
    "default_icon": "icons/trash.svg",
    "default_title": "Forget it!"
  },

  "options_ui": {
    "page": "options/options.html"
  },

  "permissions": [
    "browsingData",
    "notifications",
    "storage"
  ]

“options_ui”:

拡張機能のオプションページを定義します。オプションページには、拡張機能の設定が含まれています。ユーザーはブラウザのアドオンマネージャからアクセスでき、 runtime.openOptionsPage()を使用して拡張機能内から開くことができます。

“page”:

HTMLファイルを指定。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui

“permissions”:

“browsingData”

ブラウザに保存されているデータを削除できる。キャッシュダウンロード履歴などなど。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/browsingData

“notifications”

ユーザーに通内を表示します。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications

options,js

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

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

const gettingStoredSettings = browser.storage.local.get();
gettingStoredSettings.then(updateUI, onError);

const saveButton = document.querySelector("#save-button");
saveButton.addEventListener("click", storeSettings);

function storeSettings()

オプションページの設定保存が押されたらストレージに保存する関数。

sinceとdatatypeが入っている。

function updateUI()

オプションページを開いたときに保存されている設定を反映させる関数。

background.js

var defaultSettings = {
  since: "hour",
  dataTypes: ["history", "downloads"]
};

function onError(e) {
  console.error(e);
}

function checkStoredSettings(storedSettings) {
  if (!storedSettings.since || !storedSettings.dataTypes) {
    browser.storage.local.set(defaultSettings);
  }
}

const gettingStoredSettings = browser.storage.local.get();
gettingStoredSettings.then(checkStoredSettings, onError);

var defaultSettings

オプションページの設定が何も指定されていない場合に使う設定。

function checkStoredSettings()

const gettingStoredSettings = browser.storage.local.get();

gettingStoredSettings.then(checkStoredSettings, onError);

オプションページの設定が何も指定されていない場合にデフォルトセッティングを使うようにする関数。

background.js

function forget(storedSettings) {

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

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

browser.browserAction.onClicked.addListener(() => {
  const gettingStoredSettings = browser.storage.local.get();
  gettingStoredSettings.then(forget, onError);
});

function forget()

渡された引数を元にbrowsingData APIでブラウザに保存されているデータを削除する関数。

notifications.create()

通知を作成して表示します。右下に表示されます。位置変更の方法などあるかは不明。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications/create

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications/NotificationOptions

storage.local.get()

引数を指定しない場合は全部取ってきます。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/StorageArea/get