DEV Community

Cover image for Build your first Chrome extension (Part 3 - End)
djibril mugisho
djibril mugisho

Posted on • Updated on

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;
    }
Enter fullscreen mode Exit fullscreen mode

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));
            })
        }
    });
};
Enter fullscreen mode Exit fullscreen mode

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 

        })
    }
Enter fullscreen mode Exit fullscreen mode

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();
        }

    })
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)