Блог

Для страницы параметров моего расширения Chrome у меня есть две переключатели для переключения между отображением и не отображением кнопок на странице. Функция работает, но мне требуется несколько перезагрузок веб-страницы, прежде чем изменения вступят в силу. Требуется ли некоторое время для сохранения в chrome.storage, прежде чем изменения вступят в силу/могут быть использованы?

вот JS для моей страницы параметров:

 const saveBtn = document.getElementById('save-btn');

saveBtn.addEventListener('click', () => {

    if(document.getElementById('show_btns').checked){
        console.log('true');
        chrome.storage.sync.set({ btn_disp: true });
    } else {
        console.log('false');
        chrome.storage.sync.set({ btn_disp: false });
    }

});
 

Фоновый скрипт ожидает загрузки страницы, затем вводит сценарии содержимого и css и отправляет пользовательские данные с сообщением.

 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    //inject the script into page
    //only inject on complete load

    //listening for the 'complete' message from tabs

    if(changeInfo.status === 'complete' amp;amp; /^http/.test(tab.url)){

        chrome.scripting.executeScript({
            target: { tabId: tabId },
            files: ['./src/js/foreground.js']
        })
            .then(() => {
                console.log('INJECTED');
            })
            .catch(err => console.log(err));

        chrome.scripting.insertCSS({
            target: {tabId: tabId},
            files: ['./src/css/page_btn_styles.css']
        })
            .then(() => {
                console.log('page_btn_styles.css injected');
                sendToForeground();
            })    
            .catch(err => console.log(err));
        }
});

//page loaded -> load buttons
function sendToForeground() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { message: 'page_loaded', data: user_data }, (response) => {
            console.log('page_loaded message sent');
        });
    });
    
}
 

Мой сценарий содержимого прослушивает сообщение из фонового сценария, загруженного на страницу. Фоновый скрипт отправляет объект пользовательских данных с сообщением.

 //message from background.js that page has loaded
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if(request.message === 'page_loaded'){
        const allElements = document.querySelectorAll('*');

        for(let i = 0; i < allElements.length; i  ) {
            if(allElements[i].className.toString().match(/ingredient/g)){
                console.log(request.data);
                loadPageBtns(request.data);
                break;
            }   
        }   
    }
    sendResponse({});
});
 

JS для загрузки кнопок страницы в сценарии содержимого

 function loadPageBtns(user_data) {
    if(user_data.btn_disp){
        //container for buttons on page
        let container = document.createElement('div');
        container.id = 'btns-container';

        //ingredients button
        let ingredientsBtn = document.createElement('button');
        ingredientsBtn.id = 'ingredients-btn';
        ingredientsBtn.classList.add('page-btns');
        ingredientsBtn.classList.add('animated');
        ingredientsBtn.classList.add('bounceInLeft');
        ingredientsBtn.innerText = 'Get Ingredients';
        ingredientsBtn.addEventListener('click', () => {
            scrollToIngredients();
        });
        ingredientsBtn.addEventListener('mouseover', () => {
            ingredientsBtn.classList.remove('animated');
        });


        //load event handler for click on recipe 
        //recipe button
        let recipesBtn = document.createElement('button');
        recipesBtn.id = 'recipes-btn';
        recipesBtn.classList.add('page-btns');
        recipesBtn.classList.add('animated');
        recipesBtn.classList.add('bounceInLeft');
        recipesBtn.innerText = 'Get Recipe';
        recipesBtn.addEventListener('click', () => {
            scrollToDirections();
        });
        recipesBtn.addEventListener('mouseover', () => {
            recipesBtn.classList.remove('animated');
        });

        container.appendChild(ingredientsBtn);
        container.appendChild(recipesBtn);

        document.body.appendChild(container);
    }  
}