FacebookTrackingRemoval 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00545/article/details/141767902

FacebookTrackingRemoval 开源项目教程

FacebookTrackingRemovalBrowser extension that removes ads and the user interaction tracking from content on Facebook项目地址:https://gitcode.com/gh_mirrors/fa/FacebookTrackingRemoval

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

FacebookTrackingRemoval/
├── README.md
├── manifest.json
├── background.js
├── content.js
├── options.html
├── options.js
├── styles.css
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

README.md: 项目说明文件，包含项目的基本信息和使用指南。
manifest.json: 扩展的配置文件，定义了扩展的基本信息、权限和文件路径。
background.js: 后台脚本，处理扩展的后台逻辑。
content.js: 内容脚本，注入到网页中执行，用于移除广告和用户交互跟踪。
options.html: 选项页面的HTML文件，用户可以在此配置扩展的选项。
options.js: 选项页面的JavaScript文件，处理选项页面的逻辑。
styles.css: 样式文件，定义了扩展的样式。
icons/: 图标文件夹，包含扩展使用的图标文件。

2. 项目的启动文件介绍

manifest.json: 这是扩展的入口文件，定义了扩展的基本信息、权限和文件路径。浏览器会根据这个文件加载扩展所需的其他文件。

{
  "manifest_version": 3,
  "name": "Facebook Tracking Removal",
  "version": "1.13.0",
  "description": "Removes Ads and the user interaction tracking from content on Facebook™",
  "permissions": [
    "webNavigation",
    "tabs",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*.facebook.com/*"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  }
}

3. 项目的配置文件介绍

manifest.json: 配置文件中定义了扩展的名称、版本、描述、权限、后台脚本、内容脚本、图标和选项页面等信息。
options.html 和 options.js: 选项页面允许用户配置扩展的选项。options.html 是选项页面的HTML文件，options.js 处理选项页面的逻辑。

<!-- options.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Facebook Tracking Removal Options</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Facebook Tracking Removal Options</h1>
  <label>
    <input type="checkbox" id="adDetection">
    Detect ads with canvas labels
  </label>
  <button id="save">Save</button>
  <script src="options.js"></script>
</body>
</html>

// options.js
document.getElementById('save').addEventListener('click', () => {
  const adDetection = document.getElementById('adDetection').checked;
  chrome.storage.sync.set({ adDetection }, () => {
    alert('Options saved.');
  });
});

chrome.storage.sync.get('adDetection', (data) => {
  document.getElementById('adDetection').checked = data.adDetection || false;
});

以上是 FacebookTrackingRemoval 开源项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。

FacebookTrackingRemovalBrowser extension that removes ads and the user interaction tracking from content on Facebook项目地址:https://gitcode.com/gh_mirrors/fa/FacebookTrackingRemoval