开源项目 Adblocker 使用教程

开源项目 Adblocker 使用教程

adblockerEfficient embeddable adblocker library项目地址:https://gitcode.com/gh_mirrors/ad/adblocker

1. 项目的目录结构及介绍

adblocker/
├── docs/
├── packages/
│   ├── adblocker-benchmarks/
│   ├── adblocker-circumvention/
│   ├── adblocker-content/
│   ├── adblocker-core/
│   ├── adblocker-webextension-example/
│   ├── adblocker-webextension/
│   └── adblocker/
├── scripts/
├── tests/
├── .gitignore
├── .npmrc
├── .prettierrc
├── .travis.yml
├── lerna.json
├── package.json
└── README.md

• docs/: 包含项目的文档文件。
• packages/: 包含项目的各个子模块，如核心库、浏览器扩展等。
  • adblocker-core/: 核心库，提供广告拦截的基本功能。
  • adblocker-webextension/: 浏览器扩展的实现。
• scripts/: 包含项目的脚本文件，用于构建、测试等。
• tests/: 包含项目的测试文件。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• .prettierrc: Prettier 代码格式化配置。
• .travis.yml: Travis CI 配置文件。
• lerna.json: Lerna 多包管理配置。
• package.json: 项目的主配置文件。
• README.md: 项目的主说明文件。

2. 项目的启动文件介绍

在 packages/adblocker-webextension/ 目录下，主要的启动文件是 background.ts，它是浏览器扩展的后台脚本，负责初始化和运行广告拦截功能。

// packages/adblocker-webextension/src/background.ts
import { FilterEngine } from '@cliqz/adblocker';
import fetch from 'cross-fetch';

const engine = FilterEngine.fromPrebuiltAdsAndTracking(fetch);

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    const { requestId } = details;
    const { redirect, match } = engine.handleRequest(details);
    if (match) {
      return { redirectUrl: redirect };
    }
  },
  { urls: ['<all_urls>'], types: ['script', 'xmlhttprequest'] },
  ['blocking']
);

3. 项目的配置文件介绍

主要的配置文件是 package.json，它包含了项目的依赖、脚本命令等信息。

{
  "name": "@cliqz/adblocker",
  "version": "1.22.7",
  "description": "Efficient embeddable adblocker library",
  "main": "dist/cjs/adblocker.js",
  "module": "dist/es6/adblocker.js",
  "types": "dist/types/adblocker.d.ts",
  "scripts": {
    "build": "lerna run build",
    "test": "lerna run test",
    "lint": "lerna run lint"
  },
  "dependencies": {
    "@cliqz/adblocker-content": "^1.22.7",
    "@cliqz/adblocker-core": "^1.22.7",
    "@cliqz/adblocker-webextension": "^1.22.7"
  },
  "devDependencies": {
    "typescript": "^4.1.3"
  }
}

• name: 项目的名称。
• version: 项目的版本。
• description: 项目的描述。
• main: 主入口文件。
• module: ES 模块入口文件。
• types: TypeScript 类型定义文件。
• scripts: 包含各种脚本命令，如构建、测试、代码检查等。
• dependencies: 项目的依赖包。
• devDependencies: 开发环境的依赖包。

adblockerEfficient embeddable adblocker library项目地址:https://gitcode.com/gh_mirrors/ad/adblocker