Personal Pinterest with Uploadcare Chrome Extension
Tags: javascript, webdev, opensource, browserextension
Published: 2022-02-04 12:48:06

Everyone needs an online file storage system that is both personal and secure.
If you have an assignment due and need to submit the link on an urgent basis, or if you like a photo and want to save it online, or if you’re developing an application, and need to display an image or file in it, you’ll need a URL as quick.

You may do this by opening any browser, typing a URL for online storage applications, waiting for the website to load, going to the dashboard, selecting a file to upload, and searching for the URL to utilize it.

Alternatively, you can install an easy-to-use Uploadcare Chrome extension that allows you to upload the file directly to the cloud, and instantly access the file link. The file will be saved in the Chrome extension’s history, allowing you to retrieve it anytime you need it.

## How to install the Chrome extension

To install the extension, go to [https://chrome.google.com/webstore/detail/uploadcare-file-uploader/dgaehcjjbeoplnffljjeckmphcaijpim](https://chrome.google.com/webstore/detail/uploadcare-file-uploader/dgaehcjjbeoplnffljjeckmphcaijpim)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p6koexya8abfncco0xm.png) 

Click on Add to **Chrome button**, and select **Add Extension** from the popup. This will install the extension to the Chrome browser and make it available for use.

Select the extension from the Extensions panel on the right side of the URL bar.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o46hisl0liyhdx1tengy.png)

It will require a _Public Key_ for usage.

Go to the Uploadcare website, and create an account: [https://uploadcare.com](https://uploadcare.com)

After logging into the account, go to the [Dashboard](https://app.uploadcare.com) and select API Keys from the left side of the navigation panel.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaqn20hpecjmg9pubo2b.png)

Copy the API Key from the Public Key dashboard page, paste it into the input box of the extension, and click on the **Select Key** button.
The extension is now available for use whenever a file has to be uploaded.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9vmwz8urmtfzhftxzx8.png)

### Using the extension
The Uploadcare extension provides multiple sources from where you can upload a file. For example, you can get it from the local file system, from Google Drive, Google Photos, Facebook, or paste the given image’s URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y434dndzyxlzsdd18mt7.png)

You just need to choose a file, and the extension will upload it to the cloud storage and provide you with a URL:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4m3je0a63wbva77ozep.png)

You can also view a list of previously uploaded images and their URLs:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jlwtf0bmlhgjih0nxhp.png)


## Understanding the Chrome extension

A browser extension is a software program created specifically for browsers that allow users to improve their browsing experience and accomplish specific tasks. These extensions are developed using basic web technologies such as HTML, CSS, and JS. We can utilize external libraries like React to develop the extension, but it must be built in plain HTML, CSS, and JavaScript before it can be published in the extension store.

#### So how's it different from web-based applications?

It’s just as simple to create a chrome extension as it is to create a web application. Only the `manifest.json` file has to be configured. It is the key file that directs the browser as an extension and contains vital information such as name, description, version, icons, and so on. This file is also responsible for displaying the extension popup. We’ll be ready to finalize the extension after properly configuring the file.

We have two relevant versions of the manifest for developing browser extensions, each indicating different attributes.

```
"manifest_version": 2

"manifest_version": 3
```

Here's an example of how a manifest file looks:
```
{
  "short_name": "Name",
  "name": "Name of the extension",
  "manifest_version": 3,
  "version": "1.0.0",
  "description": "Extension Description goes here",
  "icons": {
    "16": "/assets/icon-16.png",
    "32": "/assets/icon-32.png",
    "48": "/assets/icon-48.png",
    "64": "/assets/icon-64.png",
    "128": "/assets/icon-128.png"
  },
  "action": {
    "default_icon": "/assets/icon.png",
    "default_popup": "/src/index.html",
    "default_title": "Title of the Popup"
  },
  "background": {},
  "permissions": []
}
```

I used manifest version 3 to configure the Reactjs-based application for this extension.

## Testing the extension in the browser

You need to clone the application to test the extension in the local environment.

**Prerequisites:**
1. Git and Node need to be installed on the local system
2. Should have a Chrome browser

Open the terminal, or command prompt, and type:
```
git clone https://github.com/raghavdhingra/UploadCare-Chrome-Extension.git
```

Open a code editor (e.g. VS Code) on the base directory of the project folder.
For installing the dependency of the project, type
```
npm install
```
This will create a `node_modules` folder in the base directory

Now, you need to convert the `.env.example` file to `.env` file.
In the `.env` file, we can define the environment variables not visible to other users.

React builds an HTML file that contains inline scripts, which disrupts the **Content Security Policy** for the browser extensions.
To solve this, we need the given variable defined in the `.env` file.
```
INLINE_RUNTIME_CHUNK=false
```
This will handle the inline issue with the React build.
**Or**,
We can directly build up the folder, and manually move all inline scripts in the `index.html` file to an external JavaScript file.

Now you have to build up the project to get the plain HTML files. To do this, type:
```
npm run build
```

It will create a folder named `build`.

We have successfully accomplished the project setup. It’s time to test out the implementation.

Go to the Chrome browser and insert this link into the URL bar:
```
chrome://extensions
```
Click on the **Load Unpacked** button, and select the `build` folder. This will add a new development extension to your tab, and you’ll be able to check out the extension in the extension bar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tq41jl7y274oqxeecc0.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p90qs7a3x3j971htuh0.png) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1e2il58edx7twyeq73g.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eld5zfuu78tuuqs4uyd0.png)

Now it’s time for you to test it out!

The project is Open-Sourced at [https://github.com/raghavdhingra/UploadCare-Chrome-Extension](https://github.com/raghavdhingra/UploadCare-Chrome-Extension)

Hope you like it! :)