整理 Kindle 標註、書簽和筆記從未如此簡單！ Kindle 標註管理應用 "Kindle Mate" 只支持 Windows，不支持 Mac。標註只是解析 我的剪貼 文本文件，配合 "FileReader" API，寫個 Chrome 擴展解析文本文件就好了。 <! more "Chrome ...
整理 Kindle 標註、書簽和筆記從未如此簡單！
Kindle 標註管理應用 Kindle Mate 只支持 Windows，不支持 Mac。標註只是解析我的剪貼文本文件，配合 FileReader API，寫個 Chrome 擴展解析文本文件就好了。
初始化項目
安裝 React 腳手架 create-react-app
npm i -g create-react-app初始化項目
create-react-app my-clippings --typescript--typescript 表示使用 typescript。強烈推薦使用 ts，Vue 3.x 使用 ts 重寫，Angular 2.x+ 只能使用 ts，ts 是大勢所趨。
刪除 src/serviceWorker.ts 文件，用不著。
支持 Sass
安裝 node-sass 即可。
若要支持 css modules，文件名從 index.scss 改為 index.module.scss 即可。
npm i -D node-sass讀取文件
讀取的文件是 Kindle 中的 /documents/My Clippings.txt 文件，Kindle 設置任何語言都是這個文件。只不過在不同語言下的顯示不一樣。
使用 FileReader API 可以輕鬆讀取文本文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="file" accept=".txt" id="file-upload" />
<script>
const dom = document.querySelector("#file-upload");
dom.onchange = function(event) {
const file = event.currentTarget.files[0];
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
const temp = reader.result;
console.log(temp);
};
};
</script>
</body>
</html>解析文本
要解析的文本為下麵的格式，使用簡單的正則表達式即可解析。
根據 Kindle 設置的語言，中文與英文的格式會稍有不同，需要做不同的解析。
==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1882-1884的標註 | 添加於 2019年6月2日星期日 上午10:07:30
古希臘哲學家在2500年以前就說過，人常常以自己的形象塑造上帝。現在，電視政治又添了新招：那些想當上帝的人把自己塑造成觀眾期望的形象。
==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1925-1927的標註 | 添加於 2019年6月2日星期日 上午10:11:09
歷史的消失根本不需要如此殘酷的手段，錶面溫和的現代技術通過為民眾提供一種政治形象、瞬間快樂和安慰療法，能夠同樣有效地讓歷史銷聲匿跡，也許還更恆久，並且不會遭到任何反對。
==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1961-1963的標註 | 添加於 2019年6月2日星期日 上午10:14:42
自由不是靠關掉電視實現的。電視對於大多數人來說，是生活中最有吸引力的東西。我們生活在一個絕大多數人不會關掉電視的世界里。如果我們不直接從電視得到某種信息，我們也會通過其他人得到它。
==========配置 manifest.json
發佈 Chrome 應用需要配置 manifest.json 。
更多設置可以查看開發文檔
{
"name": "My Clippings", // 擴展名
"short_name": "Clippings",
"description": "Organizing your Kindle Highlight、Bookmark and Notes so easy.", // 描述
"version": "0.0.6", // 版本號，每次提交到 chrome 應用中心
"version_name": "0.0.6",
"manifest_version": 2,
"author": "Steve Xu",
"browser_action": {
// 點擊應用圖標的操作
"default_icon": "icon-48.png",
"default_title": "My Clippings"
},
"homepage_url": "https://github.com/nusr/my-clippings",
"offline_enabled": true, // 允許離線運行
"permissions": ["activeTab", "tabs", "storage"], // 使用的 chrome 許可權
"icons": {
// 圖標
"16": "icon-16.png",
"32": "icon-32.png",
"48": "icon-48.png",
"64": "icon-64.png",
"128": "icon-128.png",
"200": "icon-200.png"
},
"content_security_policy": "script-src 'self'; object-src 'self';", // 允許載入的文件
"background": {
"scripts": ["background.js"], // 外部運行的 js
"persistent": false
}
}// background.js
// 點擊擴展圖標，打開新的 Tag 頁面
function activeNewTab() {
var chrome = window.chrome;
if (!chrome) {
return;
}
chrome.browserAction.onClicked.addListener(function() {
var url = chrome.extension.getURL("index.html");
if (window.tabId) {
chrome.tabs.update(window.tabId, { selected: true });
} else {
chrome.tabs.create({ url: url }, function(tab) {
window.tabId = tab.id;
});
}
});
chrome.tabs.onRemoved.addListener(function(tabId) {
if (tabId === window.tabId) {
window.tabId = null;
}
});
}
activeNewTab();上傳到 Chrome 網上應用商店
Chrome 網上應用商店上傳地址是 https://chrome.google.com/webstore/developer/dashboard。
上傳應用需要支付 5 美元的開發者費用。對於沒有信用卡的人來說，淘寶可以找到相關代付途徑，或者尋求朋友幫助。
支付完成就可以上傳應用了，一個賬號最多上傳 20 個應用。
