# LinkedIn Focus Tutorial

###### tags: `Focused Browsing` `Education` `Tutorial`

## Introduction
LinkedIn is a must need portfolio-site for developers. It is great for networking and showcasing your skills to find potential jobs and internships
Hello programmers! Today we will learn to make a Chrome extension that removes the news feed and news panel from LinkedIn so you can focus on your profile and career without distractions.

When the user clicks on the extension icon, it will hide/show the news feed and news panel alternatively with the click event. In this brief tutorial, we plan to cover the following topics:

## How to Make a Chrome Extension

### Use of DOM manipulation techniques to hide news panel and news feed from LinkedIn.

Chrome extensions and all extensions, in general, are made of different but related components like background scripts, content scripts, an options page, UI elements, and various logic files. We create extension components with web development technologies, mainly HTML, CSS, and JavaScript. Extension components depend on their functionality and may not require every option.

In our LinkedIn focus extension, first, we make a directory named LinkedIn-Focus. There we create an src folder that consists of our main extension code. No matter what the extension, it always requires a manifest.json file. We include a manifest.json file in the same src folder. For now, it will contain the name of our extension, a brief description, a version of the extension, version_name, and manifest_version. manifest_version, as the Chrome extension document suggests, is kept as 2.

### Extension Functionality

Now we add the core functionality to the extension. Right now, if the extension is added to Chrome in developer mode, there are no icons for the extension (chrome adds a generic toolbar icon). Also, there is no instruction in the extension that allows it to perform the designated task.

The script used in building extensions is simple JS files connected through a connection port. The events which run the extension are browser triggers. We monitor them in the extension's background script. We load a background page when it is needed and unload it when it goes idle.

In our case, the background script will run as soon as the LinkedIn Focus extension gets installed and waits for the button click event to get dispatched. The button click event is a trigger to notify our extension to act on removing the news feed and news panel. We make a file named background.js in the src directory.

We register Background scripts in the manifest under the “background” field. We list our background.js as an element of an array after the “scripts” key. If there are multiple background scripts, we list them in the same array. As specified in the Chrome extension documentation, the “persistent” key should be specified as false.

In background.js, we set up the listeners. These are functionally relevant events that allow the background script to lie dormant until we fire these events.

Listeners must be registered synchronously from the start of the page.

Before listing out our listeners in the background.js, let's talk about another script that we use to build the core functionality of our extension. We call it the content script as it specifies the extension's content. For our extension, let's call it focus.js. We call it focus.js because this is where we apply dom-manipulation techniques to remove the news feed and news panel, precisely to increase our focus.

We register this script file in the same src directory.

background.js interacts with both the browser as well as the content script. To say, it acts as a bridge between them, and we establish this bridge or connection through a port. The port connection is listed as one of the events in background.js.

In background.js, we declare two global variables named port and focus. For establishing the connection, we use an addListener that takes a callback as a parameter.

Here we set the port as a connection port, which is passed through the callback function, and we send a postMessage.

The next is an onClick event which gets triggered when the extension icon is clicked.

### Calling the Extension

After the background.js listens to these events in chrome, it sends the message to focus.js which is our content script. Now in focus.js, we react according to the message sent from the background script.

In focus.js, we write our main logic of hiding the news feed and news panel, let’s call that function hideDistractions().

We pass it a boolean shouldHide as a parameter. We use this variable because we perform the toggle action while clicking on the extension button of hiding and showing the news feed.

Now using document.getElementByClassName selector, we access the newsFeedContainer that contains the list of news feeds that needs to be hidden. The class-name has been set as “core-rail” as we can see by inspecting the LinkedIn home page.

We implement a tryCatch to make our code robust to any kind of error through error handling. If the boolean shouldHide is true, we hide the news feed while if it is false, we show it again.