Journey of learning

Category: Uncategorized

  • How to Use SVG.js in Browser Extension

    —

    by

    truth7c
    in

    Prerequisites This article focuses on developing Edge Extensions. In this post, I will explain how to use the SVG.js library within a Content Script. What’s SVG.js? SVG.js is a lightweight JavaScript library that makes working with SVG (Scalable Vector Graphics) easy. It provides a simple and intuitive API for creating, manipulating, and animating SVG elements…

  • Use SVG.js v3.0 in Edge Extension

    —

    by

    truth7c
    in

    Getting Started I’m currently developing an Edge extension. So far, I’ve got to retrieve favicon .ico images, but now I’m looking into how to add a mark to these favicons. For example, enclosing the image with a large red circle or adding a star mark to the top-right corner of the image. Using the SVG…

  • Highlight Tabs with Edge Extension

    —

    by

    truth7c
    in

    Overview Today, I will introduce you how to highlight Edge browser tabs when you double click on the active tab page. Every time you click on the tab page, you get highlighted tabs so that you can see which tabs are important for you throughout your web search activity by using this Edge Extension. Edge…

  • Add background.js to Edge Extension

    —

    by

    truth7c
    in

    Overview The Complete manifest file is saved in the HistoryMark Repository folder. 1. Update manifest file I added four items to my manifest.json file. The Complete manifest file is saved in the HistoryMark Repository folder. 2. Add EventListner in Content Script I created “content.js” that has addEventListener() method. This JavaScript is injected into all tab…

  • How to Connect to GitHub with SSH

    —

    by

    truth7c
    in

    Steps 1. Create GitHub account and repository 2. Install git into your computer 3. SSH Client Setup 3.1 Generate SSH key You need to generate SSH key to connect to the GitHub repository with SSH. Your computer is the SSH Client, and GitHub repository is the SSH Server. Basically, SSH key pair (private key and…

  • Display Browsing History nicely in Edge Extension – CSS –

    —

    by

    truth7c
    in

    I’m going to develop exactly same popup dialog as Microsoft Edge “History” popup. Today, I would like to organize the browsing list to display it nicely. That means This image below is the current popup dialog. I will improve it in this post. 1. Setup to use CSS file 2. Add Style for the List…

  • Display Browsing History Icon (Favicon) in Edge Extension – Chrome Extension API –

    —

    by

    truth7c
    in

    I’m going to develop exactly same popup dialog as Microsoft Edge “History” popup. In the previous post, I introduced how to get a favicon by using Google Favicon Server. 1. How to Get a Favicon with Chrome Extension API I found another way to retrieve a favicon of a webpage that is using Chrome Extension…

  • Display Browsing History Icon (Favicon) in Edge Extension – Google Favicon Server –

    —

    by

    truth7c
    in

    I’m going to develop exactly same popup dialog as Microsoft Edge “History” popup. Today, I would like to display favicons at the right side of each browsing history title in the pop-up dialog. Favicon is a small icon that is displayed in the browser’s address bar. Favicon 1. How to Get a Favicon from Google…

  • Display Browsing History in Edge Extension

    —

    by

    truth7c
    in

    I’m going to develop exactly same popup dialog as Microsoft Edge “History” popup. After researching, it seems the best way is to use the chrome.history API, so I decided to implement it using that! chrome.history API 1. Add permissions to manifest.json If you see the previous post, I already have my simple simple Edge Extension…

  • Create my first Edge Extension! -Manifest file-

    —

    by

    truth7c
    in

    I learned basic skills for Edge Extension. Now, it’s time to start developing for my first extension! I’m going to try developing exactly same as Microsoft Edge “History” popup.See below. Today, I’m going to create these files. The directory looks like this below. 1. Create manifest.json Create new json file. The file has name, version,…