Kita lanjutkan pembelajaran kita tentang Belajar Membuat Google Chrome Extention Part 2 tentang Menggunakan LocaStorage. Local storage bisa kita gunakan untuk menyimpan pengaturan pengaturan yang ada di dalam chrome extention. Kita akan membuat chrome extention CURD sederhana kedalam local storage extention dari google chrome

Beberapa method yang bisa ktia gunakan

Set Data / Tambah Data /Update

locaStorage.setItem("key","value")
localStorage["key"]="value"

Get Data

locaStorage.getItem("key")
localStorage["key"]

RemoveData

locaStorage.removeItem("key")

Get All Key

for (let i = 0; i < localStorage.lenght; i++) {
  console.log(localStorage.key(i))
}

 

Step step pembuatan extention

1. Membuat manifest.json

{
"name": "latihan",
"version": "1.0",
"manifest_version": 3,
"description": "Latihan",
"action": {
"default_icon": "icon.png",
"default_title": "latihan bikin extention",
"default_popup": "popup.html"
}
}

2. Membuat popup.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>textarea { resize: none; }</style>
<body>
<h1>Belajar Bikin Extention : Storage</h1>
<textarea id="mydata" name="w3review" rows="10" cols="50"></textarea>
<button id="update" style="width:50%;padding:10px;" type="button">Update</button><button id="remove" style="width:50%;padding:10px;" type="button">Remove</button>
<script src="script.js"></script>
</body>
</html>

3. Membuat script.js


const btnUpdate = document.querySelector("#update");
const btnRemove = document.querySelector("#remove");
const data = document.querySelector("#mydata");
const key ="riffasoft";

data.value=localStorage[key];

btnUpdate.onclick=()=>{
localStorage.setItem(key,data.value)
}

btnRemove.onclick=()=>{
document.querySelector("#mydata").value="";
localStorage.removeItem(key)
}