How I built my first Chrome extension with React
Tags: firstpost, beginners, react, chrome
Published: 2020-04-01 17:16:30


![post body picture](https://dev-to-uploads.s3.amazonaws.com/i/p6q4ucu5p5wqdlvotmjy.png)

This is my first post on Dev.to so please give me any feedback after reading this post! 🙏🙏

## How I came up with the idea?
The idea was to add another app to my portfolio and solve a daily life problem: user would be to save their whole YouTube watch history on one page and resume watching any paused video by clicking on a video thumbnail. 

## How I built this? 🧱

Special thanks to [satendra02](https://dev.to/satendra02) for this [ReactJs Chrome Extension Boilerplate](https://dev.to/satendra02/reactjs-chrome-extension-boilerplate-447o) that help me getting started.

Finally my `manifest.json` and  `app.js` files look like this:

```js
// manifest.json
{
  "manifest_version": 2,
  "name": "Youtube Resume",
  "author": "Sebastien Beaury",
  "version": "1.0.0",
  "description": "Resume your videos on Youtube.",
  "chrome_url_overrides": {
    "newtab": "index.html" /* triggered when opening a new tab */
  },
  // set up all the chrome permissions 
  "permissions": ["tabs", "*://www.youtube.com/*", "storage"],
  // define the custom action buttons
  "browser_action": {
    "default_icon": "youtube-play.png",
    "default_title": "Youtube Resume"
  },
  "content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vflEtXIPQ/www-widgetapi.js https://img.icons8.com/dusk/2x/youtube-play.png 'sha256-bYa5+qTPCwiUjcorwLU5xL8hkt2cfxlYzC1xEaFW6VA='; object-src 'self'",
  /* declarative injection for content scripts, runs automatically on specified pages */
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/static/js/index.js"]
    }
  ]
}
```

```js
// app.js
/* global chrome */  /*this gives us access to Chrome browser methods*/
import React, { Component } from 'react';
...

class App extends Component {
  render() {
  ...
  }
}

export default App;
```


## Check the repo

{% github sbeaury/youtube-resume %}

## Screenshots
![Youtube Resume Screenshot 1](https://github.com/sbeaury/youtube-resume/raw/master/images/screenshot_1.png)
![Youtube Resume Screenshot 2](https://github.com/sbeaury/youtube-resume/raw/master/images/screenshot_2.png)

## Get it installed through Chrome Web Store

[![https://chrome.google.com/webstore/detail/youtube-resume/fkpmbbdgedgcpolfhedngemgnenfokid](https://raw.githubusercontent.com/tulios/json-viewer/master/tryitnow.png)](https://chrome.google.com/webstore/detail/youtube-resume/fkpmbbdgedgcpolfhedngemgnenfokid)

## Just play with it 🔧

### Build the app

Clone repo

```
git clone git@github.com:sbeaury/youtube-resume.git
```

Go to `youtube-resume` directory and run

```
yarn install
```

Now build the extension using

```
yarn build
```

You will see a `build` folder generated inside the project directory named `youtube-resume`

### Adding React app extension to Chrome 

In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on `Load unpacked` and browse to `youtube-resume/build`. This will install the React app as a Chrome extension.

![Chrome extension page](https://dev-to-uploads.s3.amazonaws.com/i/z8b5hmmxozqi81d4hxwg.png)

When opening a new tab, the extension will be triggered. For now, the extension doesn't allow to save the YouTube history by clicking on the toolbar action button.

## Give me your feedback 👏

3 ways to help me improve (as a Junior Dev):

- Write a comment about what you liked / disliked

- Like this post (only if you liked it)

- [Follow me](https://dev.to/sbeaury) if you like to follow my next adventures