Add files via upload

Jefsky · Oct 16, 2024 · 96942b5 · 96942b5
1 parent 794b267
commit 96942b5
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,22 @@
+chrome.runtime.onStartup.addListener(() => {
+    showQuote();
+});
+
+function showQuote() {
+    const quotes = [
+        "生活就是一场冒险，勇敢去追梦。",
+        "今天的努力，是为了明天的成功。",
+        "幸福是奋斗出来的。",
+        "不要等待机会，而要创造机会。"
+    ];
+
+    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+
+    chrome.notifications.create({
+        type: "basic",
+        iconUrl: "icon48.png",
+        title: "鸡汤",
+        message: randomQuote,
+        priority: 2
+    });
+}
diff --git a/icons/icon128.png b/icons/icon128.png
diff --git a/icons/icon16.png b/icons/icon16.png
diff --git a/icons/icon48.png b/icons/icon48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,26 @@
+{
+    "manifest_version": 3,
+    "name": "妙语WittyRemark",
+    "version": "1.0",
+    "icons": {
+        "16": "icons/icon16.png",
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png"  
+    },
+    "description": "当你无聊时点我，赠你一句话。When you're bored, click me, and I'll give you a quote.",
+    "background": {
+        "service_worker": "background.js"
+    },
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icons/icon16.png",
+            "48": "icons/icon48.png",
+            "128": "icons/icon128.png"
+        }
+    },
+    "permissions": [
+        "notifications",
+        "activeTab"
+    ]
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>妙语</title>
+    <link rel="stylesheet" href="styles.css"> <!-- 添加 CSS 文件 -->
+    <script src="popup.js" defer></script> <!-- 使用 defer 确保脚本在 DOM 加载后执行 -->
+</head>
+
+<body>
+    <div class="container">
+        <h1>妙语</h1>
+        <button id="getQuote">赠我一语</button>
+        <p id="quoteDisplay" class="quote"></p>
+        <p id="authorDisplay" class="author"></p> <!-- 添加作者信息区域 -->
+        <footer class="footer">Jefsky.com</footer> <!-- 添加扩展作者信息 -->
+    </div>
+</body>
+
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('getQuote').addEventListener('click', () => {
+        const quoteDisplay = document.getElementById('quoteDisplay');
+        const authorDisplay = document.getElementById('authorDisplay');
+
+        // 清空内容区域
+        authorDisplay.innerText = '';
+        quoteDisplay.innerText = ''; // 将句子清空
+        quoteDisplay.innerText = '加载中...'; // 显示加载信息
+
+        fetch('https://v1-yy.jefsky.com/')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('网络响应错误');
+                }
+                return response.json();
+            })
+            .then(data => {
+                const quote = data.hitokoto;
+                const author = data.from_who ? `${data.from_who} - ${data.from}` : data.from; // 构建作者信息
+                quoteDisplay.innerText = quote; // 显示句子
+                authorDisplay.innerText = author; // 显示作者信息
+            })
+            .catch(error => {
+                console.error('获取句子时发生错误:', error);
+                quoteDisplay.innerText = '获取句子失败，请重试。';
+                authorDisplay.innerText = ''; // 清空作者信息
+            });
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,91 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
+    margin: 0;
+    padding: 20px;
+    /* 保留一些内边距 */
+    text-align: center;
+    min-width: 400px;
+    /* 确保最小宽度，避免过窄 */
+    display: flex;
+    /* 使用 Flexbox 布局 */
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+    min-height: 300px;
+    /* 确保最小高度，避免过高 */
+}
+
+.container {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    /* 增加内边距以提高视觉效果 */
+    width: 100%;
+    /* 设置宽度为100% */
+    max-width: 500px;
+    /* 设置最大宽度为500px */
+    margin: 0 auto;
+    /* 自动外边距使其居中 */
+    box-sizing: border-box;
+    /* 确保内边距和边框被包含在宽度计算内 */
+}
+
+h1 {
+    font-size: 1.5em;
+    margin-bottom: 15px;
+    color: #4A90E2;
+    /* 深蓝色 */
+}
+
+button {
+    width: 100%;
+    /* 设置按钮宽度为100% */
+    background-color: #4A90E2;
+    /* 按钮颜色 */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    /* 根据需要调整内边距 */
+    cursor: pointer;
+    font-size: 1em;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #357ABD;
+    /* 鼠标悬停时的颜色 */
+}
+
+.quote {
+    min-height: 40px;
+    /* 固定最小高度 */
+    font-size: 1.2em;
+    /* 句子字体大小 */
+    margin: 10px 0;
+    /* 上下外边距 */
+}
+
+.author {
+    min-height: 20px;
+    /* 固定最小高度 */
+    font-size: 0.9em;
+    /* 作者字体大小 */
+    color: #888;
+    /* 使用淡灰色显示 */
+    margin: 5px 0;
+    /* 上下外边距 */
+}
+
+.footer {
+    margin-top: 20px;
+    /* 增加顶部外边距 */
+    font-size: 0.8em;
+    /* 设置字体大小 */
+    color: #666;
+    /* 使用较浅的颜色 */
+}