How I built my first Chrome extension with React
#firstpost#beginners#react#chrome
Sébastien Beaury

Sébastien Beaury @sbeaury

About: Full stack web developer focusing on Javascript libraries and frameworks. Make my own 🍞 too.

Location:
Toronto
Joined:
Feb 5, 2020

How I built my first Chrome extension with React

Publish Date: Apr 1 '20
9 0

post body picture

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 for this ReactJs Chrome Extension Boilerplate that help me getting started.

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

// 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"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode 
// 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;
Enter fullscreen mode Exit fullscreen mode

Check the repo

GitHub logo sbeaury / youtube-resume

Youtube Resume Chrome Extension

Youtube Resume Chrome Extension

Don't let your YouTube browsing history fade away. YouTube Resume Tab replace the default browser new tab screen with your previous YouTube videos paused. Just click on the video to resume watching.

Built with React.

screenshot screenshot

Installation

Install through Chrome Web Store

https://chrome.google.com/webstore/detail/youtube-resume/fkpmbbdgedgcpolfhedngemgnenfokid

Install through Developer Mode

Make sure you have latest NodeJs version installed

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 the LOAD UNPACKED and browse to [PROJECT_HOME]\build. This will install the React app as a Chrome extension.

When opening a new tab, extension will be triggered.

Feedback

Just…

View on GitHub

Screenshots

Youtube Resume Screenshot 1
Youtube Resume Screenshot 2

Get it installed through Chrome Web Store

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
Enter fullscreen mode Exit fullscreen mode

Go to youtube-resume directory and run

yarn install
Enter fullscreen mode Exit fullscreen mode

Now build the extension using

yarn build
Enter fullscreen mode Exit fullscreen mode

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

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 if you like to follow my next adventures

Comments 0 total

    Add comment