In Reply to Tracy's Information parasites - A Possible Way to Annoy Arc Browser Users

Posted in reply to Tracy (Information parasites)

Tracy, you asked if somebody find a way to prevent Arc browser from accessing the site, to tell you.

I did not find a good way to do it, as it does not look like it have a specific enough user agent. But there is a way to maybe minimise the damage or maybe to convince the people to browser with some other browser. Because if the browsing the site it unusable, then people with this browser will not go there.

I did not test it, because the Arc browser actually requires the account in order to use it. And I am not making it for testing purposes.

The one thing one could use is the custom CSS variables, that the browsers use. In the case of Arc, it had the --arc-palette-title is one such custom CSS variable. Make sure it is not something specific to the site, but specific to the browser.

CSS Way

I decided to go the CSS way. What I did was add the element to every page, that shows the message about the AI scraping and the browser usage. I added the class browser-warning to it, which I will use later. One can put any kind of message there.

<div class="browser-warning"><p>I don't like having my website scraped for the purpose of AI training. If you would like to continue browsing my site, then I would like to ask you to change your browser to something more privacy respecting, like <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a></p></div>

Then what I did is hide this message by default.

.browser-warning {
    display: none;
}

Then below this I check for the existence of the variable. If the browser supports the @supports (most browsers support it for almost a decade), and have the variable defined, then show the message. I made the message in a way, that it takes half of the screen regardless of the scrolling and user actions.

@supports (var(--arc-palette-title)) {
    .browser-warning {
        width: 100%;
        height: 50%;
        align-items: center;
        justify-content: center;
        background: yellow;
        color: black;
        font-weight: 900;
        display: flex;
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 2em;
    }

    .browser-warning a {
        color: black;
    }
}

If one only wanted to show something, then something like this would be enough:

@supports (var(--arc-palette-title)) {
    .browser-warning {
        display: block;
    }
}

The drawback of this is, that this message will show at the end of every page for any browser not using the CSS. While there are not that popular, they do exist and I occasionally use one of them. I guess it a anti-user usage, that I am willing to do.

I decided to display the message. But a person could do anything with this. Maybe create an animation of the Tardis, that would fly across the screen, or the picture of the favourite meme.

JavaScript Way

Since there is a custom CSS browser variable, it is also possible to use it in the JavaScript. Based on some searching, it seems that these variables are only present after the page is loaded.

Still, it is possible to wait for the page to finish loading and then to delete the entire page, if the variable is present in the user browser. Which should only be if they are using Arc browser. This is the example of the JavaScript code that does this.

window.addEventListener("load", (event) => {
  if (getComputedStyle(document.documentElement).getPropertyValue('--arc-palette-title')) {
    document.documentElement.innerHTML = ''
  } 
});

What the code does is, that when the load event is sent, some code is executed. The load event is sent once every resource on the page - like HTML, images, JavaScript and so on, have been loaded. Then what the executed code does is, that it checks, if the document has the --arc-palette-title. And if yes, then the HTML inside the main document - usually the html tags, get replaced with nothing.

Some other options would also be redirecting to a different page or any other thing that is possible to do with the JavaScript.

This method would not work for people, that are blocking JavaScript execution - which includes all the text-only browsers, but also people blocking the JavaScript with the extensions.

This methods could be used with almost any browser or any other factor, one could detect through CSS or JavaScript. If one would want to give users of different browsers different experience, one can do this. For example, James' Firefox message uses the user agent, that he accesses from the JavaScript.

Then again, the browser user agents are quite a mess right now precisely because the webmasters have served the different versions of the page to different browser and browser did not like that. I wonder if tactics like this will become popular enough for the browsers to strike back again? :)