AdDetector 开源项目教程

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

AdDetector 项目的目录结构如下：

ad-detector/
├── README.md
├── LICENSE
├── manifest.json
├── background.js
├── content.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── styles/
    └── style.css

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• LICENSE: 项目的开源许可证文件。
• manifest.json: Chrome 扩展的清单文件，定义了扩展的基本信息和资源。
• background.js: 扩展的后台脚本，负责处理扩展的后台逻辑。
• content.js: 内容脚本，负责在网页中插入广告检测逻辑。
• icons/: 存放扩展图标的目录。
• styles/: 存放扩展样式文件的目录。

2. 项目的启动文件介绍

AdDetector 项目的启动文件主要是 manifest.json 和 background.js。

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

{
  "manifest_version": 2,
  "name": "AdDetector",
  "version": "1.0",
  "description": "Detect news articles paid for by advertisers.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["styles/style.css"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

• background.js: 这是扩展的后台脚本，负责处理扩展的后台逻辑。以下是 background.js 的主要内容：

// background.js
chrome.runtime.onInstalled.addListener(function() {
  console.log('AdDetector installed.');
});

3. 项目的配置文件介绍

AdDetector 项目的配置文件主要是 manifest.json。

• manifest.json: 这个文件包含了扩展的所有配置信息，包括名称、版本、描述、权限、后台脚本、内容脚本和图标等。以下是 manifest.json 的主要配置项：

  • manifest_version: 指定清单文件的版本，当前为 2。
  • name: 扩展的名称。
  • version: 扩展的版本号。
  • description: 扩展的描述信息。
  • permissions: 扩展所需的权限，例如 activeTab 表示扩展可以访问当前活动标签页。
  • background: 定义后台脚本和是否持久运行。
  • content_scripts: 定义内容脚本，包括匹配的 URL 模式、JavaScript 文件和 CSS 文件。
  • icons: 定义扩展的图标。

通过以上配置，AdDetector 扩展可以在浏览器中检测并标记出由广告商付费的新闻文章，提高互联网用户的透明度。