Cohere Tutorial: Create a Summarization Chrome Extension

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?

To start creating an extension, you will need to create the appropriate files. My file structure looks like this:

• popup: Contains the .html file for the extension popup, we will not use it much; I will just put the extension name here.
• scripts: Contains the .js file for the extension logic - creating buttons and summarization.
• styles: Contains the .css file for the extension styling.
• manifest.json: This file contains all the information about the extension.

Manifest File

As previously mentioned, manifest.json is a file that contains all the information about the extension. It is a JSON format file. This will be our content for this file:

{
  "manifest_version": 3,
  "name": "Cohere Article Summarizer",
  "version": "1.0",
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://medium.com/*", "*://towardsai.net/*", "*://towardsdatascience.com/*", "*://levelup.gitconnected.com/*"],
      "js": ["scripts/index.js"],
      "css": ["styles/index.css"]
    }
  ]
}

Load Extension to Browser

To load the extension, go to the browser, then navigate to Settings > Extensions. Turn on Developer Mode and click the Load unpacked button in the top left corner. Select your extension folder, and you're done!

Let's Code!

In the popup.html file, you will put a basic HTML template with the extension name.

index.css

Here, you will put some styles for the buttons we will use for summarization. They won't be beautiful for now, but they will serve their purpose. I will explain why I use these classes in the next section.

index.js

This file will contain the logic for our extension. First, we will create a function that generates buttons for summarization. We will use document.createElement to create buttons and document.body.appendChild to append them to the body of the page. We will also add event listeners to buttons, so when we click on them, it will call a function for summarization.

We want to place our button next to the user photo. Thus, we will need to append it to two places - the sidebar for desktop view and the bottom bar for mobile view. To do this, I will utilize DevTools to obtain element selectors for these elements.

There are two possible situations: navigating to the main page and choosing one of the articles, or going directly to an article. The selectors are slightly different for both options, which we will include in the guide.

We will create three functions for the tutorial: loadButtons, prediction, and cohereReq.

Loading Buttons

We want to load the buttons when the page loads, but not on the home page. If we navigate to the main page, it would be better to load them on click or scroll. When entering the article from the main page, the onload event is not performed, so that would be the right solution for us. Let's implement this:

window.onload = function() {
    if (document.location.pathname !== '/home') {
        loadButtons(); 
    }
};

Summarization Logic

Let's code the functions for summarization. We will use the cohereReq function to obtain a summary from the Cohere API.

Now we will implement the logic to extract data from the page and call the cohereReq function. We will use the prediction function for this.

Testing the Extension

Now we can test it! Let’s head to Medium and check it out!

As you can see, we can only get the answer in the console. I specifically did this to leave some room for improvement. Think of it as a challenge! Try to enhance the performance of the model by editing the prompt.

Next Steps

Create a user-friendly popup in popup.html, and display a popup with the received reply. Implement a spinner during the response wait time. Additionally, feel free to edit the main button design.

Show off the results of your work on our Discord in the tutorial's text channel! I am eagerly waiting to see what you have created!

Transform Your Browsing Experience: Effortlessly Craft a CoHERE Summarization Chrome Extension!

Unearth the marvel of the CoHERE tutorial and discover how to create an AI-powered summarization Chrome extension like a pro! Embark on a journey through lablab.ai's AI hackathons, manifesting your stellar app ideas in just 7 days. Dive deep into a realm of captivating Cohere tutorials, and find enchantment in innovative Cohere applications.