Super Simple Highlighter 项目教程

顾能培Wynne

于 2024-08-16 08:41:10 发布

阅读量628

点赞数 11

本文链接：https://blog.csdn.net/gitblog_00930/article/details/141242605

版权

Super Simple Highlighter 项目教程

super-simple-highlighterA chrome extension which highlights text on a web page, and attempts to restore it on returning项目地址:https://gitcode.com/gh_mirrors/su/super-simple-highlighter

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

Super Simple Highlighter 项目的目录结构如下：

super-simple-highlighter/
├── _locales/
│   └── cs/
│       └── messages.json
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── gitignore
├── LICENSE
├── README.md
├── manifest.json
├── options.html
├── overview.html
└── popup.html

目录介绍：

_locales/: 包含多语言支持的文件夹，目前只有捷克语（cs）的翻译文件。
static/: 静态资源文件夹，包含 CSS 和 JS 文件。
css/: 存放样式文件。
js/: 存放脚本文件。
gitignore: Git 忽略文件配置。
LICENSE: 项目许可证文件。
README.md: 项目说明文档。
manifest.json: Chrome 扩展的配置文件。
options.html: 扩展选项页面。
overview.html: 扩展概览页面。
popup.html: 扩展弹出页面。

2. 项目的启动文件介绍

Super Simple Highlighter 的启动文件主要是 manifest.json 文件。这个文件定义了扩展的基本信息和启动配置。

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

{
  "manifest_version": 2,
  "name": "Super Simple Highlighter",
  "version": "1.0",
  "description": "A Chrome extension for highlighting text and automatically attempt to restore highlight on each page revisit.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "icons/icon16.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

启动文件介绍：

manifest_version: 指定 manifest 文件的版本。
name: 扩展的名称。
version: 扩展的版本号。
description: 扩展的描述。
icons: 扩展的图标。
permissions: 扩展所需的权限。
browser_action: 浏览器动作配置，包括默认图标和弹出页面。
background: 后台脚本配置。
content_scripts: 内容脚本配置，指定在哪些页面加载内容脚本。

3. 项目的配置文件介绍

Super Simple Highlighter 的配置文件主要是 manifest.json 和 options.html。

`manifest.json` 配置文件介绍：

如上所述，manifest.json 文件定义了扩展的基本信息和启动配置，包括扩展的名称、版本、描述、图标、权限、浏览器动作、后台脚本和内容脚本等。

`options.html` 配置文件介绍：

options.html 文件是扩展的选项页面，用户可以在这里进行一些自定义设置。

`options.html` 文件内容示例：

<!DOCTYPE html>
<html>
<head>
  <title>Super Simple Highlighter Options</title>
  <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
  <h1>Super Simple Highlighter Options</h1>
  <form>
    <label for="highlightColor">Highlight Color:</label>
    <input type="color" id="highlightColor" name="highlightColor" value="#ffff00">
    <button type="submit">Save</button>
  </form>
  <script src="static/js/options.js"></script>
</body>
</html>

super-simple-highlighterA chrome extension which highlights text on a web page, and attempts to restore it on returning项目地址:https://gitcode.com/gh_mirrors/su/super-simple-highlighter