Tag: javascript
-
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 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 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…
-
How to Use SVG.js in Browser Extension
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
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…
Journey of learning 