Your extension might fetch data flawlessly and have a beautiful interface, but if screen reader users or keyboard navigators can’t use it, you’ve unintentionally excluded many potential users.

In this article, we will audit a Chrome browser extension for accessibility issues and transform it into an inclusive experience that works for everyone.

Table of Contents

• Why Accessibility Matters in Browser Extensions

• How to Perform Manual Browser Extension Accessibility Tests

• How to Implement Browser Extension Accessibility Improvements

• How to Perform Automated Browser Extension Accessibility Tests

• Best Practices for Accessible Browser Extensions

• Conclusion

Why Accessibility Matters in Browser Extensions

Every click in your browser extension is an opportunity to empower users or exclude them if accessibility isn’t part of your design.

Browser extensions face unique accessibility challenges, as they must inject functionality into existing web pages while maintaining their own accessible interfaces - a dual responsibility that can introduce potential barriers. For example, a popup that traps keyboard users or fails to communicate with screen readers can render an extension unusable.

With over one billion people living with disabilities, according to the World Health Organization, accessible design unlocks a vast user base and creates better experiences for everyone.

For browser extensions, accessibility barriers commonly emerge as:

• Keyboard navigation dead-ends: Popups and interfaces that trap or exclude keyboard users.

• Silent interactions: Missing labels and descriptions, like a button with only an icon announced as “unlabelled button” by screen readers, leaving users guessing about its purpose.

• Unannounced dynamic content updates: Content changes that occur without assistive technology awareness, such as a quote updating without notifying screen readers of the change, including missing feedback for loading states or errors

• Context integration conflicts: Extensions modifying existing web pages can mistakenly break the page's accessibility features or introduce elements that clash with established navigation patterns

By understanding these barriers, developers can take targeted steps to test and improve their extensions’ accessibility.

How to Perform Manual Browser Extension Accessibility Tests

While automated tools catch obvious issues, manual testing reveals the real user experience. Here's how to systematically evaluate your extension's accessibility.

Keyboard Navigation Test

Disconnect your mouse and try to use your extension completely with the keyboard only. Navigate using Tab to move between elements, Enter or Space to activate buttons, and arrow keys within components.

• Is it always clear which element has focus?

• Can you activate buttons with Enter or Space as expected?

• Can users exit modal dialogs or dropdown menus?

If you encounter any dead-ends or confusion points, keyboard users will face the same barriers.

Screen Reader Evaluation

Use your operating system's built-in screen reader to navigate your extension and listen to what is announced. On macOS, enable VoiceOver; on Windows, use Narrator; on Linux, try Orca.

• Does each element’s purpose come through clearly, such as a button announced as “Generate new advice” rather than just “button”?

• Are headings, lists, and other structures properly conveyed?

• Do users understand when content is loading, selected, or has changed?

This testing phase often reveals the gap between what you intended to communicate and what actually reaches users.

Visual Accessibility Review

Examine your extension in different visual contexts. Use developer tools, like WebAIM’s Contrast Checker, to verify that text meets WCAG’s 4.5:1 contrast ratio for readability. Test how your extension appears in system high-contrast settings. Ensure:

• Functionality remains usable at 200% zoom.

• Information isn’t conveyed through colour alone, such as using text labels alongside colour-coded indicators.

These manual tests will uncover critical accessibility issues, paving the way for targeted improvements to make your extension inclusive.

How to Implement Browser Extension Accessibility Improvements

Imagine refreshing a page without knowing it happened or clicking a button with no clear purpose. The manual tests performed above revealed that's the experience for screen reader users of our extension among these three key accessibility issues:

• Missing button label: The dice button only has an image with alt text “Dice icon,” which lacks the context screen readers need

• Silent dynamic updates: When new advice loads, screen readers don't know the content has changed

• No loading states: When fetching advice, users receive no feedback that something is happening

Let's address the issues before conducting automated tests.

How to Address Missing Button Label and Alt text

We’ll add aria-label to clearly explain the button's purpose and provide descriptive alt text for the icon. The role="presentation" attribute ensures the image is treated as decorative by screen readers.

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
    <img src="/icons/icon-dice.png" alt="Dice icon">
</button>

<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
     <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

How to Address Silent Dynamic Updates

We’ll add aria-live="polite" for screen readers to announce new advice and aria-atomic="true" to ensure that the entire quote is read. That is:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

How to Address No Loading States

We’ll add a setLoadingState function to provide loading indicators, ensuring screen reader users are notified when content is being fetched:

// Before: No Loading Feedback
function requestNewAdvice() {
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    // No loading indicators...
  });
}

// After: Accessible Loading States
function requestNewAdvice() {
  setLoadingState(true); 
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    setLoadingState(false);
    // Handle response with proper announcements...
  });
}
function setLoadingState(isLoading) {
  if (isLoading) {
    // Disable button and show loading text
    generateAdviceBtn.disabled = true;
    generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
    // Show loading text in the advice quote element
    adviceQuoteElement.textContent = "Loading new advice...";
  } else {
    // Re-enable button
    generateAdviceBtn.disabled = false;
    generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
  }
}

With the manual testing issues addressed, we can now move on to performing an automated test of the same extension.

How to Perform Automated Browser Extension Accessibility Tests

Manual testing provides crucial insights, but automated tools can efficiently catch common issues and provide ongoing monitoring.

This Extension Accessibility Checker simplifies testing by analyzing browser extension interfaces, such as popups and content scripts, for WCAG compliance, addressing unique challenges like popup constraints and content injection conflicts.

To use the Extension Accessibility Checker:

1. Compress your browser extension folder into a .zip file

2. Upload the .zip file on https://extensiona11ychecker.vercel.app/

3. Review the generated report for specific accessibility violations and implement suggested fixes

As shown in the GIF above, this workflow helps establish accessibility as a routine part of your development process rather than an afterthought.

With automated testing in place, let’s explore best practices to ensure that your extension remains accessible throughout development.

Best Practices for Accessible Browser Extensions

We've transformed our sample advice-generating browser extension from a functional but inaccessible tool into an inclusive one that works for everyone.

Based on our improvements, here are four key principles for designing accessible browser extensions:

1. Semantic HTML and Clear, Descriptive Labels

Always start with proper HTML structure, using appropriate elements (for example, for a “Generate Advice” action, proper heading hierarchy) before adding ARIA attributes.

Ensure that every interactive element has a clear purpose via aria-label, aria-labelledby, or visible text that explains its action.

2. Clear Communication at Every Step

Every interactive element must convey its purpose effectively. Users need to understand:

• • What’s happening (for example, “Loading new advice…” for loading states)

    • What went wrong (for example, “Failed to load advice” for errors)

    • What changed (for example, aria-live regions for updated content)

3. Complete Keyboard Accessibility

All functionality must be available through keyboard navigation. This requires testing with Tab, Enter, Space, and arrow keys as appropriate.

Provide clear and thoughtful focus indicators that move predictably through your interface with obvious ways to exit modals or complex interactions.

4. User Preferences and Content Script Considerations

Respect user choices by supporting system font size settings and not overriding user-defined colour schemes unnecessarily.

When your extension modifies existing web pages, make sure you don't break the page's established accessibility features, focus management and navigation patterns. Ensure any new elements you inject follow accessibility standards.

Conclusion

As we’ve seen with our advice-generating extension, addressing accessibility issues transforms a functional tool into an inclusive one.

However, while fixing issues in existing extensions is helpful, the most effective approach is letting accessibility guide your design and development decisions from the first line of code.

When starting your next browser extension project, ask:

• How would someone navigate this using only a keyboard?

• Is the purpose of every interactive element immediately clear to screen readers?

• How will users understand what's happening during loading states?

Here are some helpful resources

• Chrome Extension Accessibility Documentation

• Extension Accessibility Checker

• Web Content Accessibility Guidelines (WCAG) 2.1

Major browsers, such as Chrome, Firefox, and Edge, continuously update their developer tools, with each update potentially bringing new features to web developers. These new features increase the ease of use by adding intuitive UIs, more advanced debugging, and enhanced performance analysis tools.

Staying up to date with these changes lets you use your browser DevTools to its fullest potential to make your workflow easier and speed up the delivery of your web applications.

Table of Content

• How to Use Scroll Into View in DevTools

• How to Use Console Shortcuts in DevTools

• How to Block Resource Request for Website Testing in DevTools

• How to Edit and Resend Network Request in DevTools

• How to Detect Unused Source Code in DevTools

• How to Enable Accessibility Tree in DevTools

• Summary

In this article, we’ll discover some good cross-browser DevTools features and discuss how to use them.

Let’s get started!

How to Use Scroll Into View in DevTools

When debugging, there may be a lot of HTML nodes to skim through to find out where your issue is. Most of the time, when you find the node, you won’t see it until you scroll to where it is on the page.

The Scroll Into View feature easily brings the DOM node into the viewport by right-clicking and selecting Scroll Into view in Chrome, Firefox, and Edge.

This feature saves a lot of time when debugging CSS issues or wanting to verify the correct placement of elements on a page, ensuring you can quickly locate elements on the page through the HTML nodes without needing to scroll through many lines of content manually.

In the image below, we are trying to find a h2 element that is nested inside several layers of other elements.

In the image above, instead of scrolling through the entire page to spot the h2 element, we right-clicked and used the Scroll Into View feature to instantly bring the h2 element into view. We can expand on this feature to do other things with the element when we have scrolled to it. We can tweak the CSS properties in real time via the styles panel and even find and fix layout issues.

How to Use Console Shortcuts in DevTools

There are lots of shortcuts that can be used in the Console that allows you, as the developer, to debug faster. One of them is the $_ shortcut. This shortcut returns the value of the most recent expression evaluated by the Console. Let’s say, for example, we have a multiplier function:

In the image below, you can see how the $_ shortcut is used as a special variable in the browser Console to store the most recently evaluated expression:

Without the $_ shortcut, you would have to either retype the entire function call or you might store the result in a variable like this:

let result = multiply(5)
result(4) // returns 20

In the code above, the multiply(5) function has to return a function and assign the function to result, which is then called with 4 as the parameter result(4).

