로컬 데이터베이스 및 Chrome 확장 프로그램(IndexedDB)

로컬 데이터베이스와 Chrome 확장 프로그램을 함께 사용하여 앱의 용량을 늘리십시오..

이 튜토리얼에서는 사용자가 Google 크롬 확장 프로그램의 작동 방식을 알고 있다고 가정합니다. 더 알아보기 .

Chrome 확장 프로그램 심화 과정을 만드는 방법은 무엇입니까? Teachable을 사용해보십시오

완전히 새로운 웹 개발자와 보다 선별된 경험을 원하는 숙련된 웹 개발자를 위한 과정이 있습니다.

Chrome 확장 프로그램 컨텍스트에서 IndexedDB를 시연하기 위해 2가지 형식이 있는 간단한 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 명령…

…and once we receive the IndexedDB data from our background, we go ahead and show the user some visual feedback on the HTML popup page!

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

Google 크롬 확장 프로그램과 함께 로컬 데이터베이스(IndexedDB) 사용