Local Database and Chrome Extensions (IndexedDB)
Tags: javascript, webdev
Published: 2020-12-03 00:41:10

### <center>Use a local database and Chrome Extension together to increase your app's capacity..</center>

------------

#### <center>This tutorial assumes you know how Google Chrome Extensions work. Learn more [here](https://dev.to/anobjectisa/how-to-build-a-chrome-extension-4oig "here").</center>
#### <center>How to make a Chrome Extension in-depth course? Try our [Teachable](http://anobject.teachable.com "Teachable")
##### <center>We have a course for completely-new-to-web-dev'rs and for experienced web dev's who want a more curated experience.</center>

------------

[![Chrome Extensions and Local Database](https://user-images.githubusercontent.com/58220766/100155604-8d345300-2e75-11eb-98bf-a0dbbd334723.jpg "Chrome Extensions and Local Database")](https://user-images.githubusercontent.com/58220766/100155604-8d345300-2e75-11eb-98bf-a0dbbd334723.jpg "Chrome Extensions and Local Database")

### To demonstrate **IndexedDB** in the context of a **Chrome Extension**, we're going to use a simple HTML page with 2 forms.
* One form for adding records.
* One form for searching and editing records.


![](https://cdn-images-1.medium.com/max/2000/1*bZhOHY1dJm_lW9GIF0RsEA.png)

We'll use this form through the pop-up page of our **Chrome Extension**.

### Let’s begin…

#### Our manifest file…

```
// 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": []
}
```

**Note:**
We don't need any special permissions; we don't need the **storage** permission to use **IndexedDB**.

------------

### Let's take a look at that background script!

When our **Chrome Extension** first installs, we create a database…

```
// 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.")
		}
	}
}
```

…then populate that database.

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

When we get messages to add, get, update, or delete from the foreground..

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

…we can respond with getting, updating, and deleting records…

------------

### Let's take a look at the pop-up page and its accompanying script.

The popup page is a basic html page. Two forms with buttons…

<script src="https://medium.com/media/68449be975e23a3133b092d9337e65a6"></script>

…and of course our **popup-script.js** attached so we can capture and manipulate the DOM.

It's in the **popup-script.js** that we capture form information and send messages to the background script, so the background script can execute
all of the **IndexedDB** commands…

<script src="https://medium.com/media/e761688e35ccd3e88ffdb584057a5913"></script>
> …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!

![](https://cdn-images-1.medium.com/max/2566/1*SZUPgGdO5G_sTnZYm1b2yg.png)

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>Using A Local Database(IndexedDB) with A Google Chrome Extension</center>

{% youtube bUSDQLEjW_M %}