I'm sure you can see how this already introduces some redundancy and extra steps that can be cumbersome when you're dealing with more complex operations or when doing multiple steps of calculations. This is where the $_ shortcut shines. When we run the multiply(5) code in the Console, a function is returned and stored in the $_ variable by the Console, which we can access using the $_ shortcut.

Another shortcut is using $0 to access nodes from the Console. $0 can be used to access the currently selected node in the DOM tree from within the Console. As you inspect a webpage with DevTools, you often browse the DOM tree in the Elements panel to find the element that you're interested in. Once you click on an element in this panel, DevTools internally keeps track of this element, and it becomes the currently selected element.

The $0 is a shortcut that refers to the currently selected element in the Console, so you can manipulate it directly in the Console without writing a query to select it again.

The screenshot below shows how we can use $0 in the Console to access the selected node in the DOM tree and change the background color to whatever we want.

From the image above, we started by inspecting the desired element we wanted in the elements panel. Now, instead of querying the element again using document.querySelector('#element'), you can just use $0 to manipulate it directly like this:

$0.style.backgroundColor = 'lightblue';

This code changes the background color of the selected <div> to a gentle light blue. What really makes $0 useful in this case is that it allows you to refer directly to the exact element you chose in the DOM, making sure that you're working with the correct element, even in cases where elements are dynamically generated or deeply nested.

How to Block Resource Request for Website Testing in DevTools

The Block Resource Request DevTools feature is an important feature for web developers to test how their websites behave when specific resources cannot be loaded.

This feature enables you to simulate situations where an image, JavaScript, CSS, or an entire domain becomes unreachable, and you get to see how your webpage would behave in that situation.

Resources requested by the browser aren’t always guaranteed to be downloaded, which can lead to unexpected experiences for users of your website. You can block requests to a resource on Chrome, Firefox, and Edge and test how your site behaves.

On Chrome and Edge:

• On the Network panel, right-click on the resource you want to block and select Block request URL.

• Refresh the website, and the blocked resource won’t be downloaded and won’t affect the webpage.

In the image below, we are using the Block request URL option in the Network tab to block a CSS request and see how the web page will look like if the selected CSS file fails to load.

From the image above, we can see all the network requests made by the webpage including requests for images, CSS files, JavaScript files, and so on. In my case I've filtered for just CSS files to be shown only.

From here, you can right-click on the CSS file in the Network panel and select Block request URL. This action will prevent the browser from loading the specific CSS file the next time the page is refreshed.

By blocking the request, we can watch out for weird behaviors and also measure how the absence of the blocked resource can affect the page load time and performance.

On Firefox:

• On the Network panel, right-click on the resource you want to block and select Block URL.

• Reload the page.

I’ve used this to test how my site behaves when I don’t load a particular JavaScript file. This feature can help developers debug issues that can arise when users disable JavaScript.

How to Edit and Resend Network Request in DevTools

One of the coolest DevTools features is the ability to edit and resend network requests right in the browser. This feature can be really useful for debugging a network request problem. For example, scenarios where you’d want to see how changes to request parameters, headers, or body affect the response from the server, without having to make any changes to the frontend code or restarting the entire request process.

When making a network request, requests made to a backend service might fail or not respond with the intended data. It’s a pain to have to reload the whole page to retry the request, which is why the Edit and Resend feature is helpful.

In the Edge and Firefox browser, you can edit and resend a network request by right-clicking on the request you want to edit or resend and select Edit and Resend, just like in the image below.

In the image above, we tried to log into a website. When a user submits their credentials, the form sends a POST request to an API endpoint, /auth/login, with the user’s username and password.

Sometimes, the server may return a 400 Bad Request error, and for us to debug the error and find out why, we have to retry the request. We don't want to keep on filling out the form, so we use the Edit and Resend feature as shown below.

The image above is the network Console or a sidebar that will open when you click on Edit and Resend, showing the details of the request. Here, you can edit:

• URL: If necessary, you can modify the URL or add query parameters.

• Headers: You might notice a missing or incorrect Content-Type header, which you can fix here.

• Body: This is where you can adjust the payload, such as correcting the username or password fields.

In Chrome browsers, the edit and resend feature only works for XHR requests, and you can use it by right-clicking on the request and selecting replay.

How to Detect Unused Source Code in DevTools

The Coverage tool in DevTools enables developers to spot areas of their JavaScript and CSS files that remain unused during the loading and interaction stages of a webpage. It's an important feature for enhancing web performance by reducing file sizes and eliminating unnecessary code for faster page load times and a better user experience.

Removing unused JS and CSS code is a great way to save your users bandwidth. The Coverage tool allows you to find the unused code in your source code, and either remove it or defer it till the piece of code is needed.

On Chrome and Edge:

• In DevTools, press Ctrl/cmd+Shift+P, type coverage and select Start instrumenting coverage, refresh the page, then hit enter.

• You’ll see a table of JS and CSS files with an unused byte column.

• Click on any of the files to open it. The line by the side indicates which section of code isn’t unused in red.

In the image below, we are identifying the unused CSS code to potentially remove or defer the loading of the code.

From the image above, after the recording is complete, the Coverage tool will display a list of CSS and JavaScript files loaded by the page, along with detailed metrics:

• Total Bytes: The size of the file.

• Unused Bytes: The number of bytes in the file that were not used.

• Usage Visualization: A visual bar representing the proportion of used versus unused code.

On Safari: In the Sources panel, open the left navigation sidebar and click on any JS file. At the top right of the toolbar, click on the coverage icon c and refresh your page. You'd be able to see that the sections of code not executed are grayed out.

How to Enable Accessibility Tree in DevTools

The accessibility tree is similar to the element DOM tree and is used by assistive technologies such as screen readers to read web content. Developers can use this feature to debug accessibility issues on their websites. Chromium browsers use Chrome’s accessibility API to make this possible, while Firefox has its own accessibility tool.

On Chrome and Edge:

• On the settings page, select the Experiments tab.

• Check the box for the Enable full accessibility tree view option in the Elements panel.

• Refresh DevTools and go to the Elements tool.

• In the top-right corner of the element view, click Switch to DOM Tree view.

For example, in the image below, we are checking if the links and buttons on our website are recognized correctly and accessible to users who rely on screen readers:

With the accessibility tree enabled, you can see a simplified version of the DOM tree, focused on elements relevant for accessibility. When you select an element on the accessibility tree to view its properties, the tree displays the element’s role, name, and other important attributes, such as aria-label if they are present.

You’ll also see if the element is focusable and what its computed accessibility properties are.

This helps a great deal because if the element isn’t appearing correctly in the accessibility tree or is missing essential attributes, you may need to adjust your HTML or ARIA attributes to improve accessibility.

On Firefox:

• In the Firefox DevTools, click on the accessibility tab and expand the document node.

• You can click on different nodes to view their properties.

• Accessibility issues for nodes will be displayed on the Checks tab.

Summary

In a nutshell, staying current with the latest cross-browser DevTools features will save you time as a web developer. This post touches on element inspection tips, some Console shortcuts to make your debugging process easier, and some useful tips for network monitoring.

Hopefully, you will keep exploring and using more DevTools features to improve your developer experience.

In this article, we'll dive into practical strategies for achieving cross-browser compatibility, focusing on specific UI components like form elements, scrollbars, and fonts. Then we'll discuss some general best practices that every web developer should adopt.

“Remember that you are not your users — just because your site works on your MacBook Pro or high-end Galaxy Nexus, doesn't mean it will work for all your users!” – MDN Web Docs

Table of Contents

• What is Cross-Browser Compatibility?
• Common Cross-Browser Issues and Solutions
• Best Practices for Cross-Browser Compatibility
• Conclusion

What is Cross-Browser Compatibility?

In simple terms, cross-browser compatibility is about ensuring that your website delivers a consistent, top-notch experience for all users, regardless of their browser choice.

Browsers use different engines, so by default they render websites differently. In order to get your websites to look and work the same regardless of the user's browser requires an understanding of unique browser capabilities.

Cross-browser compatibility says that ideally, a website should look and function the same whether someone is viewing it on Chrome, Microsoft Edge and Opera (powered by Blink engine), Firefox (powered by Gecko engine) or even Safari (powered by WebKit engine).

Benefits of Cross-Browser Compatibility:

1. Wider reach – your websites are accessible to more users, regardless of the browser they use.
2. Consistent User Experience – your websites have a uniform look and functionality across platforms.
3. Better Search Engine Optimization (SEO) – your websites get higher rankings from being more user-friendly.

Common Cross-Browser Issues and Solutions

Infographic showing test results of a web page on different browsers. Image credit Browserstack

Form Elements

The appearance and behavior of form elements like <input>, <select>, <textarea>, and <button> can vary significantly across browsers. This affects both the visual aspect and usability of forms, including how users interact with them (for example, clicking, focusing, and typing).

For instance, placeholder text in <input> fields may appear fainter in one browser and more pronounced in another, leading to readability issues.

To resolve this:

• Use CSS to standardize the appearance of form elements as much as possible.
• For placeholders, ensure contrast and legibility across browsers:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #909090;
  opacity: 1; /* Firefox */
}

input.studentid:-ms-input-placeholder { /* Microsoft Edge */
  color: #909090;
}

The CSS code above targets placeholder text in input fields across browsers, sets their color to #909090, and ensures full opacity for consistent visibility (with specific rules for Microsoft Edge).

Fonts

Fonts and typography face several cross-browser compatibility issues, from varying default font sizes to differences in font rendering engines. This can affect the weight, spacing, and overall appearance of text.

A font might appear thinner and more spaced out in Chrome compared to Edge, affecting readability and design consistency.

To resolve this:

• Define a base font size in your CSS and use relative units (like em or rem) for text sizing as shown in the code below. This helps maintain scalability and consistency.

html {
  font-size: 16px; /* Define a base font size */
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3, p {
  margin: 2rem;;
  padding: 1.5rem;
}

• When using web fonts, ensure they are loaded properly across all browsers by using services like Google Fonts, which provide cross-browser compatible font loading:

<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">

• The code below makes sure that the 'Open Sans' font looks the same on our website, no matter the browser. It does this first by using a version of the font that might already be on our computer to load things faster. Otherwise, it grabs it from the internet but swaps in a default font while waiting for the latter to load.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2');
}

