-
How to make a multipage Chrome Extension
Just like any good application you might want to have multiple different pages in your chrome extensions. Perhaps you want to show them the first see the login page then afterwards the dashboard. In this article we will look at how you can show different UI pages in your chrome extensions, for regular html/JavaScript and…
-
Build Chrome Extension with any single-page Node JS Framework
The Traditional Approach: HTML, CSS, and JavaScript Before the advent of sophisticated JavaScript frameworks, developers created Chrome extensions using the fundamental trio of web technologies: HTML, CSS, and JavaScript. This conventional approach involves the following steps: This approach is straightforward and leverages basic web development skills. However, as extensions grow in complexity, managing state, reactivity,…
-
Build Chrome Extension with Solid JS
Solid JS is a declarative JavaScript library for building user interfaces. Like React and Vue, Solid JS is designed to help developers create reactive web applications, but it distinguishes itself with a unique approach to reactivity and performance. Created by Ryan Carniato, Solid JS focuses on fine-grained reactivity and a compilation-based approach to minimize overhead…
-
Build Chrome Extension with Vue
Vue.js, often referred to simply as Vue, is a progressive JavaScript framework used for building user interfaces and single-page applications. It was created by Evan You and first released in February 2014. Vue is designed to be incrementally adoptable, which means you can use as much or as little of the framework as you need…
-
Build Chrome Extension with React JS
Chrome extensions can significantly boost productivity by automating repetitive tasks, providing quick access to essential tools, and streamlining workflows. Now let’s get started with create a chrome extension using react. 1 Create A React App Navigator to the folder you want your extension project to be and open up the terminal, PowerShell or command prompt.…
-
How Build Chrome Extension for Dummies with HTML, CSS and JavaScript
Hey there, you might be wondering, “why not just ask Chat GPT on how to build chrome extensions?” Well firstly your sound logic isn’t welcomed here. But on a more serious note; as of writing this article today if you do ask ChatGPT on how to build chrome extension it will give you details on manifest version 2,…
-
25 Understanding Chrome Extensions OAuth
By using the chrome.identity API it enables use to identify/retrieve signed-in users, authenticate via Google OAuth or other social OAuth options, get access token tokens and more. In this article we are going to cover how to initial a login sequence for Facebook and Google using the chrome.identity API. You see the official documentation on the API here: https://developer.chrome.com/docs/extensions/reference/api/identity How…
-
24 Understanding Chrome Extensions Declarative Content
The chrome.declarativeContent API is an API use to take specific actions depending on the contents of the page without the use of the host_permissions in the manifest.json file or the help of the content scripts. Due to this the actions that can be trigged are limited; You can find documentation of the chrome.declarativeContent API here: https://developer.chrome.com/docs/extensions/reference/api/declarativeContent How to declare it in the Manifest.json {…
-
23 Understanding Chrome Extensions Scripting
The chrome.scripting API is used to programmatically inject CSS and JavaScript to alter the behavior and appearance of the websites. Think about it like this, a dynamic way of injecting content scripts and content styles as opposed from doing it via the manifest.json declaration. You can read the offlicial provide by the Google Chrome Extension Team here: https://developer.chrome.com/docs/extensions/reference/api/scripting How to declare…
-
22 Understanding Chrome Extensions Desktop Capture
The chrome.desktopCapture API is used to capture the screen, window or individual tabs and can be used to make a creating a screen recorder. We’d encourage reading the official chrome documentation here: https://developer.chrome.com/docs/extensions/reference/api/desktopCapture and how navigator.mediaDevices.getUserMedia function works. How to declare it in Manifest.json {…”permissions”:[ “desktopCapture”]…} How to use the API? The are to major functions in this API chrome.desktopCapture.chooseDesktopMedia and chrome.desktopCapture.cancelChooseDesktopMedia showing the popup…
