Building your First Chrome Extension : IMDb Lookup

Building your First Chrome Extension : IMDb Lookup

www.arbazsiddiqui.me arbazsiddiqui.me2 weeks ago in #Dev Love47

Introduction Browser extensions are programs which can modify and enhance your browsing experience. From small UI enhancements to automation, extensions can be used and built for a wide array of use cases. In this article we will look at a step by step guide to build a chrome extension. What are we building? Well our extension will have two jobs, first will be to fetch IMDb details of any movie from the context menu (right click menu), like this : Second will be demonstrating interaction with web pages and hence fetching IMDb ratings on Rotten Tomatoes home page when we click on extension button and will look like this : Notice how all movie titles are appended with ({imdbRating}) after we click on extension icon. The reason for the dual purpose is to demonstrate how to build background extensions (background scripts), extensions which interact with active web page (content scripts) and how to communicate between the two (message passing). You can find the complete code here. Setup Every chrome extension requires a manifest.json file. Think of it as configuration file which will tell chrome how to treat this extension. Lets just create a basic manifest file with : { “name”: “IMDb Lookup”, “description”: “Display IMDb rating from context menu and on rotten tomatoes”, “version”: “0.1”, “manifest_version”: 2, “background”: { “scripts”: [“background.js”] }, “browser_action”: { “default_icon”: “icon.png” } } name and description are self descriptive and will be same on the chrome web store when you publish your extension. Background scripts are the javascript files which will be running in the background across all pages. They don’t have access to current web page and hence can’t access DOM for reading or manipulations but they do have access to all chrome APIs. As we need to create a new entry in the context menu of chrome, we will be using a background script. browser_action is used to put icons in the main Google Chrome toolbar, to the right of the address bar. You will have to add some icon.png file to your working directory. manifest_version 1 is deprecated by chrome and hence should start with 2. With our manifest ready, lets create a background.js file to test if things are working : Running the extension To run the extension we have built so far, go to chrome://extensions/ and toggle the Developer mode mode on. Click on Load unpacked and browse to the directory containing the extension. It worked ! Every time you make some changes to the code, just click on reload button on your extension card and chrome will incorporate all the changes. Building the background extension Our use case here is that when we highlight any text and right click, the context that appears should have a new menu saying fetch IMDb details for selected text or something and when you click on this menu you should see the IMDb details like rating and year on a popup. To do this we will be using chrome’s context menu API. First we will have to require its permission by adding it in our manifest.json by adding this : “permissions”: [“contextMenus”], Then we can add the following to our background.js file.  » Read More

Like to keep reading?

This article first appeared on arbazsiddiqui.me. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply