GitHub Issue Link Status 项目教程
1、项目的目录结构及介绍
github-issue-link-status/
├── LICENSE
├── README.md
├── background.js
├── content.js
├── manifest.json
├── options.html
├── options.js
└── icons/
├── icon128.png
├── icon16.png
├── icon19.png
└── icon48.png
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- background.js: 扩展的后台脚本。
- content.js: 注入到网页的内容脚本。
- manifest.json: 扩展的清单文件,包含扩展的配置信息。
- options.html: 扩展的选项页面。
- options.js: 选项页面的脚本。
- icons/: 扩展的图标文件夹,包含不同尺寸的图标。
2、项目的启动文件介绍
项目的启动文件主要是 manifest.json
,它定义了扩展的基本信息和启动配置。以下是 manifest.json
的主要内容:
{
"manifest_version": 2,
"name": "GitHub Issue Link Status",
"version": "1.0",
"description": "Colorize issue and PR links to see their status (open, closed, merged)",
"permissions": [
"https://api.github.com/*",
"storage"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://github.com/*"],
"js": ["content.js"]
}
],
"options_ui": {
"page": "options.html",
"open_in_tab": true
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
- manifest_version: 清单文件的版本,目前为2。
- name: 扩展的名称。
- version: 扩展的版本号。
- description: 扩展的描述。
- permissions: 扩展所需的权限,包括GitHub API和存储权限。
- background: 后台脚本的配置。
- content_scripts: 内容脚本的配置,指定在哪些页面注入脚本。
- options_ui: 选项页面的配置。
- icons: 扩展的图标配置。
3、项目的配置文件介绍
项目的配置文件主要是 options.html
和 options.js
,它们用于设置和保存用户的API令牌。
options.html
<!DOCTYPE html>
<html>
<head>
<title>GitHub Issue Link Status Options</title>
<style>
body { font-family: Arial, sans-serif; }
.container { margin: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>GitHub Issue Link Status Options</h1>
<label for="apiToken">GitHub API Token:</label>
<input type="text" id="apiToken" name="apiToken">
<button id="save">Save</button>
<p id="status"></p>
</div>
<script src="options.js"></script>
</body>
</html>
options.js
document.getElementById('save').addEventListener('click', function() {
const apiToken = document.getElementById('apiToken').value;
chrome.storage.sync.set({ apiToken: apiToken }, function() {
document.getElementById('status').textContent = 'Options saved.';
});
});
chrome.storage.sync.get('apiToken', function(data) {
if (data.apiToken) {
document.getElementById('apiToken').value = data.apiToken;
}
});
- options.html: 提供一个输入框用于输入GitHub API令牌,并有一个保存按钮。
- options.js: 处理保存按钮的点击事件,