Когда я нажимаю на элемент в popup.html в расширении Chrome я не могу ничего сохранить в хранилище chrome или страницы

#javascript #google-chrome #plugins

Вопрос:

когда я нажимаю кнопку в popup.html, Я не могу сохранить какие-либо данные в локальное хранилище или хранилище chrome. Мне нужно увидеть на странице, на какую кнопку я нажал popup.html. Не могли бы вы, пожалуйста, помочь?

foreground.js

 window.onload=()=>{
    console.log('âsdasdasd') 
}
 

манифест.json

 {
    "name": "ZFC",
    "version": "1.0",
    "manifest_version":2,
    "background": {
        "scripts":["./background.js"]
    },
    "icons": { "16": "./img/16.png",
        "48": "./img/48.png",
       "128": "./img/128.png" },
       
    "browser_action":{
        "default_popup":"./popup.html"
    },
    "permissions":[
        "tabs",
        "<all_urls>",
        "storage"
    ]
} 

main.js

 var user = [
    {
        "id": "1",
        "profileIMG1": "https://bgcp.bionluk.com/images/avatar/200x200/8f8589ae-a3fc-410a-9b6d-34e8dc0d8afa.jpeg",
        "profileIMG2": "https://bgcp.bionluk.com/images/avatar/200x200/pegarosevoNxksoW.jpg",
        "site": "https://www.insaatgundemi.com/",
        "rss": "https://cdn.mysitemapgenerator.com/shareapi/rss/0910349352"
    },
    {
        "id": "2",
        "profileIMG1": "https://bgcp.bionluk.com/images/avatar/200x200/1dce6ec1-4807-4ba1-b59f-d0bf57ed54f8.png",
        "profileIMG2": "https://gcdn.bionluk.com/uploads/general/No_Avatar.png",
        "site": "https://www.insaatgundemi.com/",
        "rss": "https://www.insaatgundemi.com/feed"
    }
]

document.body.innerHTML = '';
var item = document.createElement('div');
item.classList.add('zfc');
user.forEach(es => {
    var d = document.createElement('div');
    d.classList.add('user');
    d.innerHTML = `
    <div class="user">
        <a href="${es.site}" target="_blank" onclick="window.open(${es.site})" class="user-a user-item">
            <span>Siteye Git</span>
            <img src="${es.profileIMG1}">
        </a>
        
        <div class="user-item">
            <span>Son İçerikler</span>
            <img src="${es.profileIMG2}">
        </div>
    </div>
    `
    item.appendChild(d)
});

document.body.appendChild(item)



var obj = {};
obj['buttonState'] = 'count';
chrome.storage.sync.set(obj, function() {
  // this called after the save
});

chrome.storage.sync.get('buttonState', function(data) {   
    // this is called after the retrieve.
    count = data['buttonState'];
    document.body.innerHTML=count;
}); 

background.js

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    chrome.tabs.executeScript(null, {file: "./foreground.js"});
    // chrome.tabs.insertCSS(null,{file:'./style.css'})
});  

popup.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>ZFC</title>
</head>
<body>
   


<div class="zfc-cntrl-zfc"></div>
<script src="main.js"></script>
  
</body>
</html> 
 chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to '   value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is '   result.key);
});
 

Я не мог запустить вышеуказанные коды. Когда я нажимаю кнопку в popup.html, как я могу отразить любой атрибут кнопки n на странице?