Pass runAt="document_start" to tabs.insertCSS

[mjethani]

Background

tabs.insertCSS injects the code into the page on document_idle by ​default, when the document and all its resources have been loaded. In many cases this can be too late. This delay is technically unnecessary and leads to a bad user experience.

The API takes a runAt parameter, which can be set to document_start to inject the code at the earliest.

Thanks to Raymond Hill for ​reporting this.

What to change

Pass the runAt parameter to tabs.insertCSS with the value set to document_start.

[mjethani]

Here's how to test this.

First, save this JavaScript code to a file called generate.js:

// generate.js
for (let i = 0; i < 1000000; i++)
{
  console.log("window.a" + Math.floor((Math.random() * 1000000)) +
              " = " + Math.random());
}

Then run it with Node.js like so:

node generate.js > test.js

This should generate a ~34 MB JavaScript source file called test.js.

Create an HTML file called test.html with the following contents:

<h1>ANNOYING AD!!!<h1>
<script src="test.js"></script>

Upload test.html and test.js to a web server. Add the filter ##h1. Finally, access the page test.html in the browser over HTTP(S).

The text "ANNOYING AD!!!" should be hidden as soon as the page starts loading.

[abpbot]

A commit referencing this issue has landed:
​Issue 5616 - Pass runAt=document_start to tabs.insertCSS

[Ross]

Done. Heading is hidden as page starts loading as described.

1.13.3.1838
Chrome 49 / 61 / Windows 7
Opera 36 / 47 / Windows 7

ABP 2.99.0.1838beta
Firefox 50 / 55 / Windows 7