拦截网络请求
学习使用 `declarativeNetRequest` 定义规则，拦截广告或跟踪脚本等不需要的网络请求
拦截网络请求 是 CoddyKit 上的免费 Browser Extensions Development (Chrome & Edge) 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Browser Extensions Development (Chrome & Edge) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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!
用 AI 导师学习 JavaScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 12
- 课程
- 48
常见问题解答
「拦截网络请求」课时是免费的吗？
是的 — 「拦截网络请求」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Browser Extensions Development (Chrome & Edge) 课程的其余内容，请升级到 CoddyKit PRO。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。
「拦截网络请求」这节课中我会学到什么？
学习使用 `declarativeNetRequest` 定义规则，拦截广告或跟踪脚本等不需要的网络请求 你通过在浏览器中直接运行的动手代码来练习 Browser Extensions Development (Chrome & Edge)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Browser Extensions Development (Chrome & Edge) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Browser Extensions Development (Chrome & Edge) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「拦截网络请求」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Browser Extensions Development (Chrome & Edge) 课中编写并运行代码吗？
能。每节 Browser Extensions Development (Chrome & Edge) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。