HumbleNewTabPage 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00115/article/details/141413383

HumbleNewTabPage 开源项目教程

HumbleNewTabPageNew tab page extension for Chrome and Firefox项目地址:https://gitcode.com/gh_mirrors/hu/HumbleNewTabPage

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

HumbleNewTabPage 项目的目录结构如下：

HumbleNewTabPage/
├── _locales/
│   ├── en/
│   │   └── messages.json
│   └── zh_CN/
│       └── messages.json
├── css/
│   ├── fonts/
│   │   └── ...
│   ├── images/
│   │   └── ...
│   └── main.css
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── js/
│   ├── background.js
│   ├── content.js
│   └── options.js
├── options/
│   ├── index.html
│   └── style.css
├── _locales/
│   ├── en/
│   │   └── messages.json
│   └── zh_CN/
│       └── messages.json
├── manifest.json
└── README.md

目录结构介绍

_locales/: 包含项目的多语言支持文件。
- en/ 和 zh_CN/: 分别包含英文和中文的翻译文件。
css/: 包含项目的样式文件。
- fonts/ 和 images/: 包含字体和图片资源。
- main.css: 主样式文件。
icons/: 包含项目的图标文件。
- icon16.png, icon48.png, icon128.png: 不同尺寸的图标文件。
js/: 包含项目的JavaScript文件。
- background.js: 后台脚本。
- content.js: 内容脚本。
- options.js: 选项页面脚本。
options/: 包含选项页面的HTML和CSS文件。
- index.html: 选项页面HTML文件。
- style.css: 选项页面样式文件。
manifest.json: 项目的配置文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

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

`manifest.json`

manifest.json 是 Chrome 扩展的配置文件，定义了扩展的基本信息、权限、资源路径等。以下是 manifest.json 的部分内容：

{
  "manifest_version": 2,
  "name": "Humble New Tab Page",
  "version": "3.0.0",
  "description": "Override the new tab page with something simple and clean.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "permissions": [
    "bookmarks",
    "history",
    "storage",
    "topSites"
  ],
  "options_ui": {
    "page": "options/index.html",
    "open_in_tab": true
  }
}

`background.js`

background.js 是后台脚本，负责处理扩展的后台逻辑。以下是 background.js 的部分内容：

chrome.runtime.onInstalled.addListener(function() {
  // 扩展安装或更新时的处理逻辑
});

chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
  // 书签创建时的处理逻辑
});

chrome.history.onVisited.addListener(function(historyItem) {
  // 历史记录访问时的处理逻辑
});