PopupBlocker 开源项目使用教程

PopupBlocker 开源项目使用教程

PopupBlockerPopup blocking userscript项目地址:https://gitcode.com/gh_mirrors/po/PopupBlocker

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

PopupBlocker/
├── .github/
│   └── workflows/
│       └── ci.yml
├── src/
│   ├── background.js
│   ├── content.js
│   ├── options.js
│   └── popup.js
├── static/
│   ├── icons/
│   │   ├── icon16.png
│   │   ├── icon48.png
│   │   └── icon128.png
│   ├── options.html
│   └── popup.html
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── manifest.json
└── package.json

目录结构介绍

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件，用于持续集成和部署。
• src/: 包含项目的源代码文件，包括后台脚本、内容脚本、选项页面脚本和弹出页面脚本。
• static/: 包含静态资源文件，如图标、选项页面 HTML 和弹出页面 HTML。
• .eslintrc.json: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 管理。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的介绍和使用说明文档。
• manifest.json: Chrome 扩展的清单文件，定义扩展的基本信息和权限。
• package.json: Node.js 项目的配置文件，包含项目的依赖和脚本。

2. 项目的启动文件介绍

src/background.js

这是扩展的后台脚本文件，负责处理扩展的生命周期事件和后台任务。它通常用于管理扩展的状态、监听浏览器事件以及与内容脚本进行通信。

src/content.js

这是内容脚本文件，运行在网页的上下文中，负责处理网页上的内容和事件。它通常用于拦截和修改网页上的弹出窗口和广告。

src/options.js

这是选项页面的脚本文件，负责处理用户在选项页面上的交互和配置。用户可以通过这个页面自定义扩展的行为。

src/popup.js

这是弹出页面的脚本文件，负责处理用户在弹出窗口中的交互。弹出窗口通常用于显示扩展的快速操作界面。

3. 项目的配置文件介绍

manifest.json

这是 Chrome 扩展的清单文件，定义了扩展的基本信息、权限、脚本和资源。以下是 manifest.json 的主要内容：

{
  "manifest_version": 2,
  "name": "PopupBlocker",
  "version": "1.0",
  "description": "Blocks popups and ads on websites.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "scripts": ["src/background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "static/popup.html",
    "default_icon": {
      "16": "static/icons/icon16.png",
      "48": "static/icons/icon48.png",
      "128": "static/icons/icon128.png"
    }
  },
  "options_ui": {
    "page": "static/options.html",
    "open_in_tab": true
  }
}

配置文件介绍

• manifest_version: 指定清单文件的版本，通常为 2 或 3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• permissions: 扩展所需的权限，如 webRequest 和 webRequestBlocking 用于拦截请求，http://*/* 和 https://*/* 用于匹配所有 URL。
• background: 定义后台脚本，负责处理扩展的生命周期事件。
• content_scripts: 定义内容脚本，运行在网页上下文中，匹配所有 URL。
• browser_action: 定义浏览器动作，包括默认弹出页面和图标。
• options_ui: 定义选项页面，用户可以通过这个页面自定义扩展的行为。

通过以上介绍，您可以更好地理解和使用 PopupBlocker 开源项目。

PopupBlockerPopup blocking userscript项目地址:https://gitcode.com/gh_mirrors/po/PopupBlocker