Notion-Boost 浏览器扩展项目教程

最新推荐文章于 2024-08-31 08:26:01 发布

伍辰惟

最新推荐文章于 2024-08-31 08:26:01 发布

阅读量874

点赞数 23

本文链接：https://blog.csdn.net/gitblog_00054/article/details/141375126

版权

Notion-Boost 浏览器扩展项目教程

Notion-Boost-browser-extensionChrome & Firefox extension for Notion to add 20+ features like sticky outline, small text & full width by default, hide comments & help button, bolder text etc. Download here: https://gourav.io/notion-boost项目地址:https://gitcode.com/gh_mirrors/no/Notion-Boost-browser-extension

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

Notion-Boost 浏览器扩展项目的目录结构如下：

Notion-Boost-browser-extension/
├── assets/
│   ├── icons/
│   └── images/
├── css/
├── js/
├── manifest.json
├── popup.html
├── README.md
└── options.html

目录结构介绍

assets/: 包含扩展所需的图标和图片资源。
- icons/: 存放扩展的图标文件。
- images/: 存放扩展使用的其他图片资源。
css/: 包含扩展的样式文件。
js/: 包含扩展的 JavaScript 脚本文件。
manifest.json: 扩展的清单文件，定义了扩展的基本信息和配置。
popup.html: 扩展的弹出页面。
options.html: 扩展的选项设置页面。
README.md: 项目说明文档。

2. 项目的启动文件介绍

Notion-Boost 浏览器扩展的启动文件主要是 manifest.json 和 popup.html。

`manifest.json`

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

{
  "manifest_version": 2,
  "name": "Notion Boost",
  "version": "2.6.2",
  "description": "Boost your Notion productivity with features like sticky headings, table of contents, and more.",
  "icons": {
    "16": "assets/icons/icon16.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  },
  "browser_action": {
    "default_icon": {
      "16": "assets/icons/icon16.png",
      "48": "assets/icons/icon48.png",
      "128": "assets/icons/icon128.png"
    },
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.notion.so/*"],
      "js": ["js/content.js"],
      "css": ["css/content.css"]
    }
  ]
}

`popup.html`

popup.html 是扩展的弹出页面，用户点击扩展图标时会显示该页面。以下是该文件的部分内容：

<!DOCTYPE html>
<html>
<head>
  <title>Notion Boost</title>
  <link rel="stylesheet" type="text/css" href="css/popup.css">
</head>
<body>
  <div class="container">
    <h1>Notion Boost</h1>
    <p>Boost your Notion productivity with features like sticky headings, table of contents, and more.</p>
    <button id="options-button">Options</button>
  </div>
  <script src="js/popup.js"></script>
</body>
</html>

3. 项目的配置文件介绍

Notion-Boost 浏览器扩展的配置文件主要是 manifest.json 和 options.html。

`manifest.json`

如前所述，manifest.json 是扩展的清单文件，它定义了扩展的基本信息、权限、资源路径等。

`options.html`

options.html 是扩展的选项设置页面，用户可以在这里配置扩展的各种功能。以下是该文件的部分内容：

<!DOCTYPE html>
<html>
<head>
  <title>Notion Boost Options</title>
  <link rel="stylesheet" type="text/css" href="css/options.css">
</head>
<body>
  <div class="container">
    <h1>Notion Boost Options</h1>
    <form id="options-form">
      <label>
        <input type="checkbox" id="sticky-headings