Firefox Test Pilot’s Snooze Tabs Can Help You Remove Distractions

Have you ever bumped into a webpage that has an interesting article but you can’t read it at the moment because you’re swamped in work? Well, if you’re a Firefox browser user, you can opt to “snooze” that page for perusal later as Firefox has introduced a new feature called SnoozeTabs.

50 Time Saving Firefox Add-ons

.no-js #ref-block-post-8683 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/50-time-saving-firefox-add-ons.jpg”); }

50 Time Saving Firefox Add-ons

Firefox as we know is undeniably one of the most popular browser among the users however it is…Read more

Currently being tested out on Firefox’s Test Pilot program, SnoozeTabs will let you set a snooze timer on an open browser tab. All you have to do is click on the SnoozeTabs icon located next to the browser’s search bar, choose a time period in which you would like the tab to reappear again, and Firefox would immediately close down the tab.

Once the snooze period ends, Firefox would then reopen the tab in the background, allowing you to view said tab once you’re done with your work.

firefox snooze tab

The snooze time period available on SnoozeTabs ranges from “Later Today”, all the way up to a full month. Alternatively, if you have a specific time in which you know that you’re available, you can opt to input a custom time into SnoozeTabs instead.

One thing to note about SnoozeTabs is that it is still currently in its testing stages. As such, do expect some glitches and bugs with the feature. One such example can be seen in the screenshot provided above where the custom date option is noticeably missing from the menu. If you’re not a fan of buggy features, it’s probably wise to wait until the feature gets a final release.

30 Chrome Extensions for Better Productivity in 2017

.no-js #ref-block-post-29080 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/productivity-chrome-extensions.jpg”); }

30 Chrome Extensions for Better Productivity in 2017

There are a number of productivity apps for mobiles and a lot of productivity tools for PCs. But…Read more

Firefox Test Pilot’s Snooze Tabs Can Help You Remove Distractions

Have you ever bumped into a webpage that has an interesting article but you can’t read it at the moment because you’re swamped in work? Well, if you’re a Firefox browser user, you can opt to “snooze” that page for perusal later as Firefox has introduced a new feature called SnoozeTabs.

Currently being tested out on Firefox’s Test Pilot program, SnoozeTabs will let you set a snooze timer on an open browser tab. All you have to do is click on the SnoozeTabs icon located next to the browser’s search bar, choose a time period in which you would like the tab to reappear again, and Firefox would immediately close down the tab.

Once the snooze period ends, Firefox would then reopen the tab in the background, allowing you to view said tab once you’re done with your work.

firefox snooze tab

The snooze time period available on SnoozeTabs ranges from “Later Today”, all the way up to a full month. Alternatively, if you have a specific time in which you know that you’re available, you can opt to input a custom time into SnoozeTabs instead.

One thing to note about SnoozeTabs is that it is still currently in its testing stages. As such, do expect some glitches and bugs with the feature. One such example can be seen in the screenshot provided above where the custom date option is noticeably missing from the menu. If you’re not a fan of buggy features, it’s probably wise to wait until the feature gets a final release.

10 Coolest Hidden Firefox Settings You Should Know

There are plenty of settings that Firefox offers besides general ones you can find in the Options menu. Many of these advanced settings can be found on specific browser pages that use the about: protocol. In this article, I’m going to show you 10 less-known Firefox settings that can come useful in your everyday workflow.

10 Firefox Plugins For A Safer Browsing Experience

.no-js #ref-block-post-15177 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/firefox-security-plugins.jpg”); }

10 Firefox Plugins For A Safer Browsing Experience

Mozilla’s Firefox browser is a user-friendly and feature-rich browser, with around 35% of all web users using it…Read more

When you visit any of the about: pages in the list below, and are prompted with a warning message, just click either the OK or the I’ll be careful, I promise! button — whichever one you encounter.

1. Perform DNS Lookup

You can perform an in-house DNS lookup (finding the IP address of a domain) in Firefox.

Type about:networking into the URL bar, and press Enter. On the upcoming page, click “DNS Lookup” in the sidebar menu, type the domain name, and click Resolve to see its IP address(es).

DNS Lookup
2. Block Auto-Refresh

Sometimes web pages come with Refresh HTTP headers that make pages refresh frequently.

If you want to stop that from happening, go to about:preferences#advanced, and under the subtitle Accessibility, check the checkbox labeled “Warn me when websites try to redirect or reload the page”.

Auto-Refresh Setting
How to Optimize Firefox for Better Performance

