IndexDB + 碼雲 + 谷歌外掛 = ？

瀏覽器谷歌 · 發表 2018-09-13 10:17:32

摘要：能夠“極速”到達的筆記本，在需要的時候以最快速度開啟。書籤，即收藏網站。二.痛點以下痛點僅代表個人在哪記錄程式碼片段，以及其他它要記錄的文字？在做某個專案的過程中，如果想臨時記錄某個介面的返回值，欄位，或者隨手複製專案中一段沒看...

能夠“極速”到達的筆記本，在需要的時候以最快速度開啟。
書籤，即收藏網站。

二.痛點

以下痛點僅代表個人

在哪記錄程式碼片段，以及其他它要記錄的文字？

在做某個專案的過程中，如果想臨時記錄某個介面的返回值，欄位，或者隨手複製專案中一段沒看懂的程式碼，便於有空複習。

專案目錄如下：

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();
});
複製程式碼