add chrome extension

Qi-Zhan · Dec 6, 2024 · 998eb4b · 998eb4b
1 parent ee5cc82
commit 998eb4b
Show file tree

Hide file tree

Showing 15 changed files with 1,538 additions and 0 deletions.
diff --git a/extension/README.md b/extension/README.md
@@ -0,0 +1,3 @@
+# Chrome 扩展
+
+该文件夹包含了 Chrome 扩展的源代码。
diff --git a/extension/background.js b/extension/background.js
@@ -0,0 +1,3 @@
+chrome.action.onClicked.addListener(() => {
+    chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
+});
diff --git a/extension/icon.png b/extension/icon.png
diff --git a/extension/index.html b/extension/index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="./static/css/base.css" rel="stylesheet">
+    <link href="./static/css/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.font.im/css?family=Source+Serif+Pro%7CLato%7CInconsolata" rel="stylesheet"
+        type="text/css">
+    <title> </title>
+    <style>
+        .font-sans {
+            font-family: 'Lato', 'SimHei', 'STHeiti', 'SimHei', 'Serif';
+        }
+
+        .font-serif {
+            font-family: 'Source Serif Pro', 'Songti SC', 'SimSun', 'Serif', serif;
+        }
+
+        .text-red-700 {
+            color: #b91c1c;
+        }
+
+        .bg-yellow-200 {
+            background-color: #fef08a;
+        }
+
+        .font-bold {
+            font-weight: bold;
+        }
+
+        .px-1 {
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+        }
+
+        #animated-text {
+            max-height: 80vh;
+            overflow-y: hidden;
+            position: relative;
+            scroll-behavior: smooth;
+        }
+    </style>
+
+    <link rel="stylesheet" href="./static/reveal/reveal.css">
+    <link rel="stylesheet" href="./static/reveal/theme/simple.css" id="theme">
+    <link rel="stylesheet" href="./static/jyy/jyy.css">
+    <style type="text/css">
+        /* 用来控制扇形图的 */
+        #canvas-holder {
+            background-color: #FFFFFF;
+            height: 50%;
+            width: 50%;
+        }
+    </style>
+</head>
+
+
+<body class="d-flex flex-column h-100">
+
+    <div class="reveal">
+        <div class="slides">
+            <section>
+                <div class="center middle">
+                    <div style="width:100%">
+                        <div>
+                            <h2 id="_1" class="text-2xl mt-2 font-sans"></h2>
+                        </div>
+                        <h5 id="_1" class="text-2xl mt-2 font-sans">
+                            按下 → <span class="text-blue-800">开始探索吧！</span>
+                        </h5>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <audio id="typing-sound" src="./static/sound/keyboard-typing-5997.mp3" preload="auto"></audio>
+                <h2 id="animated-text" class="text-2xl mt-2 font-sans"></h2>
+            </section>
+            <section>
+                <div class="center middle">
+                    <div style="width:100%">
+                        <h2 class="text-2xl mt-2 font-sans">你的年度关键词竟是🧐</h2>
+                        <center>
+                            <canvas id="word-cloud" width="800" height="400"></canvas>
+                        </center>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-2xl mt-2 font-sans">你最常访问的域名🔗</h2>
+                <div style="width:100%">
+                    <canvas id="Chart_domains"></canvas>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-2xl mt-2 font-sans">“不太准”的类型占比📈</h2>
+                <div style="width:100%">
+                    <center>
+                        <div id="canvas-holder">
+                            <canvas id="Chart_category"></canvas>
+                        </div>
+                    </center>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-2xl mt-2 font-sans">你的每月访问量📊</h2>
+                <div style="width:100%">
+                    <canvas id="Chart_months"></canvas>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-2xl mt-2 font-sans">你的每周访问量📊</h2>
+                <div style="width:100%">
+                    <canvas id="Chart_weekdays"></canvas>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-2xl mt-2 font-sans">你更爱在这些时间段上网🕒</h2>
+                <div style="display: flex; justify-content: space-between;">
+                    <div style="width: 45%; text-align: center;">
+                        <canvas id="Chart_first_half"></canvas>
+                    </div>
+                    <div style="width: 48%; text-align: center;">
+                        <canvas id="Chart_second_half"></canvas>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div class="center middle">
+                    <div style="width:100%; text-align: center;">
+                        <p class="text-lg mt-4 font-sans">
+                            回顾这一年，浏览记录勾勒出了你探索, 摸鱼, 学习与成长的足迹。
+                        </p>
+                        <p class="text-lg mt-4 font-sans">
+                            希望新的一年，你可以继续勇敢追梦，探索更多未知的世界！🎉
+                        </p>
+                        <p class="text-lg mt-6 font-sans font-bold text-blue-700">
+                            🌟 祝愿你在新的一年万事胜意! 🌟
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <script src="./static/reveal/reveal.js"></script>
+    <script src="./scripts/wordcloud2.min.js"></script>
+    <script src="./static/css/chart.js"></script>
+    <script src="./scripts/main.js"></script>
+</body>
+
+</html>
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -0,0 +1,23 @@
+{
+    "manifest_version": 3,
+    "name": "浏览记录年度总结",
+    "version": "1.0",
+    "description": "统计(近90天)浏览记录，生成年度总结",
+    "permissions": [
+        "tabs",
+        "history"
+    ],
+    "author": {
+        "email": "[email protected]"
+    },
+    "background": {
+        "service_worker": "background.js"
+    },
+    "action": {
+        "default_icon": {
+            "16": "icon.png",
+            "48": "icon.png",
+            "128": "icon.png"
+        }
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Chrome 扩展

		该文件夹包含了 Chrome 扩展的源代码。