.no-js #ref-block-post-11149 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/firefox-optimization-tips.jpg”); }

How to Optimize Firefox for Better Performance

Your web browser of choice is truly the gateway into accessing the global Internet. The web has been…Read more

3. Search As You Type

Pressing Ctrl+F opens an in-page search-box in Firefox that allows users to search for a string in a webpage. But it’s possible to spare the key combo pressing and start searching as you start typing.

In the “Accessibility” section of the about:preferences#advanced page check the checkbox labeled “Search for text when I start typing”.

Search As You Type setting

From now on, when you start typing, and the cursor isn’t in a text input field on the page, Firefox will immediately start looking for the text on the web page.

4. Unmap Backspace Key

To prevent being surprised by someone trying to sneakily backspace their way into your browser history, you can replace the backspace action with one that scrolls the page up on pressing Backspace, scrolls it down on Shift + Backspace. You can also configure the Backspace key not to give any action at all.

Go to about:config, and type browser.backspace_action into the search bar. The default value of this browser setting is 0.

Unmap Backspace Key setting

Double-click on it, and change it to 1 for mapping scrolling action to the Backspace key, or change it to 2 for unmapping it from any action.

5. Move Around With Cursor Keys

Reading a long article or story online, and want more control while jumping line? You can use the cursor for in-text navigation.

Under “Accessibility” on the about:preferences#advanced page, check the option “Always use the cursor keys to navigate within pages”.

Move Around With Cursor Keys setting

Besides the default arrow cursor, a blinking text cursor will also appear on websites. You can move it around by using the arrow keys.

6. Paste On Middle Click

Got a mouse with a middle button? Use it to paste text from the clipboard into text fields on web pages.

Go to about:config, and type middlemouse.paste into the search bar. The default value is false, double-click on it, and change it to true.

Paste On Middle Click setting
7. Customize Print Header & Footer

When you print a web page in Firefox, it uses a default layout. At the top-left corner of the print page there’s the title of the web page, at top-right the URL, at bottom-left the page number of total pages, and at bottom-right the date-time.

You can change this arrangement, for instance you can add something to the center of the header or footer, remove some of the default info altogether, or replace them with your custom text.

On the about:config page, there are six settings for the customization the print header and footer:

  1. print.print_headercenter
  2. print.print_headerleft
  3. print.print_headerright
  4. print.print_footercenter
  5. print.print_footerleft
  6. print.print_footerright
Print Header Custom Setting
Print Footer Custom Setting

You need to type the name of the setting from the above list into the search bar on the about:config page in order to change its value. The value can be any of the following strings, or your custom text:

  1. &D – Date-time
  2. &P – Page number
  3. &PT – Page number of total pages
  4. &T – Title of the web page
  5. &U – URL
8. Change Default Colors

You have the option to change the default background, text, and link colors in Firefox.

Go to about:preferences#content, click on the Colors… in the “Fonts & Colors” section, and select the new colors.

Color Setting
9. Filter Awesome Bar Links

Awesome Bar, the location bar of Firefox shows a list of links when you start typing. The displayed links are taken from your bookmarks, browser history and currently open pages.

You can filter these Awesome Bar links by typing one of the following special characters into the location bar, either before your query or just on its own:

  1. # – Match page title
  2. @ – Match URL
  3. * – Match only to links in bookmarks
  4. ^ – Match only to links in history
  5. + – Match only to links that’re tagged
  6. % – Match only to links that are open currently
Awesomebar with Open Tab Filter
Awesomebar with Open Tab Filter and Input
10. Auto-Export Bookmarks In HTML

If you want Firefox to auto-save your bookmarks in HTML format as a list of links, you can do so by going to about:config, typing browser.bookmarks.autoExportHTML into the search bar, and changing the default false value to true by double-clicking on it.

Bookmark Setting

When you restart your browser, a file named bookmarks.html will appear in your Firefox profile folder with all the bookmark links.

To see your profile folder, go to about:support, and press the button Show Folder. Note that you may need to restart your whole system to make the change take effect.

From now on, every time you exit Firefox, the bookmarks.html file will be updated with your current list of bookmarks.

10 Coolest Hidden Firefox Settings You Should Know

There are plenty of settings that Firefox offers besides general ones you can find in the Options menu. Many of these advanced settings can be found on specific browser pages that use the about: protocol. In this article, I’m going to show you 10 less-known Firefox settings that can come useful in your everyday workflow.

When you visit any of the about: pages in the list below, and are prompted with a warning message, just click either the OK or the I’ll be careful, I promise! button — whichever one you encounter.

