0Pricing
Browser Extensions Development (Chrome & Edge) · Lesson

Blocking Network Requests

Learn to define rules for blocking unwanted network requests, such as ads or tracking scripts, using `declarativeNetRequest`.

Blocking Network Requests is a free Browser Extensions Development (Chrome & Edge) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Browser Extensions Development (Chrome & Edge) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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"), and condition.
  • urlFilter and resourceTypes are key for defining conditions.
  • Dynamic rules can be added and managed using updateDynamicRules().

Next, you'll explore modifying headers!

Frequently asked questions

Is the “Blocking Network Requests” lesson free?

Yes — the full text of “Blocking Network Requests” is free to read here on the web, and the Browser Extensions Development (Chrome & Edge) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Browser Extensions Development (Chrome & Edge) course, upgrade to CoddyKit PRO.

What will I learn in “Blocking Network Requests”?

Learn to define rules for blocking unwanted network requests, such as ads or tracking scripts, using `declarativeNetRequest`. You practise Browser Extensions Development (Chrome & Edge) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Browser Extensions Development (Chrome & Edge)?

No prior experience is required. Browser Extensions Development (Chrome & Edge) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Blocking Network Requests” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Browser Extensions Development (Chrome & Edge) lesson?

Yes. Every Browser Extensions Development (Chrome & Edge) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Blocking Network Requests
  2. Modifying Request Headers
  3. Redirecting & Rewriting URLs
  4. Dynamic Rules & Debugging declarativeNetRequest
← Back to Browser Extensions Development (Chrome & Edge)