Cohere Tutorial: Crafting Your Chrome Extension for Article Summarization

Rev Up Your Reading: Cohere Chrome Extension Tutorial for Article Summarization

Greetings! Ever found yourself pressed for time but absolutely needing to read a lengthy article? Fret not! In this distinctive Coherent Application tutorial, uncover the secrets of crafting a bespoke Google Chrome extension to condense any article, significantly cutting down reading time. So, let the magic unfold!

Kindly note that a basic grasp of HTML, CSS, and JavaScript is required - but hey, nothing too daunting to pick up quickly!

How to Create a Chrome Extension?

We will start creating an extension by setting up the appropriate files. My file structure looks like this:

• popup directory contains .html file for extension popup, we will not use it that much, I will just put the extension name here.
• scripts directory has .js file for extension logic - generating buttons and summarization.
• styles directory includes .css file for extension styling.
• manifest.json is a file that holds all the information about the extension. We will start with it.

Manifest File

As mentioned, manifest.json contains all the vital details about the extension in a JSON format. The following elements are crucial:

• css - Path to our css file
• js - Path to our js file
• matches - List of domains where we want to use our extension (for instance: medium.com, towardsai.net, towardsdatascience.com, levelup.gitconnected.com, but feel free to add more domains as needed).

Load Extension to Browser

To load the extension, navigate to your browser settings > extensions. Enable developer mode and click the "Load unpacked" button in the top left corner. Select your extension folder, and you're set!

Let's Code!

To the index.html file, I'll add a basic HTML template with the extension name.

index.css

Here, I will add styles for buttons used for summarization. While they may not be aesthetically pleasing right now, they're functional. I'll explain the necessary classes in the next section.

index.js

In this part, we will implement the core logic of the extension. Initially, we'll create a function to generate buttons for summarization. We'll utilize document.createElement to create buttons and document.body.appendChild to append them to the webpage. Event listeners will be added to these buttons so that when we click them, they trigger the summarization function.

We need to position the button next to the user photo. This requires appending the button to two locations - the sidebar for desktop view, and the bottom bar for mobile. We'll harness the dev tools to get the element selectors for these components. Depending on whether we access the main page or an article directly, the selectors will differ slightly, which we will detail in the guide.

We will create three essential functions for our tutorial - loadButtons, prediction, and cohereReq.

Loading Buttons

Buttons should load when the page successfully loads, except on the homepage. For the main page, it makes more sense to load them upon user interaction, such as a click or scroll event, since the onload event doesn't trigger here. Let's implement that:

window.onload = function() {
    // Your button loading logic here...
};

Summarization Logic

Next, we will implement the functions for summarization. We will use the cohereReq function to obtain the summary from the Cohere API.

Now, let’s extract data from the page and invoke the cohereReq function. This will be executed within the prediction function.

Testing It Out!

Now, let's explore Medium and test our extension!

Currently, our output is restricted to the console. This is intentionally designed to leave room for your enhancements. Challenge yourself to improve the model's performance by revising the prompt! Create a visually appealing popup in popup.html, and display the results in the popup with a loading spinner while waiting for the reply. You can even modify the main button for a better user experience. Showcase your results on our Discord server in the tutorial's text channel. I eagerly wait to see your amazing creations!

Transform Your Browsing Experience!

Effortlessly craft a CoHERE summarization Chrome extension that enhances your reading experience. Discover the exciting world of CoHERE tutorials and learn how to create an AI-powered summarization Chrome extension like a pro! Embark on a journey through lablab.ai's AI hackathons, transforming your brilliant app ideas into reality in just 7 days. Dive into a realm of rich and innovative Cohere applications to further elevate your skills.