1. Perform DNS Lookup

You can perform an in-house DNS lookup (finding the IP address of a domain) in Firefox.

Type about:networking into the URL bar, and press Enter. On the upcoming page, click “DNS Lookup” in the sidebar menu, type the domain name, and click Resolve to see its IP address(es).

DNS Lookup
2. Block Auto-Refresh

Sometimes web pages come with Refresh HTTP headers that make pages refresh frequently.

If you want to stop that from happening, go to about:preferences#advanced, and under the subtitle Accessibility, check the checkbox labeled “Warn me when websites try to redirect or reload the page”.

Auto-Refresh Setting
3. Search As You Type

Pressing Ctrl+F opens an in-page search-box in Firefox that allows users to search for a string in a webpage. But it’s possible to spare the key combo pressing and start searching as you start typing.

In the “Accessibility” section of the about:preferences#advanced page check the checkbox labeled “Search for text when I start typing”.

Search As You Type setting

From now on, when you start typing, and the cursor isn’t in a text input field on the page, Firefox will immediately start looking for the text on the web page.

4. Unmap Backspace Key

To prevent being surprised by someone trying to sneakily backspace their way into your browser history, you can replace the backspace action with one that scrolls the page up on pressing Backspace, scrolls it down on Shift + Backspace. You can also configure the Backspace key not to give any action at all.

Go to about:config, and type browser.backspace_action into the search bar. The default value of this browser setting is 0.

Unmap Backspace Key setting

Double-click on it, and change it to 1 for mapping scrolling action to the Backspace key, or change it to 2 for unmapping it from any action.

5. Move Around With Cursor Keys

Reading a long article or story online, and want more control while jumping line? You can use the cursor for in-text navigation.

Under “Accessibility” on the about:preferences#advanced page, check the option “Always use the cursor keys to navigate within pages”.

Move Around With Cursor Keys setting

Besides the default arrow cursor, a blinking text cursor will also appear on websites. You can move it around by using the arrow keys.

6. Paste On Middle Click

Got a mouse with a middle button? Use it to paste text from the clipboard into text fields on web pages.

Go to about:config, and type middlemouse.paste into the search bar. The default value is false, double-click on it, and change it to true.

Paste On Middle Click setting
7. Customize Print Header & Footer

When you print a web page in Firefox, it uses a default layout. At the top-left corner of the print page there’s the title of the web page, at top-right the URL, at bottom-left the page number of total pages, and at bottom-right the date-time.

You can change this arrangement, for instance you can add something to the center of the header or footer, remove some of the default info altogether, or replace them with your custom text.

On the about:config page, there are six settings for the customization the print header and footer:

  1. print.print_headercenter
  2. print.print_headerleft
  3. print.print_headerright
  4. print.print_footercenter
  5. print.print_footerleft
  6. print.print_footerright
Print Header Custom Setting
Print Footer Custom Setting

You need to type the name of the setting from the above list into the search bar on the about:config page in order to change its value. The value can be any of the following strings, or your custom text:

  1. &D – Date-time
  2. &P – Page number
  3. &PT – Page number of total pages
  4. &T – Title of the web page
  5. &U – URL
8. Change Default Colors

You have the option to change the default background, text, and link colors in Firefox.

Go to about:preferences#content, click on the Colors… in the “Fonts & Colors” section, and select the new colors.

Color Setting
9. Filter Awesome Bar Links

Awesome Bar, the location bar of Firefox shows a list of links when you start typing. The displayed links are taken from your bookmarks, browser history and currently open pages.

You can filter these Awesome Bar links by typing one of the following special characters into the location bar, either before your query or just on its own:

  1. # – Match page title
  2. @ – Match URL
  3. * – Match only to links in bookmarks
  4. ^ – Match only to links in history
  5. + – Match only to links that’re tagged
  6. % – Match only to links that are open currently
Awesomebar with Open Tab Filter
Awesomebar with Open Tab Filter and Input
10. Auto-Export Bookmarks In HTML

If you want Firefox to auto-save your bookmarks in HTML format as a list of links, you can do so by going to about:config, typing browser.bookmarks.autoExportHTML into the search bar, and changing the default false value to true by double-clicking on it.

Bookmark Setting

When you restart your browser, a file named bookmarks.html will appear in your Firefox profile folder with all the bookmark links.

To see your profile folder, go to about:support, and press the button Show Folder. Note that you may need to restart your whole system to make the change take effect.