Scrollbars

Scrollbar styling has long been a challenge for web developers due to inconsistent support across different browsers. While browsers like Chrome, Safari, and Edge have provided ways to customize scrollbars using CSS, the level of support and ways of implementing them vary.

Recent updates have seen improvements in standardizing scrollbar customization, with most modern browsers adopting similar capabilities. But there are still some differences in the approach:

For Chrome, Edge, and Firefox, you can use the CSS scrollbar-width and scrollbar-color properties to customize the scrollbar's appearance. These are part of a newer standard aimed at providing a more consistent way of styling scrollbars across browsers that support it.

/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;

For Safari, which uses the WebKit rendering engine, you'll need to use the ::-webkit-scrollbar pseudo-element to achieve similar styling. This method is specific to WebKit-based browsers.

/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

The CSS code above customizes the appearance of scrollbars across those browsers by adjusting their size and colours.

But for consistency across all browsers, you'll need to design your web pages in a way that the default scrollbar appearance does not negatively impact your design.

Best Practices for Cross-Browser Compatibility

Infographic showing measuring tools. Image credit Creative Bloq

Define a Doctype

Start your HTML document with a <!DOCTYPE> declaration to ensure standards mode is activated.

This is important because it tells the web browser which version of HTML the page is written in. Without it, browsers might render the page in "quirks mode," – where the browser assumes you've written old, non-standard code. This ultimately leads to unpredictable styling and layout issues because modern web standards are not fully applied.

A <!DOCTYPE> declaration in HTML5 looks like this at the very beginning of your HTML file:

<!DOCTYPE html>

Use a CSS Reset

A CSS reset is basically adding a set of rules that target common elements to remove their default styling, reducing browser-default discrepancies.

Various browsers have different inherent styles for HTML elements – margins, paddings, font sizes, and so on. So implementing a CSS reset makes sure that only the styles you write in your code will take effect. This leads to a consistent baseline for styling your webpage across various browsers.

There are developers that like to write theirs from scratch. And there are others like me, who use Eric Meyer's popular and free CSS reset as you can see in the code below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

There's another group of developers that use Normalize.css, which you can install using a package manager like npm and then importing it in your CSS.

npm install normalize.css

Review CSS Property Support

Before using advanced CSS features, check their compatibility on websites like Can I Use. There, you can find detailed compatibility tables for HTML, CSS, and JavaScript features across different browsers and versions. This should help you make informed decisions about which technologies to use and when to implement fallbacks.

In the screenshot below, I searched for CSS Grid and immediately got to see the various browsers and their versions that support it. So before implementing CSS Grid on my web page, I have an idea of the browsers that it works with.

Browser compatibility for CSS Grid.

Create Responsive Websites

The multi-device world we currently live in demands that, as web developers, we make responsiveness a priority.

We can use fluid layouts, flexible images, and media queries to ensure our websites adapt to any screen size. The ripple effects of getting responsiveness right is cross-browser compatibility, accessibility and enhanced user experience.

Here's an article discussing some best practices for responsive design and how to implement them.

Do Cross-Browser Testing

Testing has become such a buzzword in programming lately, but this is because it's very important to make sure the code you write works as expected.

It's not just about checking if your TypeScript code runs smoothly, though. Even simpler web projects need thorough testing.

Cross-browser testing means trying your web pages on various browsers and devices to make sure they look and work consistently across board.

Conclusion

Cross-browser compatibility may be a mouthful to pronounce. But as we’ve seen, it's essential to consider when building websites. And you can gradually make your websites compatible by testing and tweaking your code and implementing some of the five best practices we’ve discussed above.

So, before you draw the curtains on your next website or web app, remember to check if your users on Chrome, Firefox, Safari, and other browsers are seeing and experiencing the same things.

Here are some helpful resources:

• MDN Web Docs on Cross-browser compatibility
• Codepaper on Significance of Cross-browser compatibility
• Eric Meyer on CSS Reset

As a web developer, you're likely eager to create amazing web applications that reach users across the globe. But one major challenge you'll face is ensuring that your web app works seamlessly on various web browsers. This is where cross-browser compatibility testing comes into play.

In this article, we'll dive into the challenges of cross-browser compatibility, and I'll give you some best practices to overcome them.

What is Cross-Browser compatibility testing?

Cross-browser compatibility testing is a critical quality assurance process in web development. It involves testing and ensuring that a website or web application functions and appears consistently and correctly across different web browsers and their various versions.

Since web browsers are developed by different companies and have distinct rendering engines, they may interpret HTML, CSS, and JavaScript code differently. This can lead to discrepancies in how a website looks and behaves, causing issues for users who access the site using different browsers.

Common Cross-Browser Compatibility Issues

One fundamental cross-browser compatibility concern relates to the rendering of web pages.

CSS styles add another layer of complexity. Inconsistencies in how browsers interpret and apply these styles can lead to visual disparities, such as variations in font sizes, colors, spacing, and layout. These discrepancies can undermine the website's design integrity and user experience.

Plugins like Flash or Java pose compatibility challenges, as not all browsers support them, and some browsers have disabled them entirely. This can result in certain features of a website not working as intended or being inaccessible to users on specific browsers.

Web developers often rely on third-party libraries and frameworks to streamline development. But these dependencies may not be universally compatible with all browsers.

Compatibility issues with these external tools can lead to malfunctions or performance bottlenecks, affecting the website's overall stability and functionality.

Browser-specific bugs related to form submission, caching, and other critical functions can create headaches for developers. These bugs may manifest differently on each browser, requiring meticulous testing and workarounds to ensure consistent performance and functionality across the board.

Differences Between Cross-Browser and Compatibility Testing

There are some key differences between cross-browser testing and compatibility testing. Here are the main ones:

Scope

Cross-browser testing focuses on ensuring that a website or web application functions consistently and correctly across different web browsers. It primarily addresses variations in rendering and behavior caused by different browsers' rendering engines.

Compatibility testing is a broader testing approach that encompasses not only different browsers but also various operating systems, devices, screen sizes, and network conditions. It assesses how well a website or application functions across a range of diverse environments.

Objective

The main objective of cross-browser testing is to verify that the website or web app looks, works, and behaves the same or very similarly across various browsers, such as Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and others. It aims to eliminate visual discrepancies, functional issues, and inconsistencies in user experience.

The primary goal of compatibility testing is to ensure that the website or application is compatible with a wide array of user environments, such as browsers, operating systems (Windows, macOS, Android, iOS), devices (desktops, laptops, tablets, smartphones), and network conditions (internet speeds and connectivity types).

Challenges

Challenges in cross-browser testing arise from variations in how browsers interpret HTML, CSS, and JavaScript code, as well as differences in supported features and standards compliance.

Challenges in compatibility testing include addressing issues related to device-specific features, operating system dependencies, and network-related performance problems in addition to cross-browser challenges.

In summary, cross-browser testing is a subset of compatibility testing. While cross-browser testing specifically focuses on ensuring consistent performance across different web browsers and versions, compatibility testing encompasses a wider range of factors, including browsers, operating systems, devices, and network conditions. This helps guarantee a seamless user experience across diverse user environments.

Both types of testing are crucial for delivering high-quality web applications that meet the needs of a broad user base.

Importance of Cross-Browser Compatibility Testing

Neglecting this crucial aspect of web development can result in missed opportunities and potential damage to your brand's reputation.

User Experience

Users access websites and web applications through a variety of browsers and devices. Ensuring compatibility across these platforms guarantees a consistent and seamless experience for all users.

Frustration resulting from a poorly rendered website on a specific browser can lead to a high bounce rate and loss of potential customers or visitors.

Market Reach

Different users prefer different web browsers. Ignoring compatibility testing means potentially alienating a significant portion of your audience.

By ensuring your website works well on popular browsers like Chrome, Firefox, Safari, and Edge, you maximize your market reach and accessibility.

Maintaining Credibility

A website that functions well across browsers reflects professionalism and attention to detail. On the contrary, a website with compatibility issues can harm your brand's credibility and reputation. Users might perceive your site as unreliable or poorly developed.

Mobile Devices

Mobile browsers come with their own set of quirks and challenges. Given the rise in mobile internet usage, ensuring compatibility with mobile browsers is crucial.

A website that adapts well to varying screen sizes and touch interfaces is essential for catering to the mobile audience.

SEO Impact

Search engines like Google consider user experience as a ranking factor. If your website performs poorly on specific browsers, it might affect your search engine rankings. A lower search ranking can significantly reduce organic traffic to your site.

Support and Maintenance

A website that works smoothly across different browsers reduces the burden of ongoing support and maintenance. Fewer compatibility-related issues mean fewer updates and patches needed, saving time and resources in the long run.

Accessibility Compliance

Accessibility is not only a legal requirement in many regions but also a moral imperative. Ensuring compatibility with screen readers and other assistive technologies allow people with disabilities to access and use your website.

Failure to meet accessibility standards can lead to legal consequences and damage to your brand's reputation.

Global Audience

The internet connects people worldwide. International users will access your website using various browsers. Cross-browser compatibility ensures that language characters, fonts, and other regional aspects display correctly, enabling you to cater to a global audience effectively.

Competitive Advantage

Websites that prioritize cross-browser compatibility gain a competitive edge. They can attract and retain users more effectively than those with compatibility issues.

A well-optimized site provides a better user experience, leading to higher user engagement and potentially higher conversion rates.

Types of Cross-Browser Compatibility Testing

Here are some of the main types of cross-browser and compatibility testing:

Functional Testing

This type of testing checks if all the interactive features and functionalities of a website work as expected across different browsers.

Examples are ensuring that forms can be submitted, buttons are clickable, navigation menus function correctly, and scripting interactions behave consistently.

Visual Testing

This type of testing focuses on the visual appearance of a website or application across different browsers and devices.

Examples are verifying that fonts, colors, layouts, and images are displayed consistently, and that there are no visual glitches or misalignments.

Performance Testing

This type of testing assesses how a website performs in terms of loading speed and responsiveness across various browsers and devices.

Examples are measuring page load times, checking the site's responsiveness on different screen sizes, and ensuring that resource-intensive features (videos or animations) do not cause performance issues.

