Расширения Chrome и локальная база данных (IndexedDB)

Храните тонны данных на локальном жестком диске.

Если вы хотите узнать основы расширений Google Chrome,ознакомьтесь с моей статьей здесь:

Чтобы продемонстрировать IndexedDB в контексте расширения Chrome, мы будем использовать простую HTML-страницу с двумя формами.

Одна форма для добавления записей.

Единая форма для поиска и редактирования записей.

Мы будем использовать эту форму через всплывающую страницу нашего расширения Chrome.

Давайте начнем

Наш файл манифеста

// manifest.json
{
    "name": "chrome ext with localDB",
    "description": "chrome ext interacting with IndexedDB",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": [
            "./background.js"
        ]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": []
}

Примечание.
Нам не нужны специальные разрешения; нам не нужно разрешение «хранилище», чтобы использовать IndexedDB.

Давайте посмотрим на этот фоновый скрипт!

При первой установке нашего расширения Chrome мы создаем базу данных

// background.js
let db = null;
function create_database() {
    const request = window.indexedDB.open('MyTestDB');
    request.onerror = function (event) {
        console.log("Problem opening DB.");
    }
    request.onupgradeneeded = function (event) {
        db = event.target.result;
        let objectStore = db.createObjectStore('roster', {
            keyPath: 'email'
        });
        objectStore.transaction.oncomplete = function (event) {
            console.log("ObjectStore Created.");
        }
    }
    request.onsuccess = function (event) {
        db = event.target.result;
        console.log("DB OPENED.");
        insert_records(roster);
        db.onerror = function (event) {
            console.log("FAILED TO OPEN DB.")
        }
    }
}

Затем заполните эту базу данных.

// background.js
function insert_records(records) {
    if (db) {
      const insert_transaction = db.transaction("roster", 
                                   "readwrite");
      const objectStore = insert_transaction.objectStore("roster");
      return new Promise((resolve, reject) => {
         insert_transaction.oncomplete = function () {
             console.log("ALL INSERT TRANSACTIONS COMPLETE.");
             resolve(true);
         }
         insert_transaction.onerror = function () {
             console.log("PROBLEM INSERTING RECORDS.")
             resolve(false);
         }
         records.forEach(person => {
           let request = objectStore.add(person);
           request.onsuccess = function () {
             console.log("Added: ", person);
           }
         });
      });
    }
}

Когда мы получаем сообщения для добавления, получения, обновления или удаления с переднего плана:

// background.js
function get_record(email) {
  if (db) {
    const get_transaction = db.transaction("roster", "readonly");
    const objectStore = get_transaction.objectStore("roster");
    return new Promise((resolve, reject) => {
      get_transaction.oncomplete = function () {
        console.log("ALL GET TRANSACTIONS COMPLETE.");
      }
      get_transaction.onerror = function () {
        console.log("PROBLEM GETTING RECORDS.")
      }
      let request = objectStore.get(email);
      request.onsuccess = function (event) {
        resolve(event.target.result);
      }
    });
  }
}
function update_record(record) {
  if (db) {
    const put_transaction = db.transaction("roster", "readwrite");
    const objectStore = put_transaction.objectStore("roster");
    return new Promise((resolve, reject) => {
      put_transaction.oncomplete = function () {
        console.log("ALL PUT TRANSACTIONS COMPLETE.");
        resolve(true);
      }
      put_transaction.onerror = function () {
        console.log("PROBLEM UPDATING RECORDS.")
        resolve(false);
      }
      objectStore.put(record);
    });
  }
}
function delete_record(email) {
  if (db) {
    const delete_transaction = db.transaction("roster", 
                                             "readwrite");
    const objectStore = delete_transaction.objectStore("roster");
    return new Promise((resolve, reject) => {
      delete_transaction.oncomplete = function () {
        console.log("ALL DELETE TRANSACTIONS COMPLETE.");
        resolve(true);
      }
      delete_transaction.onerror = function () {
        console.log("PROBLEM DELETE RECORDS.")
        resolve(false);
      }
      objectStore.delete(email);
    });
  }
}

…мы можем ответить получением, обновлением и удалением записей…

Давайте взглянем на всплывающую страницу и сопровождающий ее скрипт.

Всплывающая страница является базовой HTML-страницей. Две формы с кнопками…

…и, конечно же, наш ‘popup-script.js’, прикрепленный, чтобы мы могли захватывать и управлять DOM.

Именно в файле 'popup-script.js' мы собираем информацию о форме и отправляем сообщения в фоновый скрипт, чтобы фоновый скрипт мог выполнять
всю IndexedDB. > команды…

… и как только мы получим данные IndexedDB из нашего фона, мы продолжим и покажем пользователю некоторую визуальную обратную связь на всплывающей странице HTML!

Если вы хотите ознакомиться с более подробным руководством, посмотрите мой полный видеоурок на YouTube Объект – это А.

Не забудьте подписаться на нас в Instagram и Twitter, чтобы быть в курсе наших последних руководств по веб-разработке.

От имени команды plainenglish.io благодарим вас за внимание.