Rikaikun 开源项目教程
1. 项目的目录结构及介绍
Rikaikun 项目的目录结构如下:
rikaikun/
├── _locales/
│ ├── en/
│ └── zh_CN/
├── css/
├── icons/
├── js/
│ ├── background.js
│ ├── content.js
│ ├── options.js
│ └── popup.js
├── manifest.json
├── options.html
├── popup.html
└── README.md
目录结构介绍
_locales/
: 存放项目的多语言支持文件。en/
: 英文语言文件。zh_CN/
: 中文语言文件。
css/
: 存放项目的样式文件。icons/
: 存放项目的图标文件。js/
: 存放项目的 JavaScript 文件。background.js
: 后台脚本文件。content.js
: 内容脚本文件。options.js
: 选项页面脚本文件。popup.js
: 弹出页面脚本文件。
manifest.json
: 项目的配置文件。options.html
: 选项页面 HTML 文件。popup.html
: 弹出页面 HTML 文件。README.md
: 项目的说明文档。
2. 项目的启动文件介绍
Rikaikun 项目的启动文件主要是 background.js
和 content.js
。
background.js
background.js
是后台脚本文件,负责处理浏览器扩展的后台逻辑,例如消息传递、数据存储等。
content.js
content.js
是内容脚本文件,负责在网页上下文中执行 JavaScript 代码,实现对网页内容的交互和修改。
3. 项目的配置文件介绍
Rikaikun 项目的配置文件是 manifest.json
。
manifest.json
manifest.json
是 Chrome 扩展的配置文件,定义了扩展的基本信息、权限、资源路径等。
{
"manifest_version": 2,
"name": "rikaikun",
"version": "2.0.0",
"description": "rikaikun helps you learn Japanese by showing the reading and English definition of Japanese words when you hover over them.",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"],
"css": ["css/content.css"]
}
],
"permissions": [
"storage"
],
"browser_action": {
"default_icon": "icons/icon16.png",
"default_popup": "popup.html"
},
"options_ui": {
"page": "options.html",
"open_in_tab": true
}
}
配置文件介绍
manifest_version
: 指定 manifest 文件的版本,目前为 2。name
: 扩展的名称。version
: 扩展的版本号。description
: 扩展的描述信息。icons
: 扩展的图标路径。background
: 后台脚本的配置,包括脚本路径和是否持久化。content_scripts
: 内容脚本的配置,包括匹配的 URL 和脚本路径。permissions
: 扩展需要的权限,例如存储权限。browser_action
: 浏览器动作的配置,包括默认图标和弹出页面。options_ui
: 选项页面的配置,包括页面路径和是否在新标签页打开。