Purple-adblock 开源项目使用教程
1. 项目的目录结构及介绍
Purple-adblock 项目的目录结构如下:
Purple-adblock/
├── README.md
├── background.js
├── content.js
├── manifest.json
├── options.html
├── options.js
└── styles.css
README.md
: 项目介绍和使用说明。background.js
: 扩展的后台脚本,负责处理扩展的主要逻辑。content.js
: 内容脚本,注入到 Twitch 页面中,用于拦截和处理广告。manifest.json
: 扩展的清单文件,包含扩展的基本信息和配置。options.html
: 扩展的设置页面。options.js
: 设置页面的脚本。styles.css
: 扩展的样式文件。
2. 项目的启动文件介绍
Purple-adblock 的启动文件主要是 background.js
和 content.js
:
background.js
: 这个文件是扩展的后台脚本,负责管理扩展的生命周期和全局状态。它会在扩展安装或浏览器启动时运行。content.js
: 这个文件是内容脚本,它会注入到 Twitch 页面中,负责拦截和处理视频广告。
3. 项目的配置文件介绍
Purple-adblock 的配置文件是 manifest.json
:
{
"manifest_version": 2,
"name": "Purple Adblock",
"version": "1.0",
"description": "Adblock for the Twitch.tv using server side signature and local m3u8 manipulation.",
"permissions": [
"webRequest",
"webRequestBlocking",
"https://*.twitch.tv/*"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["https://*.twitch.tv/*"],
"js": ["content.js"],
"css": ["styles.css"]
}
],
"options_ui": {
"page": "options.html",
"open_in_tab": true
},
"browser_action": {
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_title": "Purple Adblock"
}
}
manifest_version
: 指定清单文件的版本,目前为 2。name
: 扩展的名称。version
: 扩展的版本号。description
: 扩展的描述。permissions
: 扩展所需的权限,包括网络请求和 Twitch 页面的访问权限。background
: 后台脚本的配置。content_scripts
: 内容脚本的配置,指定注入的页面和脚本文件。options_ui
: 设置页面的配置。browser_action
: 浏览器按钮的配置,包括图标和标题。
以上是 Purple-adblock 开源项目的详细使用教程,希望对您有所帮助。