Blocco delle richieste di rete
Imparate a definire regole per bloccare richieste di rete indesiderate, come annunci pubblicitari o script di tracciamento, usando `declarativeNetRequest`.
Blocco delle richieste di rete è una lezione Browser Extensions Development (Chrome & Edge) gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Browser Extensions Development (Chrome & Edge), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Intro to Blocking Requests
Welcome to modifying web requests! This lesson introduces declarativeNetRequest, a powerful API for controlling network requests in your browser extension.
You'll learn how to define rules to block unwanted content like ads, tracking scripts, or specific resources, making web browsing cleaner and faster.
Why Block Network Requests?
Blocking network requests isn't just about privacy; it's also about performance and user experience.
- Remove Ads: Block requests to ad servers.
- Stop Trackers: Prevent tracking scripts from loading.
- Improve Performance: Less data downloaded means faster page loads.
- Enhance Security: Block malicious domains or content.
Declarative vs. Imperative
Traditional ad blockers often use imperative logic: JavaScript code that runs on every page to detect and block elements.
declarativeNetRequest is declarative. You define rules, and the browser handles the blocking efficiently, often without waking up your extension's JavaScript. This is faster and more resource-friendly!
Manifest Permission for Blocking
To use declarativeNetRequest, your extension needs to declare the permission in its manifest.json file.
This tells the browser your extension intends to modify network requests.
{
"manifest_version": 3,
"name": "My Blocker",
"version": "1.0",
"permissions": [
"declarativeNetRequest"
]
}Structure of a Blocking Rule
A blocking rule is an object with an id, an action, and a condition. The browser checks these conditions against every network request.
id: A unique number for the rule.action: What to do (e.g., 'block', 'redirect').condition: When to apply the action (e.g., 'urlFilter', 'resourceTypes').
The 'Block' Action Type
For this lesson, we'll focus on the "block" action. When a request matches a rule with this action, the browser simply prevents that request from completing.
The action part of your rule will look like this:
{
"action": {
"type": "block"
}
}Conditions: `urlFilter`
The urlFilter property in a rule's condition allows you to specify a pattern for URLs to match. It's like a mini-regex.
"*://*.example.com/*"matches any subdomain of example.com."*://ads.google.com/*"specifically targets Google ads."*track*"matches URLs containing 'track'.
Conditions: `resourceTypes`
You can also specify which types of resources to block using resourceTypes. This helps you target specific content like images, scripts, or fonts.
Common types include "script", "image", "stylesheet", "media", and "font".
Adding Dynamic Blocking Rules
Rules can be added dynamically by your extension using chrome.declarativeNetRequest.updateDynamicRules(). This is often done in your background script.
This example adds a rule to block requests containing "adserver" in their URL, specifically for scripts and images.
console.log("Background script running.");
const BLOCK_RULE_ID = 1;
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [BLOCK_RULE_ID], // Remove if already exists
addRules: [{
id: BLOCK_RULE_ID,
priority: 1,
action: { type: "block" },
condition: {
urlFilter: "*://*adserver*/*",
resourceTypes: ["script", "image"]
}
}]
}, () => {
if (chrome.runtime.lastError) {
console.error("Error updating rules: ", chrome.runtime.lastError);
} else {
console.log("Blocking rule added!");
}
});
});
// To test, visit a page with 'adserver' in script/image URLs.Quick Check: Rule Matching
Consider the following blocking rule:
{
"id": 2,
"priority": 1,
"action": { "type": "block" },
"condition": {
"urlFilter": "*://*.tracker.com/*",
"resourceTypes": ["script", "image"]
}
}Which of these requests would be blocked?
Recap: Blocking Requests
Great job! You've learned the basics of blocking network requests with declarativeNetRequest.
- It's a powerful, performant, and privacy-friendly API.
- Rules consist of an
id,action(e.g.,"block"), andcondition. urlFilterandresourceTypesare key for defining conditions.- Dynamic rules can be added and managed using
updateDynamicRules().
Next, you'll explore modifying headers!
Domande Frequenti
La lezione «Blocco delle richieste di rete» è gratuita?
Sì — il testo completo di «Blocco delle richieste di rete» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Browser Extensions Development (Chrome & Edge), passa a CoddyKit PRO. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Cosa imparerò in «Blocco delle richieste di rete»?
Imparate a definire regole per bloccare richieste di rete indesiderate, come annunci pubblicitari o script di tracciamento, usando `declarativeNetRequest`. Eserciti Browser Extensions Development (Chrome & Edge) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Browser Extensions Development (Chrome & Edge)?
Non è richiesta alcuna esperienza precedente. Browser Extensions Development (Chrome & Edge) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Blocco delle richieste di rete»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Browser Extensions Development (Chrome & Edge)?
Sì. Ogni lezione Browser Extensions Development (Chrome & Edge) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Blocco delle richieste di rete
- Modifica delle intestazioni delle richieste
- Reindirizzamento e riscrittura degli URL
- Regole dinamiche e debugging di declarativeNetRequest