创建一个Chrome插件,允许用户通过插件来管理书签,涉及到以下步骤:
- 创建
manifest.json
文件:定义插件的基本信息和权限。 - 编写后台脚本
background.js
:处理插件的逻辑,如监听浏览器动作和操作浏览器API。 - 创建选项页面
options.html
和options.js
:用户可以在这里编辑分类。 - 创建弹出页面
popup.html
和popup.js
:用户点击插件图标时显示的界面,用于选择分类并收藏当前页面。 - 样式文件(如
popup.css
和options.css
):用于美化用户界面。
下面是这些组件的示例代码:
1. Manifest文件 (manifest.json
)
{
"manifest_version": 3,
"name": "Bookmark Organizer",
"version": "1.0",
"permissions": ["bookmarks", "activeTab", "storage", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"options_page": "options.html",
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. 背景脚本 (background.js
)
// 此脚本可以留空,因为所有逻辑都在popup.js和options.js中处理
3. 选项页面 (options.html
)
<!DOCTYPE html>
<html>
<head>
<title>Edit Categories Enter categories separated by commas</title>
<style>
/* 全局样式,适用于整个页面 */
body {
font-family: Arial, sans-serif; /* 设置页面字体 */
}
/* 特定于textarea的样式 */
textarea {
width: 300px; /* 宽度,根据需要调整 */
height: 150px; /* 高度,根据需要调整 */
font-size: 22px; /* 字体大小 */
}
/* 容器样式,用于添加一些边距 */
.options-container {
margin: 20px;
padding: 10px;
border: 1px solid #ccc; /* 边框 */
}
</style>
<link rel="stylesheet" type="text/css" href="options.css">
</head>
<body>
<h1>Edit Categories Enter categories separated by commas</h1>
<textarea id="categories" placeholder="Enter categories separated by commas"></textarea>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
4. 选项页面脚本 (options.js
)
// 定义默认分类
const defaultCategories = ['LLM', 'LLM app', 'LLM EDU', 'distributed LLM', 'local LLM', 'Consumption as Investment Model'];
document.addEventListener('DOMContentLoaded', () => {
// 获取保存的分类,如果没有,则使用默认分类
chrome.storage.sync.get('categories', (data) => {
const categories = data.categories || defaultCategories;
document.getElementById('categories').value = categories.join(', ');
});
document.getElementById('save').addEventListener('click', () => {
const categoriesInput = document.getElementById('categories');
const categories = categoriesInput.value.split(',').map(category => category.trim());
chrome.storage.sync.set({ categories }, () => {
alert('分类保存成功');
});
});
});
5. 弹出页面 (popup.html
)
<!DOCTYPE html>
<html>
<head>
<title>Bookmark Page</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<h1>Bookmark Page</h1>
<select id="category-select"></select>
<button id="bookmark">Bookmark</button>
<script src="popup.js"></script>
</body>
</html>
6. 弹出页面脚本 (popup.js
)
document.addEventListener('DOMContentLoaded', () => {
chrome.storage.sync.get(['categories'], (data) => {
const categories = data.categories || ['LLM', 'LLM app', 'LLM EDU', 'distributed LLM', 'local LLM', 'Consumption as Investment Model'];
const select = document.getElementById('category-select');
categories.forEach((category) => {
const option = document.createElement('option');
option.textContent = category;
select.appendChild(option);
});
document.getElementById('bookmark').addEventListener('click', () => {
const category = select.value;
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
const url = tab.url;
const title = tab.title;
chrome.bookmarks.search({ title: category }, (results) => {
const folderId = results.length > 0 ? results[0].id : null;
if (!folderId) {
chrome.bookmarks.create({ title: category }, (newFolder) => {
chrome.bookmarks.update(newFolder.id, { title: category }, () => {
chrome.bookmarks.create({ title: title, url: url, parentId: newFolder.id }, (newBookmark) => {
console.log(`Bookmarked '${title}' to '${category}' folder`);
});
});
});
} else {
chrome.bookmarks.create({ title: title, url: url, parentId: folderId }, (newBookmark) => {
console.log(`Bookmarked '${title}' to '${category}' folder`);
});
}
});
});
});
});
});
7. 样式文件 (popup.css
和 options.css
)
你可以使用CSS来美化弹出页面和选项页面。
请注意,这只是一个基础示例,实际开发中可能需要更多的错误处理和功能扩展。此外,Chrome插件开发需要遵循Chrome Web Store的政策和要求。