How to use chrome storage in chrome extension popup

Viewed 638

I will make some chrome extension i used chrome storage, in background.js i can use chrome storage but in popup.js i can't use chrome storage

i know that i can use chrome storage in background and popup

why can't use chrome storage in popup.js? if i print chrome.storage, i get "undefined" message

error code

enter image description here

chrome object log

enter image description here

this is manifest.json

{
    "author": "Teo",
    "manifest_version": 2,
    "name": "네이버웹툰보기",
    "short_name": "네보",
    "description": "네이버 웹툰을 쉽게 볼 수 있는 확장",
    "version": "0.0.1",
    "version_name": "preview",

    "background": {
        "scripts": ["background.js"],
        "persistent": false
       
    },

    "browser_action": {
        "default_icon": "webtoon.png",
        "default_popup": "popup.html"
        
    },

    

    "permissions": [
        "tabs",
        "storage",
        "contextMenus",
        "notifications",
        "<all_urls>"
    ]
}

popup.js

const weekdays = document.querySelectorAll(".divdays");
let webToonDatas = [];

function GetWebToonData(selectedWeekDay, element){
    console.log(chrome.storage); //undefind
    chrome.storage.sync.get(
        selectedWeekDay,
        function(items){
            console.log(items);
            element.ClassName = "divdays2";
            AddData(items);
        }
    )
  }

function AddData(items){
    items.forEach(element => {

    })
}

function onOpenWebtoon() {
    switch (this.innerText) {
        case "월":
            GetWebToonData("mon", this);
            AddData(webToonDatas);
            break;
        case "화":
            break;
        case "수":
            break;
        case "목":
            break;
        case "금":
            break;
        case "토":
            break;
        case "일":
            break;
    }
}

function RegisterEvent() {
    weekdays.forEach(element => {
        element.addEventListener("click", onOpenWebtoon);
    });
}

function init() {
    RegisterEvent();
}

init();

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="popup.css"/>

</head>
<body>
    <div id="divMain">
        <div id="divMonday" class="divdays">
            월
        </div>
    
        <div id="divTuesday" class="divdays">
            화
        </div>
        
        <div id="divWednesday" class="divdays"> 
            수
        </div>
    
        <div id="divThursday" class="divdays">
            목
        </div>
    
        <div id="divFriday" class="divdays">
            금
        </div>
    
        <div id="divSaturday" class="divdays">
            토
        </div>
    
        <div id="divSunday" class="divdays">
            일
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>
0 Answers
Related