Cross-Device Testing

This type of testing ensures that a website functions properly on a range of devices, including desktops, laptops, tablets, and mobile phones.

Examples are testing touch interactions on mobile devices, verifying responsiveness on different screen resolutions, and confirming compatibility with various device orientations (landscape and portrait).

Cross-Platform Testing

This type of testing involves checking compatibility across different operating systems and browsers.

Example is to verify that the website functions consistently on both Windows and macOS computers, as well as Android and iOS devices.

Browser Version Testing

This type of testing involves testing a website on different versions of a particular browser to ensure compatibility across various iterations.

An example is to test on older versions of popular browsers like Internet Explorer 11, or older versions of Firefox or Chrome, to support users who have not updated their browsers.

Accessibility Testing

This type of testing helps ensure that a website is usable by people with disabilities and complies with accessibility standards such as WCAG (Web Content Accessibility Guidelines).

Examples are testing keyboard navigation, screen reader compatibility, and the use of ARIA (Accessible Rich Internet Applications) attributes to make the site more accessible to users with disabilities.

Security Testing

Security testing verifies that a website's security features and protocols work consistently across different browsers and platforms.

Examples are to ensure that SSL (Secure Sockets Layer) certificates are correctly implemented, that login forms are secure, and that security headers like Content Security Policy (CSP) are effective.

This comprehensive testing approach helps ensure a seamless and consistent user experience across diverse user environments.

Roles and Collaboration in Cross-Browser Compatibility Testing

Cross-browser compatibility testing involves web developers, designers, and quality testers working together. Developers write clean code, designers ensure visual consistency, and testers find and document issues.

Collaboration is key. Developers and designers create flexible designs, and testers rely on their expertise. Communication is vital for resolving issues promptly and meeting compatibility standards.

External collaboration with users and clients is also crucial. User feedback helps identify real-world issues, and managing client expectations aligns with browser capabilities. Successful testing relies on technical know-how and a collaborative culture within the team and with external stakeholders.

Best Practices for Cross-Browser Compatibility Testing

By adhering to these best practices, web developers and testers can effectively tackle cross-browser compatibility challenges and deliver web experiences that are reliable and user-friendly across a wide range of browsers and devices.

• Identify Target Browsers: Determine which browsers are most commonly used by your target audience. Focus your testing efforts on these browsers to ensure the best user experience for the majority of your visitors.

• Prioritize Popular Browsers: Give higher priority to testing on the most popular web browsers such as Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge. These browsers have larger user bases and are more likely to be used by your visitors.

• Test on Mobile Devices: Don't forget to test on mobile browsers, including iOS Safari and Android Chrome, as mobile users make up a significant portion of internet traffic. Ensure that your website is responsive and mobile-friendly.

• Use Browser Developer Tools: Familiarize yourself with the developer tools available in modern browsers. These tools allow you to inspect elements,
  debug JavaScript, and simulate different browser environments, making it easier to identify and fix issues.

• Leverage Cross-Browser Testing Tools: Consider using cross-browser testing tools and services like BrowserStack, CrossBrowserTesting, or Sauce Labs.
  These platforms provide access to a wide range of browser and OS combinations, allowing you to test efficiently without setting up multiple physical environments.

• Regularly Update Your Browser List: Keep your list of target browsers up to date. Browsers release new versions regularly, and older versions may become less relevant. Test on the latest browser versions to address potential issues before they become widespread.

• Validate HTML and CSS: Use validation tools such as the W3C Markup Validation Service and CSS Validator to check your code for compliance with web standards. Valid code is more likely to render consistently across browsers.

• Implement Graceful Degradation and Progressive Enhancement: Design your website with a "baseline" experience that works on all browsers and devices. Then, enhance the experience for modern browsers with additional features.
  This approach ensures that all users have a functional experience.

• Perform Automated Testing: Consider setting up automated testing using tools like Selenium, Puppeteer, or TestCafe. These tools allow you to create and run test scripts across various browsers automatically, saving time and ensuring consistency.

• Regularly Review and Update: Stay informed about the latest developments in web standards, browser updates, and best practices. Periodically review and update your testing procedures to remain effective in ensuring cross-browser compatibility.

• Test Accessibility: Ensure that your website complies with web accessibility standards, such as WCAG. Test with screen readers and other assistive technologies to make your site accessible to users with disabilities.

• Document and Track Issues: Maintain a detailed log of cross-browser compatibility issues and their resolutions. This documentation will help your team address similar issues in the future and maintain a high level of consistency.

Tools for Cross-Browser Testing

You have access to various tools that can help you test your web projects efficiently. Let's look at a few popular ones now:

BrowserStack

This is a popular cloud-based cross-browser testing platform that allows you to test your website or web app on a wide range of browsers and operating systems.

It provides access to real browser instances for manual testing and supports automated testing with Selenium and Appium.

CrossBrowserTesting

This is a cloud-based testing platform that offers a vast array of browsers and devices for cross-browser testing.

It provides live interactive testing as well as automated testing capabilities and integrates with various testing frameworks.

Sauce Labs

This is another cloud-based testing platform that offers a comprehensive range of browser and device combinations for testing web and mobile applications.

It supports both manual and automated testing and integrates with popular testing frameworks like Selenium and Appium.

LambdaTest

This is a cloud-based cross-browser testing platform that provides access to a large selection of browsers and operating systems.

It offers live interactive testing and supports automated testing with popular testing frameworks.

Browserling

This is a web-based tool that allows you to quickly test your website on a variety of browsers without the need for downloads or installations.

It offers real-time browser access and is suitable for quick checks and debugging.

Browsershots

This is an open-source tool that provides screenshots of your website or web app as it appears in different browsers and versions. While it doesn't offer live testing or interaction, it's useful for visual comparisons.

Blisk

This is a browser specifically designed for web development and testing. It provides a side-by-side view of your website in multiple devices and browsers, making it easier to spot compatibility issues during development.

Ghostlab

This is a paid tool for synchronized testing and debugging across multiple devices and browsers. It helps you inspect and debug issues in real time while maintaining synchronization between devices.

Browser DevTools

Most modern browsers, including Chrome, Firefox, Safari, and Edge, come with built-in developer tools. These tools are essential for inspecting, debugging, and testing websites directly in the browser environment. They offer features for emulating different browsers, devices, and network conditions.

These tools vary in terms of features, pricing, and ease of use, so it's essential to choose the one that best fits your specific cross-browser testing needs and budget.

Conclusion

Cross-browser compatibility testing is an essential aspect of web development. By following these best practices, you can ensure that your web applications provide a consistent and delightful user experience across different browsers.

A combination of cloud-based testing platforms and browser developer tools can provide comprehensive coverage for testing your web projects on different browsers and ensuring a consistent user experience.

Remember that the web development field is constantly changing, so continuous learning and adaptation are key to your success.

If you found this guide helpful and enjoyable, please give it a like. For more insightful tutorials, follow me on X for updates 🙏.

Happy coding, and may your web apps thrive in every corner of the internet!

Kudos to ValueCoders for the cover image image.

Browsers have default interactions and behaviors for different events.

For example, when a user clicks a "submit" button on a form, the form is submitted to a URL by default.

When the child of an element is clicked, the click event also occurs on the element because it is the main container.

In some cases, you may want to override these defaults. In this article, we will learn what the event.preventDefault() and event.stopPropagation() methods are and how to use them to cancel some default actions that occur in the browser.

event.preventDefault()

This method prevents default actions that browsers make when an event is triggered.

Here are some examples of default actions on webpages and how to override them with event.preventDefault().

How to override default form submission

When a user submits a form (the submit button clicked), the default action of the form is to submit the form's data to a URL that processes the data.

Form elements have the action and method attributes which specify the URL to submit the form to and the type of request (get, post, and so on), respectively.

If these attributes are not provided, the default URL is the current URL the form was submitted on, and the method is get.

For example, this code:

<form>
  <input name="email" />
  <input name="password" />
  <input type="submit" />
</form>

produces this page:

On submitting the form with input "dillion" and "password", you can see a get request submitted to 127.0.0.1:5500/index.html like this:

This action is how browsers handle forms by default.

But you may want to do more things to the data before sending a request. This is especially common in today's approach to handling forms.

You may want to do some data validation, data checks, processing, configuring headers, and so on before sending the request to a URL.

In these scenarios, you'll want to prevent the form's default action. Here's how:

<form id='form'>
  ...
</form>

const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()

  // process data and submit a request manually
})

This way, submitting the form is in your hands.

How to override default action when clicking a link

When you click a link (an anchor tag a with a href attribute), the default action is a navigation on the browser to the clicked link.

What if you wanted to intercept that action and maybe do something before the navigation? For example, checking that the user has access to the page they want to navigate to. Here is how you'd do that:

<a id="link" href="https://google.com">Google</a>

const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // do something and navigate
})

You can test it out. When you click the "Google" link, no navigation occurs – because you have prevented the default navigation action. Now, you have to handle the navigation yourself.

event.stopPropagation()

Propagation is the act of spreading something, in this case, events. The stopPropagation method is used to prevent the spreading of events when an event is triggered on an element.

In JavaScript, when you trigger an event on an element, it bubbles up the tree to the parents and ancestors of that element. Basically, the element with the event is "inside" the parent's container, so the parent also receives the events.

To explain this better, I'll use an example.

Clicking the child of an element

Let's say you have the following elements:

<div>
  <button>Click me</button>
</div>

When you click on the button, you are also clicking on the div container because the button is in the container. This logic means that the click event propagates from the button to the container, and the event keeps spreading to all the grandparents until it gets to the root.

To verify this, I will explain how this works with this code:

<div id="div">
  <button id="button">Click me</button>
</div>

const div = document.getElementById('div')
const button = document.getElementById('button')

button.addEventListener('click', () => {
  console.log('button clicked')
})

div.addEventListener('click', () => {
  console.log('div container clicked')
})

When you try to run this on your browser and you click the button, you will get this result:

The div container also receives the click event, so the click callback function is also called.

Event propagations are the default behaviour of events and elements, but in some cases, you may not want some behaviours. Amongst many examples, here is one.

Here is the Gmail New Message popup:

