We love to save web pages for future reading. We love to read about technology, best practices, and new trends in digital media. We hate trying to find the best articles on a given topic, and then haphazardly bookmarking them with different names and links.

We want a simple system that lets us collect all of the articles we like on a given topic in one place.

This extension lets you save web pages—the same way you save bookmarks—so you can easily go back and refer to them later. Save any page as an article, add tags, and search for specific articles on a topic when you need to dive deeper into research or find more information.

Chrome Extension For Saving Web Pages

There’s simply too much content. We have reached “Peak Content” where there is more content than we can handle. From the never-ending Facebook Newsfeed, real-time links shared on Twitter, and Reddit’s constantly renewed Frontpage. We don’t have time to wade through each article.

With the onslaught of content, we have to adapt a habit of Read-it-Later. Bookmark the articles you’re interested in reading, then read the article later when you have more time. Instead of having to rush through an article or forgetting that memorable article, read when you have more leisure time.

Here are 5 Chrome Extensions that help you Read-it-Later:

Save to Pocket

Pocket is one of the most well known Chrome Extensions for bookmarking. Starting as a Firefox extension, you can now use Pocket to save articles from your Chrome browser, Android, and iPhone. You can save articles by pressing the “CTRL+SHIFT+S” shortcut or by pressing the Pocket icon at the upper-right corner of the Chrome browser. Each time you “Save to Pocket” the article is saved in the “My List” section. You can choose from some basic background templates and font colors.

Instapaper

Instapaper is Pocket’s twin that is more focused on text. Instapaper lets you know how long it takes to read each article, has more style options to enhance your reading, and has a speed-reading feature for hasty reads. One major advantage Instapaper has over Pocket is folders. You can create multiple folders, name each folder, and organize your library into specific categories.

LINER — Private Web/PDF Highlighter

LINER helps you save sentences on the web. Simply turn Highlight Mode ON and drag your mouse over the sentences you want to save. Most bookmarking tools save the entire page. LINER helps you save the sentences you actually care about within the page. Highlights help you emphasize a single quote, so you can easily reference the phrase when you need it. The highlights you make will always stay in the same location, even if you close the website. You can even share highlighted pages to your friends, even if don’t have LINER installed.

Evernote Web Clipper

Evernote Web Clipper helps you save pages into Evernote. You can choose amongst: saving the entire website, the article, a simplified article, or a screenshot. One great aspect is that you can choose which notebook the clipped article goes into. One downside to the application is that the many features slow the app down. Evernote is primarily a note taking application, you can start writing the article right beneath the clipped article.

Save to Google

Save to Google is a simple read-it-later application. You can save your articles and organize your articles into tags. Currently, Save to Google does not support any readability mode, has no separate app, and cannot save images as well. Save to Google is great for people wanting a lighter bookmarking app.

how to write a chrome browser extension

If you are a Google Chrome user, you’ve probably used some extensions in the browser.

Have you ever wondered how to build one yourself? In this article, I will show you how you can create a Chrome extension from scratch.

Table Of Contents

• What is a Chrome Extension?
• What will our Chrome Extension Look Like?
• How To Create a Chrome Extension
• Creating a manifest.json file
• Conclusion

What is a Chrome Extension?

A chrome extension is a program that is installed in the Chrome browser that enhances the functionality of the browser. You can build one easily using web technologies like HTML, CSS, and JavaScript.

Creating a chrome extension is similar to creating a web application, but it requires a manifest.json file which we will discuss in the last section of this post.

What Will our Chrome Extension Look Like?

As you can see, the above chrome extension displays the latest data on Coronavirus (COVID-19) in the UK. We will be looking into how to create this extension in this blog post.

Here, we will be using the https://api.coronavirus.data.gov.uk/v1/data API in order to fetch data. We will only display the latest record for the simplicity of this post.

The complete source code of this project can be found on GitHub.

How to Create a Chrome Extension

First of all, we need to create an empty folder where we will add our HTML, CSS, and JavaScript files.

Inside the folder, let’s create an index.html file with this HTML boilerplate code:

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

Now, let’s add a link to the Bootstrap CDN in the head tag. We will be using the Bootstrap framework here so that we don’t have to write some extra CSS in this example.

<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

In the demo, we saw that the records are displayed as a table. So now we need to work on creating a table.

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3" style="width: 450px;">
        <h2 class="text-center">Covid Latest Report-UK</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Date</th>
                <th>Country</th>
                <th>Confirmed</th>
                <th>Deaths</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="date"></td>
                <td id="areaName"></td>
                <td id="latestBy"></td>
                <td id="deathNew"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="script.js"></script>
</html>

The code above creates a table with a width of 450px. There are four different headings in a table: Date, Country, Confirmed, and Deaths.

Here, you can see that each table data td has been assigned different IDs. We will be using the value of these IDs in JavaScript to update the table data. Also, here we have loaded the JavaScript in the end after loading all the HTML content.

Now, since the table has been displayed, we need to work on writing JavaScript in order to fetch data from the API.

Let’s create a script.js file and add the following code:

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
    const record=await res.json();
    document.getElementById("date").innerHTML=record.data[0].date;
    document.getElementById("areaName").innerHTML=record.data[0].areaName;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();

Now, let’s break down the above code:

• Here we are using the async function called fetchData.
• The data is being fetched from the https://api.coronavirus.data.gov.uk/v1/data API.
• The JSON data is stored in a variable called record.
• The HTML content of td with ids date, areaName, latestBy and deathNew are updated by the corresponding values of API.

If we check the browser, we will be able to see the following result.

The data is being fetched from the API and it keeps on updating as soon as the data in API changes.

Manifest.json File

As we discussed earlier, building a Chrome extension is similar to building any web application. The only difference is that the Chrome extension requires a manifest.json file where we keep all the configurations.

The manifest.json file contains all the necessary information required to build the Chrome extension. It is the first file the extension checks and everything is loaded from this single file.

Now, let’s create a manifest.json file in the root folder and add the following code:

{
    "name": "Covid-19 Stats UK",
    "version": "1.0.0",
    "description": "latest covid data of UK",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}

Manifest.json

Our manifest.json file contains the value of name, version, description, manifest_version (3 in this case, which is the latest manifest version), author, and action fields. In the action field, there’s the value for default_popup which contains the path to the HTML file which is index.html in this example.

You can have a look here to see all configurations of a manifest.json file.

Now, since we’ve also added the manifest.json file we are ready to add this project as an extension in our Chrome browser.

For that, we need to go to Select More Tools and then choose Extensions from the browser menu as shown in the picture below:

After choosing Extensions, it redirects to the extensions page in Chrome. Make sure to enable the Developer mode here.

Once that’s done, you need to click the Load unpacked button which will allow us to load our project in the Chrome extension store.

Now, the extension is available in our Chrome extension store. You can also pin the extension in the browser as shown in the gif below:

This extension works only in your browser. If you want to publish it on the Chrome Web Store, you can follow this link.

Conclusion

If you have some HTML, CSS, and JavaScript knowledge, you can easily build Chrome extensions. I hope after reading this blog post, you will create some cool extensions.

Happy Coding!

Conclusion

Let us know your thoughts in the comment section below.

Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines