VideoAdBlockForTwitch 项目使用教程

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

VideoAdBlockForTwitch 项目的目录结构如下：

VideoAdBlockForTwitch/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── popup/
│   ├── popup.html
│   └── popup.js
├── background.js
├── block_rules.json
├── content.js
├── manifest.json
├── README.md
└── remove_video_ads.js

目录介绍

• icons/: 存放扩展图标的目录。
  • icon16.png, icon48.png, icon128.png: 不同尺寸的扩展图标。
• popup/: 存放弹出窗口的 HTML 和 JavaScript 文件。
  • popup.html: 弹出窗口的 HTML 文件。
  • popup.js: 弹出窗口的 JavaScript 文件。
• background.js: 后台脚本文件，处理扩展的主要逻辑。
• block_rules.json: 内容过滤规则的配置文件。
• content.js: 内容脚本文件，注入到网页中执行。
• manifest.json: 扩展的清单文件，包含扩展的配置信息。
• README.md: 项目的说明文档。
• remove_video_ads.js: 处理视频内容的脚本文件。

2. 项目的启动文件介绍

manifest.json

manifest.json 是扩展的清单文件，包含了扩展的基本信息和配置。以下是该文件的主要内容：

{
  "manifest_version": 2,
  "name": "VideoAdBlockForTwitch",
  "version": "1.0",
  "description": "Swaps video ads for an ad-free stream",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://*.twitch.tv/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://*.twitch.tv/*"
  ]
}

启动文件介绍

• manifest.json: 定义了扩展的名称、版本、描述、图标、后台脚本、内容脚本和权限等信息。
• background.js: 后台脚本，负责处理扩展的主要逻辑。
• content.js: 内容脚本，注入到 Twitch 网页中执行，用于处理内容。

3. 项目的配置文件介绍

block_rules.json

block_rules.json 是内容过滤规则的配置文件，定义了需要处理的规则。以下是该文件的示例内容：

[
  {
    "url": "*://*.twitch.tv/ads/*",
    "action": "block"
  },
  {
    "url": "*://*.twitch.tv/ad-segment/*",
    "action": "block"
  }
]

配置文件介绍

• block_rules.json: 定义了需要处理的 URL 和对应的操作（如 block）。

通过以上介绍，您可以了解 VideoAdBlockForTwitch 项目的目录结构、启动文件和配置文件的基本信息，从而更好地使用和配置该扩展。