Journey of learning

Tag: edge

  • How to create Side Panel with Chrome Extension

    —

    by

    truth7c
    in

    What is Side Panel? A browser side panel is a vertical interface section, typically located on the right edge of a browser. It provides quick access to tools, extensions, or web content without disrupting the main browsing area. Setp1. Edit your manifest.json file To use the Side Panel API, in the extension manifest file: Step2. Create a…

  • How to Overlay a Custom SVG Image on a Favicon

    —

    by

    truth7c
    in

    Hello! Let me introduce an app I created as a browser extension that overlays a custom SVG image (a pink square image) on a fetched favicon to display it as a new favicon. 1. Required files and Prerequisites I’m using a svg.js library to manage svg images. Please see the previous post to see how…

  • 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…

  • 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…