From now on, every time you exit Firefox, the bookmarks.html file will be updated with your current list of bookmarks.

How to Customize Firefox Reader View for Better Readability

Reader View is a popular feature of the Firefox browser, that changes the appearance of a web page, and makes it more readable by removing visual clutter such as images, ads, headers, and sidebars. Reader View is, however not available, for all home pages.

If the feature is available for a certain page, you will find the icon to enable it in the shape of a small book icon displayed to the right of the address bar.

IMAGE: Mozilla.org

There are a few built-in options that allow readers to customize the look of the Reader View. We’ll be looking at those options before showing you what you can do to further personalize the look of the Reader View. For demo purposes, I will be using an article by National Geographic article.

Pre-Built Options

Firefox Reader View comes with a few pre-built customization options such as dark, light and sepia backgrounds, adjustable font sizes, and serif and sans-serif typefaces. You can customize the theme by overriding the CSS rules of these pre-existing options.

Default Reader View Options
Default Reader View Options

I use a dark skin with serif fonts, and this means that I will need to override the belonging CSS classes, in my case .dark and .serif.

If you want to customize another theme variant (skin + font), you will need to use the appropriate CSS selectors. You can check these out with the help of the Firefox Developer Tools by hitting F12.

Check CSS Selectors
Create the Custom CSS File

You need to create a file called userContent.css inside the chrome folder of your Firefox profile folder for your Reader View customizations. To find your Firefox profile folder, type about:support into the URL bar and press Enter.

You’ll find yourself on a page that contains the technical data related to your Firefox install. Click the Show Folder button, and it will open your Profile folder.

Profile Folder Button in Firefox
the Profile Folder button

Create a folder called chrome inside your Profile Folder (if you don’t have it yet), and a file called userContent.css inside the chrome folder. The file path looks like this:

...ProfileschromeuserContent.css
Add the Custom CSS Rules

Once you’ve created and opened userContent.css in a code editor, it’s time to add your CSS rules. In order to customize the design of the Reader View, you need to target the tag with the appropriate selectors.

You can use the following selectors for the different default options:

/* When dark background is selected */
:root[hasbrowserhandlers="true"] body.dark  {
}
/* When light background is selected */
:root[hasbrowserhandlers="true"] body.light  {
}
/* When sepia background is selected */
:root[hasbrowserhandlers="true"] body.sepia  {
}
/* When serif font is selected */
:root[hasbrowserhandlers="true"] body.serif {
}
/* When sans-serif font is selected */
:root[hasbrowserhandlers="true"] body.sans-serif {
}

You can also combine the classes, to target a specific combination of settings.

/* When dark background and serif font are selected */
:root[hasbrowserhandlers="true"] body.dark.serif  {
}
/* When sepia background and sans-serif font are selected */
:root[hasbrowserhandlers="true"] body.sans-serif.sepia  {
}

Do not use the common selector :root[hasbrowserhandlers="true"] body to target all the settings at once. It will work, but it will also affect other browser pages, such as about:newtab, as their root elements also carry the hasbrowserhandlers attribute (which is used to mark the event handlers of internal Firefox pages, such as about: pages).

Here’s the code I added to my
userContent.css. I changed the font family, font style, colors, and widened the text container. You can use any other style rules according to your own taste.

/** userContent.css
***************************/
:root[hasbrowserhandlers="true"] body.dark.serif,
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-family: "courier new" !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif {
background-color: #13131F !important;
color: #BAE3DB !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-style: italic !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif h1,
:root[hasbrowserhandlers="true"] body.dark.serif h2,
:root[hasbrowserhandlers="true"] body.dark.serif h3,
:root[hasbrowserhandlers="true"] body.dark.serif h4,
:root[hasbrowserhandlers="true"] body.dark.serif h5 {
color: #06FEB0 !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif a:link {
color: #83E7FF !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #container {
max-width: 50em !important;
}

Note that it’s necessary to use the !important keyword in userContent.css for all CSS rules. The browser adds user-specified property values before the values specified by the author (the developer of the given web page, here the Reader View).
Hence, any user-specified property value without the !important keyword won’t work if an author-specified stylesheet also targets the same property, as it will be overridden.

Final Result

You can see the changes of my Reader View theme below. Use your own CSS rules to customize the design of your own personalized Firefox Reader View.

Before

Default Firefox Reader View
default Firefox Reader View

After

Customized Firefox Reader View
customized Firefox Reader View

If you want to dive deeper in the theme customization of Firefox tools, check out my previous tutorial on the customization of the Firefox Developer Tools theme.