JSON Formatter 开源项目教程
json-formatterMakes JSON easy to read.项目地址:https://gitcode.com/gh_mirrors/js/json-formatter
1. 项目的目录结构及介绍
JSON Formatter 项目的目录结构如下:
json-formatter/
├── css/
│ ├── dark-mode.css
│ ├── light-mode.css
│ └── style.css
├── js/
│ ├── background.js
│ ├── content.js
│ └── options.js
├── manifest.json
├── options.html
└── README.md
目录介绍
- css/: 包含项目的样式文件,如
dark-mode.css
和light-mode.css
用于不同的主题模式,style.css
包含通用样式。 - js/: 包含 JavaScript 文件,
background.js
用于后台脚本,content.js
用于内容脚本,options.js
用于选项页面。 - manifest.json: 项目的配置文件,定义了扩展的基本信息和权限。
- options.html: 扩展的选项页面。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
JSON Formatter 的启动文件主要是 manifest.json
和 content.js
。
manifest.json
manifest.json
是 Chrome 扩展的配置文件,定义了扩展的基本信息、权限和启动脚本。以下是部分内容:
{
"manifest_version": 2,
"name": "JSON Formatter",
"version": "0.6.0",
"description": "Makes JSON easy to read. Open source.",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_title": "JSON Formatter"
}
}
content.js
content.js
是内容脚本,负责在加载 JSON 页面时自动格式化 JSON 内容。以下是部分内容:
document.addEventListener('DOMContentLoaded', function() {
if (document.contentType === 'application/json') {
try {
var json = JSON.parse(document.body.textContent);
document.body.innerHTML = syntaxHighlight(json);
} catch (e) {
console.error('JSON Formatter: Invalid JSON');
}
}
});
function syntaxHighlight(json) {
// 高亮显示 JSON 的逻辑
}
3. 项目的配置文件介绍
JSON Formatter 的配置文件主要是 manifest.json
。
manifest.json
manifest.json
文件包含了扩展的基本信息、权限和启动脚本。以下是详细介绍:
- manifest_version: 指定 manifest 文件的版本,目前为 2。
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述。
- permissions: 扩展所需的权限,如
activeTab
表示当前活动标签页。 - background: 后台脚本的配置,
scripts
指定后台脚本文件,persistent
表示是否持久化。 - content_scripts: 内容脚本的配置,
matches
指定匹配的 URL 模式,js
指定内容脚本文件,run_at
指定脚本运行的时间。 - browser_action: 浏览器动作的配置,
default_icon
指定图标,default_title
指定默认标题。
通过以上配置,JSON Formatter 扩展能够在加载 JSON 页面时自动格式化 JSON 内容,并提供高亮显示功能。
json-formatterMakes JSON easy to read.项目地址:https://gitcode.com/gh_mirrors/js/json-formatter