At the top, you have the three action buttons. One minimizes the popup, one makes the popup fullscreen, and one closes the popup.

But the top bar, with the "New Message" text, also has a click handler, so that when it's clicked, it minimizes the popup:

One thing you want to avoid here is that, on clicking any of the buttons, you do not want the click event to propagate to the top bar and also execute the function for that event. What I mean is, on clicking the close button, for example, you do not want the top bar to also minimize.

In cases like this, you want to stop the propagation.

Let's say the popup is built like this:

<div id='top-bar'>
  <!-- The Message Element -->
  <!-- The Buttons -->
</div>

const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')

topBar.addEventListener('click', () => {
  // minimize or maximize popup
})

closeButton.addEventListener('click', () => {
  // close popup
})

You will also want to add the stopPropagation method to the button's listener, to avoid spreading the event to the top bar. To do so, you will update the button's listener to:

closeButton.addEventListener('click', (event) => {
  event.stopPropagation()
  // close popup
})

With this in place, the top bar will only receive the click event when it is directly clicked on.

Wrapping Up

The difference between event.preventDefault() and event.stopPropagation() is that the former prevents default actions made by the browser, while the latter prevents the default behaviors of events –propagating up the tree.

These default actions and behaviors are not mistakes, and you do not have to worry about them while you code. But there are scenarios where you want to override them, as we have seen in the examples in this article.

We will finish by actually writing our own extension (Super Fun!) which allows us to copy any code snippet to our clipboard with a click of a single button.

To continue with this article:

• You need to have a basic understanding of JavaScript.

• You need the Firefox browser (or any other browser will also work)

What is a Browser Extension?

A browser extension is something you add to your browser which enhances your browsing experience by extending the capacity of your browser.

As an example, think about an ad blocker which you might have installed on your device. This makes your browsing experience better by blocking ads when you surf the web.

How to Write Your Own Basic Browser Extension

Now let's start by writing a very basic extension.

To begin, we'll create a folder inside which we create a file named manifest.json.

What is a manifest file?

A manifest file is a must have file in any browser extension. This file contains basic data about our extension like name, version, and so on.

Now inside the manifest.json file copy the following snippet:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
}

[2025 Update: Chrome currently only supports version 3 for manifest.json]

How to load the extension file

For Firefox users, follow these steps:

In the address bar, search for this:

about:debugging#/runtime/this-firefox

You will see an option to Load Temporary Add-on. Click on that option and choose the manifest.json file from the directory.

For Chrome users:

In the address bar search for this:

chrome://extensions

• Enable Developer Mode and switch into it.

• Click the Load unpacked button and select the extension directory.

Hurray! You've installed the extension successfully. But the extension doesn't do anything currently. Now let's add some functionality to our extension. To do this, we'll edit our manifest.json file like this:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
    {
     "matches":["<all_urls>"],
     "js":["main.js"]
    }
  ]
}

In the above code, we added a content script to manifest.json. Content scripts can manipulate the Document Object Model of the web page. We can inject JS (and CSS) into a web page using a content script.

"matches" contains the list of domains and subdomains where the content script should be added and js is an array of the JS files to be loaded.

Now inside the same directory create a main.js file and add the following code:

alert("The test extension is up and running")

Now reload the extension and when you visit any URLs you will see an alert message.

Don't forget to reload the extension anytime you edit the code.

How to Customize Your Browser Extension

Now let's have some more fun with our extension.

What we are going to do now is create a web extension that changes all the images of a webpage we visit to an image we choose.

For this, just add any image to the current directory and change the main.js file to:

console.log("The extension is up and running");

var images = document.getElementsByTagName('img')

for (elt of images){
   elt.src = `${browser.runtime.getURL("pp.jpg")}`
   elt.alt = 'an alt text'
}

Let's see whats going on here:

var images = document.getElementsByTagName('img')

This line of code selects all the elements in the web page with the img tag .

Then we loop through the array images using a for loop where we change the src attribute of all the img elements to a URL with the help of the runtime.getURL function.

Here pp.jpg is the name of the image file in the current directory in my device.

We need to inform our content script about the pp.jpg file by editing the manifest.json file to:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
   {
    "matches":["<all_urls>"],
    "js":["main.js"]
   }
  ],
  "web_accessible_resources": [
        "pp.jpg"
  ]
}

Then just reload the extension and visit any URL you like. Now you should see all the images being changed to the image which is in your current working directory.

How to add icons to your extension

Add the following code in the manifest.json file:

"icons": {
  "48": "icon-48.png",
  "96": "icon-96.png"
}

How to add a toolbar button to your extension

Now we'll add a button located in the toolbar of your browser. Users can interact with the extension using this button.

To add a toolbar button, add the following lines to the manifest.json file:

"browser_action":{
   "default_icon":{
     "19":"icon-19.png",
     "38":"icon-38.png"
   }
  }

All the image files should be present in your current directory.

Now, if we reload the extension we should see an icon for our extension in the toolbar of our browser.

How to add listening events for the toolbar button

Maybe we want to do something when a user clicks the button – let's say we want to open a new tab every time the button is clicked.

For this, we'll again add the following to the manifest.json file:

"background":{
        "scripts":["background.js"]
  },
  "permissions":[
      "tabs"
  ]

Then we'll create a new file named background.js in the current working directory and add the following lines in the file:

function openTab(){

    var newTab = browser.tabs.create({
        url:'https://twitter.com/abhilekh_gautam',
        active:true
    })
}

browser.browserAction.onClicked.addListener(openTab)

Now reload the extension!

Whenever someone clicks the button, it calls the openTab function which opens a new tab with the URL that links to my twitter profile. Also, the active key, when set to true, makes the newly created tab the current tab.

Note that you can use APIs provided by browsers in the background script. For more about APIs refer to the following article: Javacript APIs.

Now that we've learned some of the basics of browser extensions, let's create an extension that we as developers can use in our daily lives.

Final Project

Alright, now we're going to write something that will be useful for us in daily life. We'll create an extension that allows you to copy code snippets from StackOverflow with a single click. So our extension will add a Copy button to the webpage which copies the code to our clipboard.

Demo

First we'll create a new folder/directory, inside which we'll add a manifest.json file.

Add the following code to the file:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"copy code",
  "content_scripts":[
    {
     "matches":["*://*.stackoverflow.com/*"],
     "js":["main.js"]
    }
  ]
}

Look at the matches inside the content script – the extension will only work for StackOverflow's domain and subdomain.

Now create another JavaScript file called main.js in the same directory and add the following lines of code:

var arr =document.getElementsByClassName("s-code-block")

for(let i = 0 ; i < arr.length ; i++){
 var btn = document.createElement("button")
 btn.classList.add("copy_code_button")
 btn.appendChild(document.createTextNode("Copy"))
 arr[i].appendChild(btn)
 //styling the button
 btn.style.position = "relative"

 if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
  btn.style.left = `${arr[i].offsetWidth - 70}px`

  else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
   btn.style.left = `${arr[i].offsetWidth - 200}px`
 else 
   btn.style.left = `${arr[i].offsetWidth - 150}px`

 if(arr[i].scrollHeight === arr[i].offsetHeight)
   btn.style.bottom = `${arr[i].offsetHeight - 50}px`

 else
   btn.style.bottom = `${arr[i].scrollHeight - 50}px`
 //end of styling the button

   console.log("Appended")
}

First of all, I selected all the elements with the class name s-code-block – but why? This is because when I inspected StackOverflow's site I found that all the code snippets were kept in a class with that name.

