Skip to content

Commit 8c17111

Browse files
Scorpio-meowScorpio-meow
committed
更新樣式：修正 backdrop-filter 屬性以確保在所有瀏覽器中一致顯示
1 parent 64fb069 commit 8c17111

3 files changed

Lines changed: 233 additions & 91 deletions

File tree

‎README.md‎

Lines changed: 229 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,267 @@
1-
# Threads 程式碼儲存器 (Threads Code Saver)
1+
# Threads 程式碼儲存器
22

3-
> 一個 Manifest V3 瀏覽器擴充功能，專門從 [Threads](https://www.threads.com/) 貼文自動擷取、儲存與管理可嵌入的 embed code。
3+
> 一個 Manifest V3 瀏覽器擴充功能，專門從 [Threads](https://www.threads.com/) 貼文自動擷取、儲存、管理與匯出可嵌入的程式碼與貼文資料。
4+
> 所有資料都保存在瀏覽器本機 `chrome.storage.local`，不需要後端、資料庫或額外 API。
45
5-
***
6+
## 這個專案能做什麼
67

7-
## 功能亮點
8+
- 在 Threads 貼文的「取得內嵌程式碼」流程上，自動攔截並儲存資料
9+
- 自動整理貼文連結、作者、發文時間、內文、標籤、程式碼區塊與 embed code
10+
- 偵測失效貼文、重新導向與 fallback summary，避免把錯誤內容當成正常貼文
11+
- 提供 popup 快速檢視與全頁 dashboard 深度管理兩種介面
12+
- 支援搜尋、排序、篩選、批次操作、匯出、匯入與重新生成 embed code
813

9-
### 自動擷取
10-
- 監聽 Threads「取得內嵌程式碼」對話框觸發
11-
- 自動解析並儲存：貼文連結、作者、發文時間、內文、程式碼區塊與 embed code
12-
- 失效貼文自動辨識（重新導向、404、fallback summary）
14+
## 主要功能
1315

14-
### 資料管理
15-
| 功能 | 說明 |
16-
|------|------|
17-
| 搜尋 | 依內文、作者、標籤、程式碼內容、embed code 全文檢索 |
18-
| 排序 | 儲存時間 / 發文時間 / 作者 / 程式碼數量 |
19-
| 篩選 | 依作者、標籤、未更新時間、失效狀態 |
20-
| 批次操作 | 批次重新生成 embed code、更新時間與內文 |
16+
### 自動擷取與儲存
2117

22-
### 複製與匯出
23-
- 一鍵複製單篇 embed code
24-
- **Embed Only JS**：僅含可直接嵌入的 `blockquote` 陣列
25-
- **Full Data JS**：含 `embedCode`、`postLink`、`author`、`content`、`timestamp`、`timestampTitle`、`savedAt`、`tags`、`status` 及失效資訊
18+
- 監看 Threads 頁面中可觸發 embed code 的按鈕與對話框
19+
- 盡可能從貼文 DOM、embed 對話框與 meta 資訊中補齊資料
20+
- 儲存時會自動去重，同一篇貼文以 `postLink` 更新既有紀錄，不會無限重複新增
21+
- 自動抽取：
22+
- 貼文內文
23+
- 作者與作者連結
24+
- 發文時間與時間標題
25+
- 程式碼區塊與推測語言
26+
- Hashtag 與技術關鍵字標籤
27+
- 原始 embed code
2628

27-
### 匯入與備份
28-
- 支援 `.json`（陣列格式或 `{ savedArticles: [...] }` 結構）
29-
- 支援 `.js`（`posts = [...]` 格式）
30-
- 匯入時可選擇**合併**或**覆寫**現有資料
29+
### 管理與瀏覽
3130

32-
***
31+
- 全文搜尋：內文、程式碼、作者、標籤、embed code
32+
- 排序：儲存時間、發文時間、作者、程式碼數量
33+
- 篩選：全部、作者、標籤、無發文時間、失效貼文
34+
- 標籤雲與快速統計
35+
- 單篇刪除、批次刪除、清除全部資料
36+
37+
### 匯出與匯入
38+
39+
- 匯出簡易版 JS：只包含可直接嵌入的 `blockquote` 內容
40+
- 匯出完整資料 JS：包含貼文可攜用的完整欄位
41+
- 支援匯入 `.json` 與 `.js`
42+
- 匯入時可選擇合併或覆寫
43+
44+
### 維護工具
45+
46+
- 重新生成 embed code
47+
- 透過背景分頁重新抓取 Threads 貼文內容與時間
48+
- 自動標記 redirect、post-not-found、fallback-summary 等失效狀態
49+
- 提供本機備份與匯出以便長期保存
50+
51+
## 介面概覽
52+
53+
| 介面 | 用途 |
54+
| --- | --- |
55+
| `popup.html` | 工具列快速面板，用來快速搜尋、匯出、匯入與進入儀表板 |
56+
| `dashboard.html` | 全頁控制面板，適合大量資料管理、批次操作與維護 |
57+
| `content.js` | 注入 Threads 頁面，負責擷取與儲存資料 |
58+
| `styles.css` | Threads 頁面上的輔助樣式 |
59+
60+
## 技術棧
61+
62+
- **語言**：JavaScript
63+
- **標記語言**：HTML
64+
- **樣式**：CSS
65+
- **擴充功能規範**：Chrome Extension Manifest V3
66+
- **瀏覽器 API**：`chrome.storage.local`、`chrome.tabs`、`chrome.scripting`
67+
- **執行模式**：純前端、本機儲存，沒有後端服務
3368

3469
## 專案結構
3570

36-
```
71+
```text
3772
threads-embedded-code/
38-
├── manifest.json # Manifest V3 設定、權限宣告
39-
├── content.js # 注入 Threads 頁面，監聽 embed 觸發並擷取貼文內容
40-
├── popup.html # 彈出視窗 UI 結構
41-
├── popup.js # 主要業務邏輯：清單渲染、搜尋、篩選、匯出匯入、批次更新
42-
├── styles.css # 注入 Threads 頁面的輔助樣式（儲存提示等）
43-
└── favicon.png # 擴充功能圖示（128×128）
73+
├── manifest.json # MV3 設定、權限與入口定義
74+
├── content.js # 注入 Threads 頁面，擷取貼文與 embed 資料
75+
├── styles.css # 注入 Threads 頁面的輔助樣式
76+
├── popup.html # 工具列彈出視窗 UI
77+
├── popup.css # 工具列彈出視窗樣式
78+
├── popup.js # popup 互動邏輯：搜尋、匯出、匯入、快速管理
79+
├── dashboard.html # 全頁控制面板 UI
80+
├── dashboard.css # 全頁控制面板樣式
81+
├── dashboard.js # 深度管理邏輯：批次操作、統計、更新、刪除
82+
├── favicon.png # 擴充功能圖示
83+
└── README.md # 專案說明文件
4484
```
4585

46-
***
86+
## 安裝與啟用
4787

48-
## 安裝方式
88+
### 1. 取得專案
4989

50-
1. 下載或 Clone 此專案到本機：
51-
```bash
52-
git clone https://github.com/Scorpio-meow/threads-embedded-code.git
53-
```
90+
```bash
91+
git clone https://github.com/Scorpio-meow/threads-embedded-code.git
92+
```
5493

55-
2. 開啟瀏覽器擴充功能頁面：
56-
- **Google Chrome**：`chrome://extensions/`
57-
- **Microsoft Edge**：`edge://extensions/`
58-
- **Brave / Opera**：同 Chrome 路徑
94+
### 2. 開啟瀏覽器擴充功能頁面
5995

60-
3. 啟用右上角的 **開發人員模式**。
96+
- **Google Chrome**：`chrome://extensions/`
97+
- **Microsoft Edge**：`edge://extensions/`
98+
- **Brave / Opera / 其他 Chromium 瀏覽器**：使用相同的擴充功能管理頁
6199

62-
4. 點擊 **載入未封裝項目**，選擇剛剛 Clone 的 `threads-embedded-code` 資料夾。
100+
### 3. 開啟開發人員模式
63101

64-
5. 安裝完成後，建議將擴充功能**釘選到工具列**以便快速存取。
102+
在右上角切換 **開發人員模式**。
65103

66-
***
104+
### 4. 載入未封裝項目
67105

68-
## 使用方式
106+
點擊 **載入未封裝項目**，選擇這個專案資料夾。
69107

70-
1. **儲存貼文**
71-
在 Threads 上對任意貼文點選「⋯」→「取得內嵌程式碼」，擴充功能自動擷取並儲存。
108+
### 5. 釘選擴充功能
72109

73-
2. **管理資料**
74-
點擊工具列的擴充功能圖示，在彈出面板中搜尋、篩選、排序、刪除或批次操作。
110+
安裝完成後，建議把擴充功能釘選到工具列，方便快速開啟 popup 與 dashboard。
75111

76-
3. **更新內容**
77-
點選「更新資料」重新訪問 Threads 貼文，刷新發文時間、內文並自動標記失效貼文。
112+
### 6. 更新程式後重新載入
78113

79-
4. **重新生成 embed code**
80-
當 Threads 更新嵌入結構時，可對單篇、已選取或全部貼文重新生成 embed code。
114+
修改檔案後，回到擴充功能頁面按 **重新載入**，再刷新 Threads 分頁。
81115

82-
5. **匯出 / 匯入**
83-
在面板內選擇匯出格式（embed only 或 full data），或從 `.json` / `.js` 匯入備份，支援合併或覆寫。
116+
> 這個專案不需要 `npm install`、`pnpm install` 或任何 build 步驟。
84117
85-
***
118+
## 使用方式
86119

87-
## 開發注意事項
120+
### 快速儲存 Threads 貼文
121+
122+
1. 開啟 Threads 任一含程式碼的貼文
123+
2. 點擊貼文選單中的 **取得內嵌程式碼**
124+
3. 擴充功能會自動擷取並儲存資料
125+
4. 若同一篇貼文再次被儲存，現有紀錄會被更新
126+
127+
### 在 popup 中快速管理
128+
129+
- 查看目前儲存數量
130+
- 搜尋作者、內文、程式碼、標籤或 embed code
131+
- 選取多筆資料進行匯出或操作
132+
- 一鍵前往全頁儀表板
133+
134+
### 在 dashboard 中深度管理
135+
136+
- 使用全文搜尋、排序與篩選
137+
- 檢視作者分布、標籤雲與快速統計
138+
- 批次複製 embed code
139+
- 批次重新生成 embed code
140+
- 批次刪除選取文章
141+
- 更新貼文時間與內容，並標記失效貼文
142+
143+
### 匯出與匯入
144+
145+
- 匯出 JS 備份時，可選擇：
146+
- **Embed Only**：只有可嵌入的 blockquote 內容
147+
- **Full Data**：包含完整貼文資料與失效資訊
148+
- 匯入時支援：
149+
- `.json` 陣列
150+
- `{ savedArticles: [...] }`
151+
- `.js` 的 `const posts = [...]` 或 `posts = [...]`
152+
153+
## 工作流程
154+
155+
```mermaid
156+
flowchart LR
157+
A[Threads 貼文頁] --> B[content.js 監看 embed 流程]
158+
B --> C[擷取 DOM / meta / dialog 資訊]
159+
C --> D[整理成 savedArticles 資料]
160+
D --> E[chrome.storage.local]
161+
E --> F[popup / dashboard 顯示與管理]
162+
F --> G[匯出 / 匯入 / 更新 / 批次維護]
163+
```
88164

89-
- **DOM 依賴**：`content.js` 依賴 Threads 目前的 DOM class 結構；若 Threads 更新版面，擷取邏輯需同步調整。
90-
- **效能考量**：批次更新透過 `chrome.scripting.executeScript` 逐一讀取貼文，資料量大時會增加瀏覽器負載，建議分批操作。
91-
- **Fallback 過濾**：`content.js` 與 `popup.js` 均含 fallback 文本過濾邏輯，防止 Threads 介面輔助文字被誤判為貼文內容。
92-
- **版本**：目前為 `v1.2.0`，使用 Manifest V3 規範。
165+
## 資料格式
93166

94-
***
167+
### 本機儲存的資料樣貌
95168

96-
## 匯出格式說明
169+
實際儲存在瀏覽器中的單筆資料大致如下：
97170

98-
### Embed Only JS
99171
```js
100-
const posts = [
101-
{ embedCode: '<blockquote class="text-post-media" ...' },
102-
...
103-
];
172+
{
173+
id: "embed_...",
174+
postLink: "https://www.threads.com/@user/post/xxx",
175+
embedCode: "<blockquote ...>",
176+
timestamp: "2026-05-29T00:00:00.000Z",
177+
timestampTitle: "2026年5月29日",
178+
savedAt: "2026-05-29T00:00:00.000Z",
179+
content: "貼文內文...",
180+
author: "@username",
181+
authorUrl: "https://www.threads.com/@username",
182+
tags: ["JavaScript", "React"],
183+
codeBlocks: [
184+
{
185+
type: "markdown_block",
186+
code: "console.log('hello')",
187+
language: "javascript",
188+
index: 1
189+
}
190+
],
191+
codeCount: 1,
192+
status: "active",
193+
expiredAt: "",
194+
expiredReason: "",
195+
expiredCheckedAt: ""
196+
}
104197
```
105198

106-
### Full Data JS
107-
```js
108-
const posts = [
109-
{
110-
embedCode: '...',
111-
postLink: 'https://www.threads.com/@user/post/xxx',
112-
author: '@username',
113-
content: '貼文內文...',
114-
timestamp: '2025-01-01T00:00:00Z',
115-
timestampTitle: '2025年1月1日',
116-
savedAt: '2025-01-02T00:00:00Z',
117-
tags: ['tag1', 'tag2'],
118-
status: 'active' // 或 'invalid'
119-
},
120-
...
121-
];
122-
```
199+
### 匯出的完整資料
200+
201+
完整匯出主要聚焦可攜性，欄位包含：
202+
203+
- `embedCode`
204+
- `postLink`
205+
- `author`
206+
- `content`
207+
- `timestamp`
208+
- `timestampTitle`
209+
- `savedAt`
210+
- `tags`
211+
- `status`
212+
- `expiredAt`
213+
- `expiredReason`
214+
- `expiredCheckedAt`
215+
216+
> `codeBlocks` 與 `codeCount` 會保留在本機資料中，方便介面排序與分析。
217+
218+
## 權限與隱私
219+
220+
| 權限 | 用途 |
221+
| --- | --- |
222+
| `storage` | 本機保存貼文與 embed 資料 |
223+
| `tabs` | 背景開啟 Threads 分頁以更新資料 |
224+
| `scripting` | 對 Threads 頁面注入擷取邏輯 |
225+
| `host_permissions` | 只存取 `threads.com` 與 `www.threads.com` |
226+
227+
- 本專案沒有伺服器端，也沒有把資料送到第三方服務
228+
- 你的資料只會留在本機瀏覽器裡
229+
- 若要搬機或重灌，請先匯出備份
230+
231+
## 開發與維護
232+
233+
- `content.js` 依賴 Threads 目前的 DOM 結構；Threads 改版後，選擇器可能要同步調整
234+
- `dashboard.js` 會透過背景分頁重新抓取貼文，資料量大時建議分批操作
235+
- 若按鈕或內容抓不到，先刷新 Threads 頁面，再重新載入擴充功能
236+
- 修改 `popup.html`、`popup.css`、`dashboard.html`、`dashboard.css` 或 `content.js` 後，記得在擴充功能頁面重新載入
237+
238+
### 常見問題
239+
240+
**Q：沒有看到儲存按鈕或無法儲存？**
241+
242+
- 確認目前在 `threads.com` 或 `www.threads.com`
243+
- 確認已登入 Threads
244+
- 重新載入擴充功能並刷新頁面
245+
246+
**Q：更新資料後被標成失效？**
247+
248+
- 這通常表示貼文被重新導向、刪除，或頁面只剩 fallback summary
249+
250+
**Q：匯入失敗？**
251+
252+
- 檔案格式可能不是支援的 `.json` / `.js`
253+
- `.js` 檔請使用 `posts = [...]` 或 `const posts = [...]`
254+
255+
**Q：Threads 改版後抓不到內容？**
256+
257+
- 這個專案高度依賴 Threads 的 DOM 與 aria/label 結構
258+
- 需要更新 `content.js` 與 `dashboard.js` 的選擇器
259+
260+
## 版本資訊
261+
262+
- 目前版本：`v1.2.0`
263+
- 擴充功能規範：Manifest V3
123264

124-
***
265+
## 免責聲明
125266

126-
> **免責聲明**：本擴充功能為非官方工具，與 Meta / Threads 無任何隸屬關係。Threads 的 DOM 結構隨時可能改變，導致擷取功能暫時失效，請留意版本更新。
267+
本擴充功能為非官方工具，與 Meta / Threads 無任何隸屬關係。Threads 的介面與 DOM 結構隨時可能變動，若擷取邏輯暫時失效，通常需要跟著 Threads 的更新調整選擇器。

‎popup.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ body {
5656
gap: 16px;
5757
padding: 16px 18px;
5858
background: rgba(255, 255, 255, 0.86);
59-
backdrop-filter: blur(14px);
6059
-webkit-backdrop-filter: blur(14px);
60+
backdrop-filter: blur(14px);
6161
border-bottom: 1px solid var(--border-color);
6262
box-shadow: var(--shadow-sm);
6363
}

‎styles.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
font-weight: 600;
1616
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
1717
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
18-
backdrop-filter: blur(12px);
1918
-webkit-backdrop-filter: blur(12px);
19+
backdrop-filter: blur(12px);
2020
}
2121

2222
.threads-save-btn:hover {
@@ -55,8 +55,9 @@
5555
animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
5656
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
5757
border: 1px solid rgba(37, 99, 235, 0.18);
58-
backdrop-filter: blur(12px);
5958
-webkit-backdrop-filter: blur(12px);
59+
backdrop-filter: blur(12px);
60+
6061
}
6162

6263
@keyframes slideIn {

0 commit comments

Comments
 (0)