Having a resource available offline is often a good idea as you can access it at any time without having to worry about Internet connectivity or availability of the resource on the Internet. All modern web browsers support basic functionality to save webpages to the local system.
Normally, when you click the "Save Page As" option, the browser downloads the content on the page and saves it as a HTML file and a folder that contains the media, icons, CSS code and other web elements that were present on the page. The number of files in the folder varies from website to website, and page to page.
Using an extension like Single File (Chrome, Firefox) or Save Page WE can help you save webpages as HTML files without the folders. This single file has all the content that was on the webpage.
Before we get into the options of the extension, let me show you an example. I saved this Wikipedia page using Firefox's built-in "save page" option. I disabled the internet and opened the page from my hard drive.
Now compare it with the one saved by the Save Page WE extension. Can you see the differences?
Allow me to highlight them. The web page's favicon on the tab bar, the Wikipedia logo at the top left, the language icon on the left, and the user icon near the top right, are all missing in the one saved by the browser's tool. The extension on the other hand saved them all perfectly as a 1:1 copy, and more importantly in just one file. In comparison, Firefox's Save option had 17 files in total (HTML + a folder containing 16 files).
This may not be a big deal for this particular page, but if you had saved something else for future use and later discovered it was missing some important content, that can be annoying.
Save Page WE
The extension places a floppy icon on the toolbar, click on it to save the current web page. The keyboard shortcut for this is Alt + A. Depending on the content on the page, it may take a few seconds to pack it all into a single HTML file. A download dialog box will pop-up, which you can use to save the HTML document. You can open it in any browser of your choice, even on a mobile browser as all support opening HTML files.
Right-click on the Save Page WE toolbar icon to view its context menu. It has three options: Save Basic Items, Save Standard Items and Custom Items. What do these do? Basic Items saves the current web page's contents such as the HTML and CSS elements, images, and font styles. Standard Items includes all Basic Items + HTML audio, video, objects and embedded files. Custom items lets you choose what you want to save from the above mention content. Use the Firefox add-on's management page (or right-click on the icon in chrome) to access the extension's options.
The General Tab lets you set the default button action (save method) along with an option to preserve the page's title. Some web pages may contain elements that cannot be saved; you can choose whether the add-on should warn you when a page contains such items, and also if it should list all un-saveable elements.The second tab, Saved Items, lets you define which custom elements should be saved when you use the "Save Custom Items" option. Though it also contains a list of Basic and Standard Items, none of these options can be modified.
Save Page WE saves the content as per the script on the website, and if you want it to avoid elements that have been blocked by content blockers (ad blockers like uBlock Origin), page editors, etc, you can enable the "Purge Elements" option in the Advanced tab. It may help in reducing the file size as well. Other options in this tab include blocking referer header, allowing mixed media content, and settings to manage nested frames, resource size and loading. You can set a custom shortcut for the add-ons save page action, from the Shortcuts tab.
Advantages of saving web pages as HTML
Saving webpages as a single file makes sharing them easier, especially if you want to send multiple pages. You can attach them to a mail, or via an instant messenger message, upload them to a cloud drive, or even transfer them to your phone for reading it on the go, without having to worry about the extra folders.
If you have dozens or hundreds of web pages saved on your computer, each of these will have its own folder, and when you put them all together in a directory it might become a bit messy. That's not the case if you save the page as a single HTML file, so in terms of organization it has an edge. This also helps in renaming the saved pages without breaking any elements that it contains.
Save Page WE not only packs the content into the HTML, but also compresses it a bit. The web page's file size can be an issue at times, in most cases the extension saved it in a smaller size, but occasionally the browser's built-in tool was better. Here are 2 example screenshots. In the first image we can see the add-on outperforming the built-in tool by a slight margin.
The 2nd picture shows that Save Page WE saved the page in a 13MB file, while Firefox managed to keep it less than 3MB.
Again, this depends on the web page, and when you accumulate tons of web pages it may make a difference depending on how much storage you can spare. You can download Save Page WE from the Chrome web store or from the Firefox Add-ons repository.
Warning: I couldn't find the source code or even a web page for Save Page WE. Two other add-ons from the same developer are "Recommended by Mozilla", which is a good sign. I've been using it for a long time too.