There is an extension for delaying requests. The problem is that it doesn’t work with parallel requests. That is, if we set a mask for a domain, then we must wait until the files of images, styles, scripts, etc. are loaded one by one. There are 2 main files in the extension:
background.js
const delay = (ms) => {
const startPoint = new Date().getTime()
while (new Date().getTime() - startPoint <= ms) {/* wait */}
}
let handler;
chrome.storage.onChanged.addListener(function(changes, namespace) {
if (changes.hasOwnProperty('requestThrottler')) {
const throttlerConfig = changes.requestThrottler.newValue;
if (handler) {
chrome.webRequest.onBeforeRequest.removeListener(handler);
handler = null;
}
const urls = throttlerConfig.urls.filter((u) => !u.error && u.url !== '').map((u) => u.url.trim());
if (throttlerConfig.enabled && urls.length > 0) {
chrome.browserAction.setIcon({path: 'icon48-warning.png'});
handler = (info) => {
console.log(`URL Throttler: Intercepted ${info.url}, going to wait ${throttlerConfig.delay} ms...`);
delay(throttlerConfig.delay);
console.log('URL Throttler: Done');
return;
};
console.log('Blocking urls', urls);
chrome.webRequest.onBeforeRequest.addListener(
handler,
// filters
{
urls: urls,
},
// extraInfoSpec
["blocking"]
);
} else {
chrome.browserAction.setIcon({path: 'icon48.png'});
}
}
});
popup.js
const defaultURL = {
url: '',
error: false,
};
const urlRegex = /^(https?|*)://.*/.*$/;
chrome.storage.local.get(['requestThrottler'], (result) => {
const data = Object.assign(
{}, {
enabled: false,
urls: [{ ...defaultURL }],
delay: 5000,
},
result.requestThrottler
);
var app = new Vue({
el: '#app',
data: data,
methods: {
addUrlInput: function() {
this.urls = this.urls.concat({ ...defaultURL });
},
removeUrlInput: function(index) {
this.urls.splice(index, 1);
},
updateStorage: _.debounce(function() {
this.urls = this.urls.map((u) => {
return {
...u,
error: !urlRegex.test(u.url),
};
});
chrome.storage.local.set({requestThrottler: {
enabled: this.enabled,
urls: this.urls,
delay: this.delay,
}});
}, 700),
},
updated: function() {
this.updateStorage();
}
});
});
My question is how to remake the script so that requests are processed in parallel?
ChatGPT cannot write an exact solution, although it gives seemingly working advice:
The problem is that the handler that is registered via chrome.webRequest.onBeforeRequest.addListener is executed synchronously for each request.
This means that when parallel requests are received to two different URLs from the list, the handler blocks the execution of the first request for delay, then unblocks and blocks the second request also for delay.
In order for requests to be processed in parallel, you need to move the delay logic into a separate asynchronous function.
But for some reason he can’t write a working function…
