Recommend Firefox (with a Web Component)

I don't recommend many products, but I do recommend Firefox for web browsing. It is fast, reliable, and its code helps us fight against a monopoly in browser engines, an expensive-to-develop piece of technology that powers a web browser.

I was exploring the blogosphere [^1] (in Chrome, I write with a slight frown on my face) and came across a blog with a red banner, reading:

Google is actively hurting the open web with its browser chromium, read more here. Consider switching to a better browser, such as Firefox.

This got me thinking: "how could I do something like this?"

I have happily used Firefox for years, preferring the browser over Chrome. I support the hard work that Mozilla does to help promote an open web ecosystem, from their participation in advancing open standards to maintaining a browser engine that helps us avoid a monopoly of Chromium. Chromium is a browser engine maintained by Google and is used as a foundation many Chrome alternatives like Arc and Edge.

I decided to create a web component to help me promote Firefox on my site. A web component is shareable HTML that you can add to your website.

Create a new JavaScript file on your website and add the following code:

class RecommendFirefox extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });

        this.options = [
            "
For a more privacy-focused browsing experience, I recommend Firefox.
",
            "
Support browser diversity. Install Firefox.
",
        ]
    }

    connectedCallback() {
        if (navigator.userAgent.indexOf("Chrome") === -1) {
            return;
        }
        var message = this.getAttribute("data-message") || this.options[Math.floor(Math.random() * this.options.length)];
        this.shadowRoot.innerHTML = message;
    }
}

customElements.define("recommend-firefox", RecommendFirefox);

Above, replace this.options with your own list of options. I wrote a few focused on two aspects that I like most about Firefox: the fact that their work helps us maintain a diversity of browser engines, and the privacy considerations in the browser compared to alternatives. There are many other points I could add, too -- speed, good user experience -- but I need to think more about what words I want to use.

Then, add the script onto your web page:

<script src="/firefox.js"></script>

Finally, add the component where you want it:

<recommend-firefox></recommend-firefox>

A message now appears in my site footer that is a random choice from the options in the code above.

Firefox, keep doing what you are doing. You make the web a better place.

The code in this article is licensed under a Creative Commons Zero license.

[^1]: Should we bring the word "blogosphere" back? What is the word for someone who pioneers the reintroduction of an older word?