Journey of learning

Author: truth7c

  • 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 I have an Edge Extension project that has just display browsing history in the popup dialog of Edge Extension. Detect and Send double click event from tab with using content script injection Listen the double click event and display the double-clicked tab title and url in the popup dialog. The Complete manifest file is…

  • How to Connect to GitHub with SSH

    —

    by

    truth7c
    in

    Steps Create GitHub account and repository Install git into your computer SSH Client Setup (Generate a new SSH key and add it to the ssh-agent) SSH Server Setup (Add SSH pub key to your GitHub account) Git clone, add, commit and push 1. Create GitHub account and repository Got to the link and sign up…

  • 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 Remove black dots on the list items (Use CSS for the first time for me!) Display icon and browsing history in one item Add margin to each…

  • 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. manifest.json popup.html four .png icons The directory looks like this below. 1. Create manifest.json Create new json file.…