Makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic pages

Latest Version

Version
1.4.0
Update
May 2, 2021
Size
429KiB
Developer
Category
Users
200,000+
Rating
4.04839 ★
Manifest Version
2
Web Store Status
Languages Support
English (United States)
See more
Permissions
Http://*/*
Https://*/*
See more

Live Server Web Extension Extension

Live Server - Makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter).

This extension is for Live Server (VSCode Extension - required v3.0.0+).

You have to install Live Server extension for vscode in order to use this Add On.

Follow this link to setup : https://github.com/ritwickdey/live-server-web-extension#setup

Demo : https://raw.githubusercontent.com/ritwickdey/live-server-web-extension/master/img/screenshots/live-server-web-extension.gif
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Live Server Web Extension", "version": "1.4.0", "description": " Makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic pages", "icons": { "96": "./img/icon.png", "128": "./img/icon128.png" }, "author": "Ritwick Dey", "short_name": "Live Server Web Extension", "homepage_url": "https://github.com/ritwickdey/live-server-web-extension", "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "js": [ "reload.js" ] } ], "background": { "scripts": [ "background.js" ] }, "browser_action": { "default_popup": "./popup/popup.html", "default_icon": "./img/icon.png", "default_title": "Live Server" }, "permissions": [ "http://*/*", "https://*/*" ]}
Read more

How to download and manually install Live Server Web Extension extension for Chrome

Looking for a way to install Live Server Web Extension extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Live Server Web Extension extensions manually, this article outlines two simple methods to effortlessly install Live Server Web Extension extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Live Server Web Extension extension and manually install through Drag &Drop

If you ever need to manually install a Live Server Web Extension extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Live Server Web Extension Extension by clicking the "Download CRX" button on the website.

Look for the Live Server Web Extension extension you wish to install. Go to the website and download the Live Server Web Extension extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Live Server Web Extension extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Live Server Web Extension extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Live Server Web Extension extension for Chrome and install in Developer Mode

This is another method to install Live Server Web Extension extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Live Server Web Extension extension file

Select and download the Live Server Web Extension extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Live Server Web Extension extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Live Server Web Extension extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Live Server Web Extension extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Live Server Web Extension extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Open in VSCode Extension · Developer Tools 200,000+ 4 ★ 60.87KiB

icon

PHPView Extension · Developer Tools 200,000+ 40 ★ 88.99KiB

icon

Web Developer Extension · Developer Tools 200,000+ 2829 ★ 574KiB

icon

React Developer Tools Extension · Developer Tools 200,000+ 1576 ★ 1.56MiB

icon

Mobile simulator - responsive testing tool Extension · Productivity 200,000+ 3033 ★ 12.6MiB

icon

Responsive Viewer Extension · Developer Tools 200,000+ 298 ★ 639KiB

icon

CSS Peeper Extension · Developer Tools 200,000+ 363 ★ 279KiB

icon

Page Ruler Extension · Productivity 200,000+ 83 ★ 256KiB

icon

CSSViewer Extension · Developer Tools 200,000+ 371 ★ 301KiB

icon

LiveReload Extension · Developer Tools 200,000+ 808 ★ 60.78KiB

icon

Vue.js devtools Extension · Developer Tools 200,000+ 2131 ★ 2.57MiB

icon

VisBug Extension · Developer Tools 200,000+ 252 ★ 5.38MiB

icon

Clockwork Extension · Developer Tools 200,000+ 74 ★ 2.26MiB

icon

JSON Viewer Extension · Developer Tools 200,000+ 1082 ★ 310KiB

icon

Grepper Extension · Developer Tools 200,000+ 405 ★ 1.41MiB

icon

daily.dev | The homepage developers deserve Extension · Developer Tools 200,000+ 2460 ★ 2.28MiB

icon

Fake Filler Extension · Developer Tools 200,000+ 752 ★ 536KiB

icon

Redux DevTools Extension · Developer Tools 200,000+ 726 ★ 1.2MiB

icon

RemoteLiveReload Extension · Developer Tools 200,000+ 37 ★ 68.84KiB

icon

Pesticide for Chrome Extension · Developer Tools 200,000+ 94 ★ 24.81KiB

icon

Save All Resources Extension · Developer Tools 200,000+ 335 ★ 4.73MiB

icon

CSS Scan Extension · Developer Tools 200,000+ 84 ★ 1.41MiB

icon

var_masterpiece Extension · Developer Tools 200,000+ 70 ★ 68.72KiB

icon

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool Extension · Developer Tools 200,000+ 277 ★ 143KiB

User reviews

icon

Laura R (ID: 00000035451b4c50) Voted 1 ★ - Updated 08/21/2023 No instructions. Doesn't work. Should work like the Preview extension in VC.

icon

L. Aerin (ID: 000000f86931c6da) Voted 4 ★ - Updated 08/05/2023 I was doing a tutorial where they didn't have this installed (At least not yet) and they just made a php file, a "hello world" echo and refreshed. I was expecting this to reload my page on-save and it didn't work and it had me frustrated because I had the settings right....five-server was working...the addresses in this extension were there.... then I realized that I didn't have the usual skeletal HTML tags in there. As soon as I added those like you would an HTML file, it fired right up. Just mentioning that incase anyone else runs into that. Seems pretty obvious but maybe not if you're down an overthinking rabbit hole.

icon

Cody Kim (ID: 00000064a3ef01cc) Voted 5 ★ - Updated 05/02/2023 Best extension ever.

icon

Go Beyond (ID: 00000042144bec9e) Voted 4 ★ - Updated 03/31/2023 I love it, I would more love it if it is flexible, for example, it doesn't work with "localhost, localhost:5500", thanks for your effort!

icon

Erin Lubiansky (ID: 00000097ecb54a02) Voted 5 ★ - Updated 01/27/2023 Exactly what I was looking for. I already had my own server running (WP Local) and while that has an addon for reloading, it only monitors CSS files. I'm using the Tailwind framework so I needed something to monitor PHP files as well. I tried several other extensions and this is the only one that worked (and works so fast too!)