Category: Uncategorized
-
How to display multiple elements side by side in a list item – CSS
What I want to do I tried to display three elements (an icon, a title and a time) in each item in a list. Finally, I found I can use “display: flex” style in a list item so that the list displays these three elements side by side. In this post, I would like to…
-
How to get browsing history using chrome.history.search()
In this post, I will introduce you how to use chrome.history.search() method to retrieve the browser history in Browser Extension. Manifest First, You need to declare “history” permission into your manifest.json file.For example, Chrome.history.search() method Chrome.history.search() method has two parmeters. You can get your desired history by using the query parameter. chrome.history.search( query: object, callback?:…
-
How to get keydown event in JavaScript
The Sample code Break down the sample code 1. document.addEventListener(‘keydown’, event => { … }); 2. if (event.ctrlKey && event.code === ‘KeyB’) { … } 3. event.preventDefault(); KeybordEvent class properties Property Type Description Example ctrlKey boolean Whether the Ctrl key is pressed true / false shiftKey boolean Whether the Shift key is pressed true /…
-
How to save the image on the same USB drive of Clonezilla Live? – One or Two Partitions
In this post, I would like to introduce two ways of saving the image on the same USB drive of Clonezilla live. What is Clonezilla Live? Clonezilla is a partition and disk imaging/cloning program. Clonezilla Live: Clonezilla live allows you to use CD/DVD or USB flash drive to boot and run clonezilla How to save…
-
How to create Side Panel with Chrome Extension
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 fix “Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received”
To solve errors related to the asynchronous response In the previous post, I learned how to implement send/receive messages asynchronously in the browser extension. In this post I introduce a sample code of sending a message and returning values asynchronously by showing how to fix the errors related to the asynchronous response. This background.js has…
-
How to send a message to another part of the browser extension – asynchronously
Erros I got when send a message asynchronously I got some errors related to messaging from a content script to another part of the extension for example a background JavaScript. These are the errors I got, I found I need to understand how to send a message to another part of the browser extension asynchronously.…
-
How to overlay SVG images with svg.js library?
What is SVG? SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics. It is widely used for displaying graphics on the web due to its scalability, light weight and high quality. Recently, browser favicons can be displayed in SVG format. What is SVG.js library? SVG.js is a lightweight JavaScript library designed for…
-
How to Overlay a Custom SVG Image on a Favicon
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 Generate SVG Favicon and Replace in Browser Extension
I created the Edge Extension to set an SVG format favicon when you double click the page. I will introduce how to implement it. 0. Prerequisites You need to download SVG.js library to create SVG format data in JavaScript that runs in Web Browser. You can see the instructions in the previous post. Also, you…
Journey of learning 