RecipeFilter 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00406/article/details/141852111

RecipeFilter 开源项目教程

RecipeFilterChrome extension that focuses recipes front and center on food blogs项目地址:https://gitcode.com/gh_mirrors/re/RecipeFilter

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

RecipeFilter 项目的目录结构如下：

RecipeFilter/
├── safari/
│   └── recipe-filter/
├── src/
│   ├── css/
│   ├── img/
│   ├── js/
│   └── manifest.json
├── .gitignore
├── LICENSE
├── README.md
└── video-tutorial.md

目录介绍：

safari/: 包含适用于 Safari 浏览器的扩展文件。
src/: 包含扩展的主要源代码文件。
- css/: 存放样式文件。
- img/: 存放图像文件。
- js/: 存放 JavaScript 脚本文件。
- manifest.json: 扩展的清单文件，定义扩展的基本信息和权限。
.gitignore: Git 忽略文件列表。
LICENSE: 项目的许可证文件，采用 GPL-3.0 许可证。
README.md: 项目说明文档。
video-tutorial.md: 视频教程文档。

2. 项目的启动文件介绍

RecipeFilter 的启动文件主要是 manifest.json 文件。这个文件定义了扩展的基本信息、权限、以及启动时需要加载的脚本和页面。

`manifest.json` 文件内容示例：

{
  "manifest_version": 2,
  "name": "Recipe Filter",
  "version": "1.0",
  "description": "Helps cut through to the chase when browsing food blogs.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon-16.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ]
}

启动文件介绍：

manifest_version: 指定清单文件的版本，通常为 2。
name: 扩展的名称。
version: 扩展的版本号。
description: 扩展的描述。
permissions: 扩展所需的权限。
background: 后台脚本和是否持久运行。
browser_action: 浏览器按钮的默认弹出页面和图标。
content_scripts: 注入到网页中的脚本和样式。

3. 项目的配置文件介绍

RecipeFilter 的配置文件主要是 manifest.json 和 options.html。

`manifest.json` 配置文件：

如上所述，manifest.json 文件定义了扩展的基本信息、权限、以及启动时需要加载的脚本和页面。

`options.html` 配置文件：

options.html 文件允许用户管理扩展的设置，例如黑名单站点。

<!DOCTYPE html>
<html>
<head>
  <title>Recipe Filter Options</title>
  <style>
    body { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>Recipe Filter Options</h1>
  <label>
    Blacklist Sites:
    <textarea id="blacklist" rows="10" cols="50"></textarea>
  </label>
  <button id="save">Save</button>
  <script src="options.js"></script>
</body>
</html>