Created a Screen Recorder Extension with GIF download :)

Yesterday evening I decided to create a Chrome Extension for my screen recorder website ( https://www.screenrecorder.online/ ).

As my screen recorder is anyways only using Javascript, CSS, and HTML the transformation to an extension was quite easy.

All I needed to create was a manifest.json and background.js file to embed my HTML page as Popup after a click on the toolbar button.

The HTML, CSS, and Javascript for the recording logic I could just copy from the websites version. The only thing I did there remove some unnecessary texts and changed the wording from “website” to “extension”.

The manifest.json if quite simple:

{
    "name": "Online Screen Recorder",
    "description": "This extension provides you with a free, fast, and straightforward way to record your screen.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "icons": { 
        "16": "assets/img/favicon-16x16.png",
        "32": "assets/img/favicon-32x32.png",
        "192": "assets/img/android-chrome-192x192.png",
        "512": "assets/img/android-chrome-512x512.png"
    },
    "manifest_version": 2
}

As you see all it contains it the name, description, and version of the extension. The browser action, which adds the toolbar button, and the background JavaScript which handles the click on the button. And finally some icons and the version of the manifest.

The background.js contains only the click event listener and opens the same HTML I use on the website (I stored it as popup.html).

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.windows.create({
      url: chrome.runtime.getURL("popup.html"),
      type: "popup",
      width: 720,
      height: 620
    });
  });

The remaining thing to do after that was to create a ZIP file of the extensions folder and upload it to the chrome web and MS Edge Addon store.

The code of the website itself is available on GitHub:
https://github.com/azettl/screenrecorder

The browser extensions you can find under:
https://chrome.google.com/webstore/detail/online-screen-recorder/oefbkonfoliaiooajimghnfccgblmddc
and
https://microsoftedge.microsoft.com/addons/detail/online-screen-recorder/ielppikdmenndhighecoedpmbikjgiei