IndexDB + 碼雲 + 谷歌外掛 = ?
- 能夠“極速”到達的筆記本,在需要的時候以最快速度開啟。
- 書籤,即收藏網站。
二.痛點
以下痛點僅代表個人
- 在哪記錄程式碼片段,以及其他它要記錄的文字?
在做某個專案的過程中,如果想臨時記錄某個介面的返回值,欄位,或者隨手複製專案中一段沒看懂的程式碼,便於有空複習。
專案目錄如下:
dist/ src/ .gitignore index.html package.json webpack.config.js 複製程式碼
即專案中的目錄都是有意義的。通常我這樣做:
- 在專案中臨時新建一個檔案記錄,那務必記得在 git 提交之前刪除 。畢竟是公司專案,新建一個‘私人’的檔案不太合適。
- 本地電腦某個資料夾用作自己的筆記本,要記錄時開啟編輯器進行記錄。缺點是 ,除了專案本身的編輯器,還得額外開一個編輯器做筆記,同時第二天要看筆記的時候得用編輯器再次開啟筆記本。
- 如何收藏網站?
谷歌瀏覽器書籤收藏,谷歌瀏覽器登入後支援書籤同步,之後更換電腦重灌系統都能找回原有的書籤。
- 沒有梯子時登入不了谷歌賬戶,以往收藏的網站就都沒了。當然可以將書籤匯出成檔案,需要的時候再將檔案還原為書籤。
- 使用火狐瀏覽器,火狐不用梯子也能登入,能匯出書籤並還原。僅有的缺點是,它不是Chrome瀏覽器 。
三.尋找解決方案
要求:
- 要能做筆記,筆記持久化儲存。
- 不能破壞原有專案結構。
- 不開啟額外軟體。
- 筆記頁面‘快速’到達。
- 收藏的網站書籤持久化儲存,‘快速’到達。
分析
-
瀏覽器算是前端開發中保持開啟的軟體,如果以網頁 tab 的形式開啟筆記進行編輯,不會覺得是額外的操作。
-
目前有很多線上的優秀筆記工具,例如印象筆記等,提供記錄編輯功能。
-
掘金Chrome外掛,重寫瀏覽器new tab頁面,在瀏覽器新建標籤頁時最高效的獲取使用者注意。
-
IndexedDB,Chrome 中的資料庫,可用於儲存資料。
-
碼雲提供免費的靜態資源託管服務。
結論
- 寫個編輯器網頁MarkNote ,頁面中能進行文字的編輯書寫,利用 IndexedDB 進行資料的儲存,下次開啟頁面時將儲存的資料顯示在頁面上。
- 將編輯器網頁託管到碼雲上,寫個Chrome外掛,利用外掛將碼雲上的編輯器網頁 繫結到瀏覽器右鍵選單,即可通過在任意網頁上右鍵開啟編輯器網頁 進行記錄筆記。
- 在碼雲中新建config.json檔案 儲存自己常用網站資訊,利用外掛重寫瀏覽器的新建標籤頁 ,在標籤頁中請求config.json檔案 獲得書籤資訊生成屬於自己的網站導航
四.如何實現
4.1 谷歌外掛實現
4.1.1 目錄結構
_locales/ html/ css/ newtab.css js/ jquery.js background.js newtab.js newtab.html background.html manifest.json 複製程式碼
4.1.2 manifest.json配置檔案核心
{ "manifest_version": 2, "name": "工作筆記", "version": "1.0.0", "description": "工作筆記谷歌外掛", "homepage_url": "https://yesiam.gitee.io/marknote/", // 外掛首頁地址 "chrome_url_overrides": { "newtab": "./html/newtab.html"// 重寫 新建標籤頁為 "./html/newtab.html" }, "background": { "page": "./html/background.html"// 在該頁面編寫指令碼 新增右鍵選單 }, "permissions": [// 許可權申請 "contextMenus", "tabs", "notifications", "webRequest", "webRequestBlocking", "storage", "http://*/*", "https://*/*" ], "default_locale": "zh_CN" } 複製程式碼
4.1.3 newtab 新建標籤頁實現
newtab.html
<link rel="stylesheet" href="./css/newtab.css"> <title>工作筆記</title> <body> <div id="main"> </div> <script src="./js/jquery.js"></script> <script src="./js/newtab.js"></script> </body> 複製程式碼
newtab.js
function Tab(data){ this.data = data.newtab; this.parent = '#main'; } Tab.prototype.init = function(){ let str = ""; for(const part of this.data){ let label = part.label; let urls = part.urls; str += `<div class="container"> <p class="label">${label}</p>`; for(const i of urls){ str += `<a class="item" href="${i.url}">${i.title}</a>` } str += `</div>`; } $(this.parent).html(str); } $(function(){ var CONFIG_URL = 'https://yesiam.gitee.io/config/***.json';// 配置檔案 $.ajax({ type:'get', url:CONFIG_URL, dataType:'json', success:function(data){ var tab = new Tab(data); tab.init(); }, error:function(xhr,err){ console.log(err); } }) }) 複製程式碼
配置檔案示例ofollow,noindex">yesiam.gitee.io/config/***.…
{ "newtab":[ { "label":"與我有關", "urls":[ { "title":"Github", "url":"https://github.com/yes1am" }, { "title":"碼雲", "url":"https://gitee.com/yesiam" } ] }, { "label":"常用網站", "urls":[ { "title":"掘金", "url":"https://e.xitu.io" } ] } ] } 複製程式碼
4.1.4 右鍵選單實現
background.js
var MarkNoteUrl = "https://yesiam.gitee.io/marknote/"; chrome.contextMenus.create({ title: "工作筆記", onclick: function(){ chrome.tabs.create({url: MarkNoteUrl}); } }); 複製程式碼
4.2 MarkNote專案 核心為Editor.md庫
var IndexDb = function(databaseName,tableName){ this.databaseName = databaseName || "ChromeNotes"; this.tableName = tableName || "notes"; this.db = null; this.table = null; this.hasData = false;// 判斷當前是否有資料 this.id = "1"; this.editor = null; } IndexDb.prototype.init = function(){ var that = this; var request = window.indexedDB.open(this.databaseName,1); request.onsuccess = function(event){ that.db = request.result; that.read(); } request.onerror = function(event){ console.log("資料庫開啟失敗"); } // 下面事情執行於:資料庫首次建立版本,或者window.indexedDB.open傳遞的新版本(版本數值要比現在的高) request.onupgradeneeded = function(event) { that.db = event.target.result; that.db.onerror = function(){ console.log("資料庫開啟失敗"); } // 建立表 that.table = that.db.createObjectStore(that.tableName, {keyPath: 'id', autoIncrement: true}); // 表結構 必須顯式申明所有的結構 that.table.createIndex('id', 'id', { unique: true }); that.table.createIndex('text', 'text'); } } // 新增資料 IndexDb.prototype.add = function(data){ var that = this; if(this.hasData){ return this.edit(data); } var transaction = this.db.transaction([this.tableName], 'readwrite');// 事務 var objectStore = transaction.objectStore(this.tableName); var objectStoreRequest = objectStore.add({'id':this.id, text:data}); objectStoreRequest.onsuccess = function (event) { showMsg('儲存成功'); that.hasData = true; }; objectStoreRequest.onerror = function (event) { showMsg('儲存失敗'); } } // 讀取資料 IndexDb.prototype.read = function(){ var that = this; var transaction = this.db.transaction([this.tableName], 'readwrite'); var objectStore = transaction.objectStore(this.tableName); var objectStoreRequest = objectStore.get(this.id); objectStoreRequest.onsuccess = function (event) { if (objectStoreRequest.result) { console.log('儲存資料為: ' +objectStoreRequest.result.id + " : " + objectStoreRequest.result.text); that.hasData = true; showMsg('載入成功'); that.createMarkdown(objectStoreRequest.result.text); } else { showMsg('暫無資料'); that.createMarkdown(""); } }; objectStoreRequest.onerror = function (event) { console.log('資料讀取失敗'); } } // 更新資料 IndexDb.prototype.edit = function(data){ var transaction = this.db.transaction([this.tableName], 'readwrite'); var objectStore = transaction.objectStore(this.tableName); var objectStoreRequest = objectStore.put({ id: this.id,text:data}); objectStoreRequest.onsuccess = function (event) { showMsg('儲存成功'); // console.log('資料更新成功'); }; objectStoreRequest.onerror = function (event) { console.log('資料更新失敗'); } } // 刪除資料 IndexDb.prototype.delete = function(){ var transaction = this.db.transaction([this.tableName], 'readwrite');// 事務 var objectStore = transaction.objectStore(this.tableName); var objectStoreRequest = objectStore.delete(this.id); objectStoreRequest.onsuccess = function (event) { console.log('資料刪除成功'); }; } // 生成markdown IndexDb.prototype.createMarkdown = function(md){ var that = this; this.editor = editormd("editormd", { path : './lib/', width:"90%", height:"720px", editorTheme:"mdn-like", toolbarIcons : function() { return [ "undo", "redo", "|","watch", "preview" ] }, saveHTMLToTextarea : true, appendMarkdown:md, onload:function(){ var keyMap = { "Ctrl-S": function() { var data = that.editor.getMarkdown(); that.add(data) } }; that.editor.addKeyMap(keyMap); showMsg("初始化成功"); } }); } $(function() { var indexdb = new IndexDb(); indexdb.init(); }); 複製程式碼