Download Chrome Extension for offline Installation

 Hi folks,

I tried to use my extension for offline usage for a VM based PC browser which doesn't have internet to download the extension.

So, I have come up with this approach where you can download the chrome extension (.crx) file.

Find the extension ID

Sample browser extension URL in chrome web store is below

https://chrome.google.com/webstore/detail/previous-next-page/fmichikmgflpgibapdhepmodjdjemmda

Last word is the extension ID (fmichikmgflpgibapdhepmodjdjemmda)

Download the extension file

Browser: Use Mozilla Firefox or other browser but not chrome

Syntax

https://clients2.google.com/service/update2/crx?response=redirect&prodversion=<<browser_version>>&acceptformat=crx2,crx3&x=id%3D<<extensionID>>%26uc

Example

https://clients2.google.com/service/update2/crx?response=redirect&prodversion=85.0.4183.121&acceptformat=crx2,crx3&x=id%3Dfmichikmgflpgibapdhepmodjdjemmda%26uc

Install the extension

1. Copy the .crx file to your offline computer
2. Open Chrome browser
3. Navigate to chrome://extensions
4. Enable developer mode
5. Drag and drop the .crx file

Hope you will be able to use the offline extensions in chrome.

Request you send your comments and feedback in blog or mail : psrdotcom@gmail.com

Microsoft Visual Studio Code with Debugger for Chrome for Static Website Pages

Hi all,

Have you used the Microsoft's free VS Code editor for you web development. I think, you should try it.

Today I'll discuss about how to debug from the VS Code without placing breakpoints on Chrome browser.

Pre-requisites

1. VS Code should be installed
2. Debugger for Chrome extension in VS Code

Configuring the debugger

• Once you open your website in the VS Code
• In the activity bar, you will find the debugger icon OR you can use the keyboard shortcut Ctrl+Shift+D
• Now, we will "Add Configuration" to our project
• On top of the debug sidebar, you will find an option "Add Configuration"
• Click on "Add Configuration"
• It will prompt you to select out of box provided options like "Chrome, NodeJS"
• Choose Chrome
• Now, launch.json file will be created
• Configure the launch.json file by specifying URL with port number
• Since, our project is of static webpages type, instead of webRoot, we will use "file"

Here is the sample launch.json file

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome for my website",

"url": "http://localhost:3001",

"file": "${workspaceFolder}/index.html"

}

]

}

Debug

• Click on the "Start Debugging" button OR press F5
• A new chrome window with debugging enabled will be launched
• Place your breakpoints in VS Code, just by clicking left to the line number in the editor
• Perform the action and your debug will be hit
• Note: You can add conditional debugging by editing the break point

Happy debugging.

Please send your review and comments to psrdotcom@gmail.com