


Chrome supports and recommends using event pages since Chrome 22.

So, I used jQuery to manipulate DOM based on my needs.Įvent pages are the single long-running scripts used to manage certain tasks and states. As an added feature, I made my extension to be able to insert download buttons in the webpage itself. Of course, you can you any of your favorite JavaScript library to make your content scripts more efficient. The exact scraping expression will depend upon the webpage that you want to scrape, and how the desired url is nested among html tags.

In our project, content script will scrape the webpage and fetches the desired URLs. For more information about manifest file, read Google’s Manifest File Format documentation.Īt a bare minimum, our extension needs below content: This file is basically some metadata in json format that contains basic properties about our extension, such as extension’s name, description, version number etc. Let’s discuss each of the component one-by-one. To create a Chrome extension, you need to have following components: In this post, I will share the learning from making my first Chrome extension.īuilding blocks of a Chrome browser extension And then display the module-wise download buttons to the end-user, to enable bulk downloading of all the files with a single click. To do this, I designed my extension in such a way that it will scrape the current page and all the linked webpages to fetch a list of available downloads links. So, I decided to make a Chrome extension that allows the user to download all the course material in a single click, right from the course page, without having to go to each module and then click each file link separately. However, this portal, along with a few uChicago portals require the user to take some unnecessary navigational steps to download files. How to make a Chrome browser extension from scratch | Understanding Chrome extension anatomyĪs a student at the University of Chicago, I regularly use the university’s Canvas portal to access class materials.
