Build your first Chrome extension (Part 3 - End)

Yeah, it's me again, in this last episode we are adding the remaining functionalities to our project.
we have done a lot of stuff through the previous episode but we still with some uncompleted stuff.

If you went through the first article you remember that we created a list of blocked websites on our popup, but the data used was hard coded, let start by fetching real data from the local storage, and then later on we can proceed with the deletion part. To do so we need another additional action within the background script that will be used for returning the data.

Again if you don't understand anything please start with previous episodes.

event.js

    if (request.action === 'get_blocked') {
        chrome.storage.local.get(['blocked_sits'], function (result) {
            sendResponse(result.blocked_sits);
        });

        return true;
    }

With the ability to fetch data, let's now consume what we get back.
Open your popup script and update the printSiteElement with the below code

const printSiteElement = async () => {
    chrome.runtime.sendMessage({ action: "get_blocked" }).then((result) => {
        if (chrome.runtime.lastError) {
            console.log(console.log(result)) //print error
        } else {
            result?.forEach((site) => {
                document.querySelector(".blocked-sits").appendChild(siteElement(site));
            })
        }
    });
};

now we are rendering real data, let's add the last missing piece of the application which is allowing users to delete a blocked website so that they can visit it again. To do so we shall follow the previous pattern, create an action within the background scripts, and then connect that with the popup script. That makes sense let's do it 😎

action

    if (request.action === 'remove') {
        chrome.storage.local.get(['blocked_sits'], (result) => {
            const index = result.blocked_sits.findIndex((site) => request.host === site); //find index 
            const blockedSites = result.blocked_sits;

            blockedSites.splice(index, 1);//remove  at targeted index 
            chrome.storage.local.set({ blocked_sits: blockedSites });// upadte storage 

        })
    }

update the unlockWebsite function with the above code

popup.js

const unlockWebsite = (host) => {
    chrome.runtime.sendMessage({ action: "remove" }).then(() => {
        if (chrome.runtime.lastError) {
            console.log(chrome.runtime.lastError) //log your error
        } else {
            const container = document.getElementById(host)
            container.remove();
        }

    })
}

Deployment

what is the point of building a Chrome extension if you won't deploy it on the Chrome store 🤔 I realized that explaining each step about how you can get your extension online may be very long and confusing, to make the job easier for me and you, I decided to provide this youtube playlist containing useful information about deploying chrome extensions, it's a very short playlist of only 5 videos of 5min each 😇

playlist 🎬

I'm sure you enjoyed the videos 😅

Finally, this journey is over if you went through all the episodes I'm sure you learned a lot about Chrome extensions. If you think my content is useful or informative please drop a comment or like 🙏. For any incorrect information let me know in the comment.