And then we loop through all those elements and append a button in those elements. Finally, we just position and style the button properly (the styling's not perfect yet – this is just a start).

When we load the extension using the process we went through above and visit StackOverflow, we should see a copy button.

How to add functionality to the button

Now, when the button is clicked we want the entire snippet to be copied to our clip board. To do this, add the following line of code to the main.js file:

var button = document.querySelectorAll(".copy_code_button")
 button.forEach((elm)=>{
  elm.addEventListener('click',(e)=>{
    navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
    alert("Copied to Clipboard")
  })
 })

First of all, we select all the buttons we have added to the site using querySelectorAll. Then we listen for the click event whenever the button is clicked.

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

The above line of code copies the code to our clipboard. Whenever a snippet is copied we alert the user with the message Copied to clipboard and we are done.

Final Words

Web Extensions can be useful in various way and I hope with the help of this article you will be able to write your own extensions.

All the code can be found in this GitHub repository. Don't forget to give a pull request anytime you come up with some good styling or a new feature like clipboard history and others.

Happy Coding!

There are many extensions that add this functionality to your browser. I'll be focusing on uBlock Origin, as many will already have it. If you don't, then I'd strongly recommend installing it.

What is uBlock Origin?

uBlock Origin is a free and open-source ad blocker available for all major browsers. It also includes an element picker tool that can remove custom elements, which is what we'll be using in this article.

Having knowledge of CSS selectors or XPath will help you go through this tutorial, but isn't required. uBlock Origin provides visual tools to select elements without technical knowledge. Still, writing the selector manually will usually be more reliable.

Why Blocking Elements Is Useful

On the internet, we're constantly consuming information, but quite often it's information that simply isn't relevant to us.

If you access particular websites frequently, it can be a big boost to productivity if you can conditionally single out the information you know you won't need and never consume it in the first place.

• Removing certain types of events from activity or social media feeds.

• Removing popups that ask you to do things you don't want to.

• Removing posts from particular authors on YouTube or social media.

• Removing distractions or dynamic elements that draw your attention.

How to Filter HTML Elements

To filter elements, you can click the uBlock Origin icon at the top of your browser, then click the element picker, the one with the eye drop icon. (More Info)

The uBlock Origin interface, this appears if you click the icon in your browser's toolbar.

You can start by selecting the content you want to remove. Even if the selection isn't perfect, it's just a starting point.

Once the box appears at the bottom-right, you can use the visual tools with the "Pick" button and sliders, or manually specify a selector.

The content highlighted in red is what will be removed once you select the "Create" button. These changes will persist even after refreshing or revisiting the page at a later date. Let's see how this works.

CSS Selectors

You can remove most elements you want to remove easily using CSS selectors. This is great for removing static content on the page.

Removes all release and push events from appearing in my GitHub activity feed. (##div.news div.release, div.news div.push)

Removes the banner to download Slack. (##.p-client__banners)

XPath

You'll usually want to use XPath for one of two reasons:

• You need to check against the value of an element.

• You need to select an element based on the attributes of its children.

This is useful for removing dynamic or user-generated content. We want to remove the entire element, but only if something inside it matches the criteria rather than the element itself.

Removes all plugins from DevilBro. (##:xpath(//a[./div/div/p/object/a = "DevilBro"]))

How it looks after removing all plugins by DevilBro.

Troubleshooting your filters

When filtering elements, your selectors can break at any time. Websites change for various reasons, in most cases due to maintenance or updates.

Don't let that deter you from doing what you want, though. It just means you should keep this in mind when you remove elements.

Try to keep your selectors local to what you actually want to remove, but strict enough that it won't falsely select other elements on the page.

There are also many websites that don't appreciate client-side modifications, and try to hinder this by arbitrarily changing HTML attribute values or obfuscating them.

In these cases, it's best to specify CSS attribute selectors or use XPath to partially match attribute values.

Removing the "Active Now" view on Discord using an attribute selector, (##div[class^="nowPlayingColumn"])

How to Remove Filters

If you no longer want to block something, or the website has changed, you can go to the settings to remove the old filter before making a new one.

To remove a custom filter:

1. Navigate to the uBlock Origin settings.

2. Select the "My filters" tab.

3. Delete the lines with the filter(s) you want removed.

4. Click "Apply changes" at the top.

5. Refresh the page you were on.

Other Helpful Browser Extensions

There are other extensions you can use to remove specific types of content on websites, too.

Highlight or Hide Search Engine Results

Highlight or Hide Search Engine Results (HOHSER) supports all major search engines, including DuckDuckGo and Google.

I believe domain blacklisting should be a native user-setting available in search engines, but until that's a thing, you can use this extension to hide results under domains you don't like.

• Websites with re-hosted or shady download links.

• Search engine optimized junk, like fake coupon websites.

• Websites that block users in the EU.

I still don't care about cookies

I still don't care about cookies removes cookie warnings from appearing on most websites, that way you don't have to deal with them yourself.

The extension will attempt to hide the cookie message, only accepting cookies if necessary.

I strongly recommend only using this in combination with extensions like uBlock Origin and Privacy Badger, to prevent undesirable cookies from being saved.

Conclusion

I hope you're not in a situation where you feel the need to block a significant amount of content from the pages you load.

But if you do feel the need, I hope this makes browsing the internet just a little more bearable for you.

You might even see it when you click a link to download something from the web or when clicking on a link to take you to another webpage.

Have you wondered why about:blank appears and what is it exactly? Let's find out.

Should you worry about about:blank?

So is about:blank just a blank page as the name suggests, or is there more to it than meets the eye?

Does it have any benefits, or is it a useful feature? Should you keep it and use it, or should you get rid off it?

When about:blank shows up, it can be confusing for people and makes them worry. They see a blank page and think it's a virus – some dangerous malware – or that it means something has happened to their browser. They don't understand what it is and what is causing it.

This article answers the above questions. It covers why this page shows up in your browser URL field, why you may actually want to keep it, and if not, how to make it disappear and stop it from showing up.

Why does your browser show about:blank?

If you are seeing an empty page with about:blank as the address, you are indeed viewing an empty page that is built into Chrome. In fact, this is common in most modern web browsers like Mozilla Firefox, Apple Safari, Microsoft Edge, Internet Explorer and others.

This page is loaded by default when the browser has nothing else to display.

When a user hasn't specified a specific webpage to load when they first open up the browser, the browser itself does not know what to show So it chooses to show a special blank page that is built into it.

The browser always has to display something after all, even if that is blank.

Is about:blank a virus?

In and of itself about:blank is not malware. It is as innocent as it can be.

In general, you don't need to worry about it.

In some very rare cases about:blank can be a symptom of a virus.

It can indicate that your computer has detected something dangerous and is blocking viruses/malware when it comes across with a bad link/URL.

It can also appear after you have removed malware. After such a process, the browser won't know what action to perform.

In any case, if you are concerned that your computer has a virus, it is a good idea to investigate that and perform a scan with an antimalware program of your choice.

What is about:blank?

As mentioned earlier, this is just a page built into your browser.

It's not a webpage, that is a page coming from the Internet. It's nothing more than a blank screen appearing in your browser.

Specifically, it's part of the "about" URI Scheme which is impelemented by a variety of different browsers.

The "about" URI Scheme is part of a naming convention that tells the browser to show its internal, built-in pages.

Besides about:blank, there is a long list of Chrome URLs, including some of the below:

• about:downloads to view Chrome's download list
• about:bookmarks to view your saved bookmarks
• about:accessibility shows accessibility information for each tab opened in the browser
• about:apps to view the apps that come with the Chrome browser and those installed by the user

If you type about:about you'll be able to go through them all:

Benefits of about:blank

This page is a favourite homepage choice for many users. It ensures their browser loads up with a white empty page when it opens for the first time.

It makes for a blazingly fast homepage as it starts the browser really quikcly. The browser doesn't lose time by making a request for a page across the Internet and waiting for the response.

So, this can help reduce your data usage if your internet connection is slow and you have limited badwidth. You are able to save computer and network resources.

A default blank page can also help you stay focused and not get distracted. You can just focus on searching for and visiting the page you want to view.

How to set about:blank as your homepage

If you want to make about:blank your default start page, you'll need to configure your browser's settings.

Go to your settings menu and select "Settings":

(you could have even typed about:settings!)

• In the search bar type "start-up".
• Select "Open a specific page or set of pages".
• Click "Add a new page" and type "about:blank"
• Finally,press "Add"

When you open a new tab you'll see an empty page.

How to stop about:blank from showing

This page is not something you just "get rid off" as it is a feature built into your browser and it'll always be there, under the hood.

If your browser always opens up with a blank page and you don't like it, you can stop that from happening. It's probably set as a default home page and you need to change your settings.

Following the steps mentioned in the previous section, delete "about:blank" from the "Open a specific page or set of pages" option and select your favorite web page. Or you can select "Open the New Tab page" instead.

Conclusion

Overall, about:blank is a safe feature and shouldn't raise any concerns.

And if you don't like seeing it when you open your browser, you can just change it in your settings.

Whatever the reason, bookmarks in Chrome can save you time and hassle. Just bookmark the page, and you can easily come back to it any time.

But what if you want to clean up your bookmarks? After all, you might no longer need that concert tickets website from several years ago. Well, that's easy enough to do, too.

In this article, you'll learn how to find your bookmarks in Chrome, and how to delete them, recover them, and otherwise manage them. Let's get started.

Where are my bookmarks located in Chrome?

First, let's see where to find your bookmarks in the first place. There are a couple spots from which you can access them.

How to Find Bookmarked Pages under the Bookmarks Tab in Chrome

First, there's the "Bookmarks" tab in your Chrome menu bar:

The bookmark tab in Chrome is in the top menu bar.

If you click on that tab, it will bring up a dropdown menu which shows several options, like "Bookmark Manager" and "Bookmark this tab". It also lists any bookmarks or bookmark folders you currently have:

For example, I have a "freeCodeCamp stuff" bookmark folder that contains many of my bookmarked pages and tabs.

If you click on a bookmark folder, it'll expand the list to show you all bookmarks in that folder, like this:

How to display your current bookmarks in a bookmark folder

Any bookmarked pages that you don't have in a folder will simply be listed under the bookmarks tab in Chrome.

How to Find Bookmarked Pages under Settings in Chrome

Your bookmarks are also located under your settings tab, the three vertical dots in the upper right corner of your browser:

How to find your bookmarks in settings.

Just click those three dots and you'll see the right dropdown above. Hover over/click on "Bookmarks" and the left menu will pop out. There you'll see a similar bookmark menu with options like "Show Bookmarks Bar", "Bookmark Manager" and so on.

If you hover over, for example, a bookmark folder (the same folder we discussed above), you'll see all your bookmarks. Then you can just click on the one you want to visit.

Voilà - all your bookmarks.

How to Add a Bookmark in Chrome

There are a few ways to add bookmarks in Chrome.

• You can visit the bookmarks tab in the Chrome menu bar (that we discussed above) and select "Bookmark this Tab". A separate box will pop up with the name you want to give your bookmark (you can change this - just click into that highlighted box). Then click done.

How to add a bookmark in Chrome.

• You can also visit the settings (three vertical dots), click on or hover over the "Bookmarks" tab, and then select "Bookmark this Tab". The same little box will pop up as above.
• A third option is to simply click the little star icon in the address bar. That will bookmark the page you're currently on.

Click that star and it'll add a bookmark for you (after you click "Done").

But if you don't want to use your mouse and make that many clicks, there's another option.

How to Add or Manage Bookmarks in Chrome with Keyboard Shortcuts

Sure enough, you can use keyboard shortcuts to add bookmarks and manage your bookmarks.

To bookmark a tab quickly, just key in Command+D / Ctrl+D (see below) - it'll bring up that same bookmark window as above. Then you can just hit enter if you don't want to update the bookmark's name or any other settings and it'll save it.

And to manage your bookmarks, just key in Option+Command+B / Ctrl+Shift+O (again, see below).

How to add or manage bookmarks with keyboard shortcuts.

But we're getting a little ahead of ourselves. Now let's learn how to manage your bookmarks, and why you might want to do so.

How to Manage your Bookmarks in Chrome

Let's say you have a bunch of old bookmarks you don't need anymore. You may want to remove some of them so you aren't scrolling endlessly through a long (and partly irrelevant) list of bookmarks.

How to Delete a Bookmark in Chrome

Well, it's easy to remove bookmarks you no longer need. Simply navigate to your bookmarks tab (through the Chrome menu bar or Settings - three dots - as we discussed above) and select "Manage Bookmarks".

Or you can use your handy keyboard shortcut (Option+Command+B / Ctrl+Shift+O) to bring up your bookmark manager. This is what you'll see (with your own bookmarks, of course):

How to manage bookmarks in Chrome

If you have a bookmarks folder, like I do, just double-click to expand it and see all your bookmarks. It'll then list them all out like this:

You'll notice three vertical dots to the right of each bookmark. If you click on those, it'll bring up options to manage that bookmark:

Options for managing your bookmarks in Chrome.

You can edit and delete bookmarks, copy the page URL, open the bookmark in a new tab, and more.

If you select "Delete", that bookmark will disappear from your list. Be careful - there's no "Are you sure you want to delete this?" message.

But wait...what if you didn't mean to delete that bookmark you just deleted?

How to Recover a Deleted Bookmark in Chrome

If you've just deleted a bookmark in Chrome and didn't mean to do so, it's ok. Just hit Command+Z / Ctrl+Z (the "undo" function/keyboard shortcut) and it'll bring it back.

But what if you've since closed Chrome or done other things? Command+Z / Ctrl+Z won't work. Fortunately, there's another way – it just requires a few more steps.

How to Recover a Bookmark in Chrome that you Deleted a While Ago on macOS

First, go to Finder. In the window that pops up, find "Macintosh HD" in the left menu bar:

How to recover deleted bookmarks later or the next day.

Double click on the "Users" folder (and then you might have to select the user you want to use). Then double click on the following folders in this order (a new window with an alphabetized list will pop up each time you double-click):

• Library -> Application Support -> Google -> Chrome -> Default

There, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

You're just a couple steps away from getting your deleted bookmarks back:

• Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
• Now, back in Default, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
• Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
• Now you can close finder and Chrome. When you reopen Chrome, your bookmarks should be back!

How to Recover a Bookmark in Chrome that you Deleted a While Ago on Windows

Open a file browser and go to the directory where Google Chrome stores user data. This is usually in C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default.

Or if you use multiple Chrome people / profiles, your data might be in another directory like Profile 1. I'm recovering a bookmark I deleted on my work profile in Chrome, so my "Bookmarks" and "Bookmarks.bak" files are in C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Profile 1.

Also, the AppData directory is hidden by default, and you may need to make hidden files and folders visible first.

To do that, open Windows File Explorer, click on the "View" tab, then click the box for "Hidden items" and make sure that's checked:

In the Default or Profile x directory, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

The "Bookmarks" and "Bookmarks.bak" files on Windows 10

You're just a couple steps away from getting your deleted bookmarks back:

• Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
• Now, back in Default or Profile x, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
• Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
• Now you can close your file browser and Chrome. When you reopen Chrome, your bookmarks should be back!

How to Recover a Bookmark in Chrome that you Deleted a While Ago on Linux

Open a file browser and go to the directory where Google Chrome stores user data. This is usually in /home/<username>/.config/google-chrome/Default/.

Note that .config is a hidden directory, and you may need to make hidden files and folders visible first. Also, the google-chrome directory may be in another location depending on your flavor of Linux and how you installed the browser.

In the Default directory, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

The "Bookmarks" and "Bookmarks.bak" files on Linux Mint

You're just a couple steps away from getting your deleted bookmarks back:

• Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
• Now, back in Default, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
• Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
• Now you can close your file browser and Chrome. When you reopen Chrome, your bookmarks should be back!

And that's it! Now you know how to manage your bookmarks in Chrome on macOS, Windows, and Linux.

Tabs are so common now that, when you click on a link, it's likely it'll open in a new tab.

If you've ever wondered how to do that with your own links, you've come to the right place.

The Anchor Element

To create a link on a web page, you need to wrap an anchor (<a>) element around text, then set its href attribute to the URL you want to link to.

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Check out freeCodeCamp.

If you click on the link above, the browser will open the link in the current window or tab. This is the default behavior in every browser.

To open a link in a new tab, we'll need to look at some of the other attributes of the anchor element's other attributes.

The Target Attribute

This attribute tells the browser how to open the link.

To open a link in a new tab, just set the target attribute to _blank:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Now when someone clicks on the link, it will open up in a new tab, or possibly a new window depending on the person's browser settings.

Security concerns with target="_blank"

I strongly recommend that you always add rel="noreferrer noopener" to the anchor element whenever you use the target attribute:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

This results in the following output:

Check out freeCodeCamp.

The rel attribute sets the relationship between your page and the linked URL. Setting it to noopener noreferrer is to prevent a type of phishing known as tabnabbing.

What is tabnabbing?

Tabnabbing, sometimes called reverse tabnabbing, is an exploit that uses the browser's default behavior with target="_blank" to gain partial access to your page through the window.object API.

With tabnabbing, a page that you link to could cause your page to redirect to a fake login page. This would be hard for most users to notice because the focus would be on the tab that just opened – not the original tab with your page.

Then when a person switches back to the tab with your page, they would see the fake login page instead and might enter their login details.

If you're interested in learning more about how tabnabbing works and what bad actors can do with the exploit, check out Alex Yumashev's article and this one by OWASP.

If you'd like to see a safe working example, check out this page and its GitHub repo for more information about the exploit and the rel attribute.

In summary

It's easy to use HTML to open a link in a new tab. You just need an anchor (<a>) element with three important attributes:

1. The href attribute set to the URL of the page you want to link to,
2. The target attribute set to _blank, which tells the browser to open the link in a new tab/window, depending on the browser's settings, and
3. The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to.

Again, here's a full working example:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Which results in the following output in the browser:

Check out freeCodeCamp.

Thanks again for reading. Happy coding.

So what's the easiest way to reopen those closed tabs and get back to browsing?

In this article, you'll learn how to reopen closed tabs in Chrome, Safari, and Firefox so you don't ever have to panic if you close something by accident.

How to reopen tabs in Chrome

The keyboard shortcut

There are a couple ways to reopen tabs in Chrome. If you're into keyboard shortcuts, the easiest way is to simply hit Command+Shift+T (on Mac) or Ctrl+Shift+T (on Windows).

If you hit that combo once, it'll bring up the last tab you closed. Hit it again, and it'll bring up the one before that. And so on.

The menu options way

If you're a bigger fan of right-clicking, just right click on the tab menu bar area, and select "Reopen Closed Tab":

How to reopen closed tabs in Chrome.

If you do that again, it'll open the tab you closed before that, and so on.

How to review your browser history in Chrome

What if you can't remember exactly when you opened that tab you're looking for? Or you can't remember exactly what the site was called?

In that case, you might just want to check out your browsing history – the list of the last x number of sites you've visited/tabs you closed over the past days or weeks.

To do this, open your Chrome browser and click on the three little dots or green arrow in the upper right corner.

Click on "History" to see your recently closed tabs.

That'll bring up the menu you see in the image above. The fourth option is "History" – hover or click on that and another menu will open to the left. This will list the tabs you've recently closed (the last 8-10 or so).

If you want to see your whole browsing history, you can click on the history tab at the top of the leftmost menu that popped up, like below:

Click on that second "History" tab to see your whole history.

And that will open up your browsing history, which will look something like this:

Your browser history - scroll down to see more.

You can see the scroll bar on the right - if you scroll down, it'll just keep loading more history. This lets you see where you've been on the internet.

Want to visit one of those sites? Just click on it and the browser will take you there (in the same window).

And that's it!

How to reopen tabs in Safari

Similarly, in Safari there are a couple ways to reopen tabs you've closed.

The keyboard shortcut

The same keyboard shortcut we talked about for Chrome, above, works in Safari as well.

Just hit Command+Shift+T (Mac) or Ctrl+Shift+T (Windows) to open those tabs back up. Remember, you can do this multiple times to keep getting more closed tabs, in the order you closed them (from most-least recent).

The menu options way

Again, if you prefer using your mouse and menu bar, here's how it works in Safari:

In the menu bar at the top of your screen (where it has options like "Safari, File, Edit, View, History" and so on), select "History":

How to view your recently closed tabs in Safari.

This will bring up a few options, as you can see above. I've hovered over "Recently Closed" (the first option) and it shows me my two recently closed tabs. If you use Safari as your browser you will likely see more tabs.

If you see the tab you just closed that you want to open back up, just click on it and it will open in a new tab/window.

You also have the option to "Reopen Last Closed Tab" (which also lists the keyboard shortcut next to it) and "Restore All Windows from Last Session".

How to review your browser history in Safari

If you want to review your whole browser history, just click on that first option under the "History" menu (that says "Show All History", see image above), and your entire history will appear:

Again, if you use Safari for your regular browser, your history will likely be longer :)

If you want to visit one of those sites directly, just double click on the listed URL and it'll take you there in that same window.

How to reopen tabs in Firefox

If you're a Firefox user, the process is fairly similar to what we discussed above.

The keyboard shortcut

You can open your recently closed tab(s) in Firefox the same way as in Chrome or Safari – with the Command+Shift+t (Mac) or Ctrl+Shift+t (Windows) keyboard shortcut. Easy peasy.

And if you hit those keys again and again, it'll keep opening the tabs you closed in order from most recently closed to least recently closed.

The menu options way

To open your recently closed tabs in Firefox via menu options, just find the icon in the upper right corner that looks like books on a shelf:

Step 1 - find the "History" tab.

When you click that, you'll get a dropdown menu that will have a "History" tab. Click on that, as highlighted in the image above.

This will bring up a new menu which will have a "Recently Closed Tabs" option, like you can see below:

Step 2 - find your recently closed tabs in Firefox.

If you click on that, another menu will open with all your recently closed tabs listed.

If you click on one of those tabs shown, Firefox will take you to that tab in a new window.

How to view your browser history in Firefox

Of course if you want to see all the browsing you've done, not just tabs you've recently closed, you can view your whole browser history.

Under that same little books-on-a-shelf looking icon in the upper right, again click on the "History" option. Then you'll see your recent history, as well as an option to see all history:

How to see recent history or show all history in Firefox.

If you need more than just your recent history (shown there in the dropdown menu) you can click on "Show All History" at the bottom and it'll open up a separate window like this:

How to see all your history on Firefox.

If you want to visit any of those pages, just double click on the URL/line and Firefox will take you there in the same window.

That's it!

Now you can confidently reopen tabs in your browser so you don't lose track of what you were working on or learning.

With just a couple of clicks, Live Server lets you see your page live in an actual browser. Better yet, it features live reloading, so if you update your code, the changes are also reflected in the browser.

All you have to do is right click in the HTML file you want to view, right click, then select "Open with Live Server":

Live Server in action

But what if Live Server doesn't open your browser and show your page like you expect? If this is happening to you, here are a few things you can try.

Restart VSCode

Sometimes the best you can do is start VSCode from scratch.

First, save all of your work. Then close VSCode, which will also stop all of the extensions you've installed.

Then, reopen VSCode and try again – go to the HTML file you want to view, right click, and select "Open with Live Server".

Set the browser for Live Server

It's possible that the extension is working, but your system doesn't have a default browser.

Even if you did set the default browser for your system, it wouldn't hurt to let Live Server know which browser you'd like to use explicitly.

First, open the Command Pallete with F1, then type in Preferences: Open Settings (JSON) and select that option.

This will open your VSCode settings.json file.

Scroll all the way to the bottom of the file, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome":

Note that you can also use "firefox", "safari", or any other browser as the value for the "liveServer.settings.CustomBrowser" setting.

Finally, save the settings.json file and try to run Live Server again.

Set the default browser for your operating system

Even after telling Live Server which browser you want to use, it's possible that it's still not opening your page in that browser correctly.

The next thing to try is to set the default browser for your operating system itself.

The exact method for doing this can vary based on your operating system, so it's best to search for how to do this if you aren't sure.

Here's what the settings page looks like in Windows:

Credit: Advitya-sharma

Go to the live page yourself

If for some reason Live Server still isn't opening the page in your browser automatically, no worries. You can always open the browser of your choice and view the page directly.

Just open your preferred browser and go to http://127.0.0.1:5500/<your_file_name>.

For example, if your file is called index.html, just go to http://127.0.0.1:5500/index.html.

As long as Live Server is running, you should see your page.

In closing

Those are a few common fixes you can try if Live Server isn't working the way you expect.

Stay safe, and happy (live) coding.

Don't worry – it happens sometimes, and it isn't anything bad. In this article, you'll learn:

• what about:blank means
• what causes it to appear
• why you might want to use it
• whether you can get rid of it, and
• whether you need to worry about it

So let's dive in.

What is about:blank?

About:blank is a page that appears when your browser has nothing else to display. It's not a page on the internet, but rather something internally inside your browser.

The "about" part of what you see comes from your browser's about URI or URL scheme. You can type "about:[whatever]" in the address bar to learn more information about your browser.

This works in most major browsers like Chrome, Firefox, Safari, Edge, Chromium, Internet Explorer, and so on.

For example, in Chrome you can type "about:dino" (which Chrome changes to chrome://dino) and you'll get Chrome's infamous "No Internet" dino message:

Wait, but why?

If you've never played the no-internet dinosaur game, learn how here (and be prepared to waste hours of your life). But that's neither here nor there.

More usefully, for example, "about:about" displays a list of Chrome URLs:

So many URLs (and there were more. Screenshots can only be so big.)

Now back to the ":blank" part of about:blank. It just tells your browser to throw up that blank page when it doesn't have something else to display.

So it literally just shows you a plain white page with nothing on it:

They named it well.

Now again, this isn't some location on the interwebs - it's a blank page your browser keeps on hand for just such a purpose.

What causes about:blank?

So why does this blank page sometimes appear? Some of the main reasons are:

• If you've come across a bad link/URL
• If the browser doesn't know where to go or what to do, it has to do something – so it shows you about:blank
• If your browser detects something dangerous (like malware), certain browsers will display about:blank instead of proceeding into dangerous territory.

So as you can see, about:blank in and of itself isn't really anything to worry about. But if you're seeing it a lot, you might want to check your computer for malware. More on that below.

Uses for about:blank

Now you might be wondering – why would I want this blank page to appear on purpose? Seems pretty useless.

Not so fast.

If you have limited bandwidth/a slow internet connection, you can set your browser's homepage to be about:blank. This way, whenever you open your browser or a new tab, it'll load super quickly without wasting a single resource or millisecond.

How to set about:blank as your homepage

In Chrome, open the menu (those three little vertical dots in the upper right corner of the browser) and scroll down to the "On Startup" section (likely at the bottom):

Then select "Open a specific page or set of pages" (the third option) and type in "about:blank" to the text field that appears.

Then when you open your browser or a new tab, you should see a blank white page.

Other uses for about:blank

You might also want to make sure that, when you open up your browser, no tabs or anything from your previous browsing session were preserved.

This is helpful from a privacy perspective, and also allows you to start a browsing session without internet, which uses less bandwidth.

Can you get rid of about:blank?

About:blank isn't really something you "get rid of" or avoid. But if you're seeing it every time you open your browser, it could be that it's set to display about:blank upon launch.

If you don't want that to happen, simply go in and change your homepage to whatever you want it to be (following the same steps as above).

Is about:blank malware or a virus?

As we've seen throughout this article, about:blank itself isn't anything malicious. But it could be a sign that your computer is blocking malware. So they can be related.

Some anti-virus and anti-malware software use about:blank when they detect a bad URL or site. So instead of directing you to that malicious site, the browser throws up that blank page to protect you.

The about:blank page can also appear after you've removed malware from your system. If, in the process of removal, something broke, the browser will display about:blank because it can't complete the action you asked it to perform.

In the end, unless you want to set about:blank as your homepage or think you need to investigate possible malware or viruses on your machine, you don't need to worry about about:blank.

In this article we will tell you some of the coolest tricks, to debug using the native debug-tools of the browsers.

A brief insight into the FreeCodeCamp Code Editor:

Before jumping into debugging lets leak out some secret facts about that awesome code checking engine at FCC.

We use a customized CodeMirror, as the code editor. A eval() function is used to evaluate the JavaScript code represented as a string from the editor. When eval() is called, browsers will natively execute your code. We will learn more why this secret is important in later sections of this article.

Now moving on to the tricks:

Google Chrome DevTools

Google Chrome is one of the most popular browsers with a built-in JavaScript engine called V8, and offers a great toolset for developers called Chrome DevTools. Visiting their Complete JavaScript debugging guide is highly recommended.

1 : Basics of DevTools

Launching the Chrome DevTools

Hit F12

. Alternatively you can press

Ctrl + Shift + I

on Windows and Linux or

Cmd + Shift + I

on Mac, or If you just love your mouse go to Menu > More Tools > Developer Tools.

Getting to know the Sources and the console tabs.

These two tabs are the perhaps going to be your best friends while debugging. The Sources tab can be used to visualize all the scripts that’s on the webpage you are visiting. This tab has sections for the code window, file tree, call stack & watch windows, etc.

The console tab is where all of the log output goes. Additionally you can use the console tab’s prompt to execute JavaScript code. Its kind of synonymous to the command prompt on Windows, or terminal on Linux.

Tip : Toggle the console anytime in the DevTools using Esc key.

2 : Common Shortcuts and features

While you can visit the complete list of shortcuts, below are a few that are most used:

Feature Windows, Linux Mac
Search for a keyword, regex is supported. Ctrl+F``Cmd+F
Search and Open a file Ctrl+P``Cmd+P
Jump to line Ctrl+G+:line_no``Cmd+G+:line_no
Add a breakpoint Ctrl+B, or click on the line no.Cmd+B, or click on the line no.
Pause / resume script execution F8 F8
Step over next function call F10 F10
Step into next function call F11 F11

3 : Using a Source Map for our Code

One of the coolest feature that you will love is debugging Dynamic Script, on the fly, via Source Maps.

Every script can be visualized in the Source tab of the DevTools. The source tab has all the JavaScript source files. But the code from the code editor is executed via eval()in a container simply called a virtual machine(VM) within the browser process.

As you might have guessed by now is that our code is actually a script that doesn’t have a file name. So we don’t see that in the Source tab.

Here comes the hack!

We must leverage Source Maps to assign a name to the JavaScript from our editor. Its pretty simple:

Lets say we are on the Factorialize challenge, and our code looks like this:

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);

All we need to do is add //# sourceURL=factorialize.js to the top of the code, i.e the first line:

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...

And Eureka that’s it!

Now open up the DevTools and search for the file name. Add break points, Debug away and enjoy!

More info on debugging:

• Beginner's guide to bug squashing
• Debugging tips and tricks for beginners
• How to get the most out of your browser's debugging console

There are two main possibilities for browser storage: localStorage and sessionStorage.

localStorage

Any content/data saved to the localStorage object will be available after the browser has been restarted (closed and opened again). In order to save an item to localStorage, you can use the method setItem(). This method must be handed a key and a value.

Example: localStorage.setItem("mykey","myvalue");

To retrieve the item from the localStorage, the method getItem must be used. The getItem method must be handed the key of the data you would like to retrieve:

  Example: localStorage.getItem("mykey");

You can remove an item from localStorage by using the removeItem() method. This method must be handed the key of the item to be removed:

  Example: localStorage.removeItem("mykey");

To clear the entire localStorage, you should use the clear() method on the localStorage object:

  Example: localStorage.clear();

sessionStorage

Items saved in the sessionStorage object will remain until the browser is closed by the user. Then, the storage will be cleared.

You can save an item to sessionStorage, please use the method setItem() on the sessionStorage object:

Example: sessionStorage.setItem("mykey","myvalue");

To retrieve the item from the sessionStorage, the method getItem must be used. The getItem method must be handed the key of the data you would like to retrieve:

  Example: sessionStorage.getItem("mykey");

You can remove an item from sessionStorage by using the removeItem() method. This method must be handed the key of the item to be removed:

  Example: sessionStorage.removeItem("mykey");

To clear the entire sessionStorage, you should use the clear() method on the sessionStorage object:

  Example: sessionStorage.clear();

Saving arrays to localStorage and sessionStorage

You cannot just save single values to the localStorage and sessionStorage, but you can also save the content of an array.

In this example, we have an array with numbers:

var ourArray =[1,2,3,4,5];

We can now save it to localStorage or sessionStorage using the setItem() method:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

or, for sessionStorage:

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

In order to be saved, the array must first be converted to a string. In the example shown above, we are using the JSON.stringify method to accomplish this.

When retrieving our data from the localStorage or sessionStorage, convert it back to an array:

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

or, for sessionStorage:

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);