Chrome擴(kuò)展『智慧駕培助手』開發(fā)心得

最近在駕校學(xué)習(xí),采用的是一種叫做『智慧駕培』的教學(xué)模式——學(xué)員可以在網(wǎng)站(蘇州智慧駕培管理系統(tǒng))上預(yù)約教練,然后一對一練車。預(yù)約的時(shí)候,可以選擇不同教練、不同時(shí)段,但要想預(yù)約到合適的教練和時(shí)段,就需要『搶』了。于是我想,如果有一個(gè)類似于搶火車票插件的東西來輔助預(yù)約,肯定事半功倍——這就是開發(fā)『智慧駕培助手』的初衷。

Chrome擴(kuò)展

首先,在本地『搶』是比較容易的,早期的搶火車票插件也是這個(gè)思路,所以做成瀏覽器擴(kuò)展的形式再好不過了——在前端操作,方便快捷。

瀏覽器擴(kuò)展,有Chrome的、Firefox的,甚至Edge的,等等。考慮到通用程度,Chrome擴(kuò)展無疑是最方便的。由于內(nèi)核相同的緣故,Chrome擴(kuò)展不作任何改動(dòng)即可適配一排國產(chǎn)瀏覽器——360極速瀏覽器、獵豹瀏覽器、搜狗瀏覽器、QQ瀏覽器、百度瀏覽器...

Chrome擴(kuò)展的開發(fā)文檔,推薦360極速瀏覽器擴(kuò)展開發(fā)文檔百度瀏覽器擴(kuò)展開發(fā)文檔,這兩個(gè)可以認(rèn)為是官方文檔的中文版,經(jīng)過他們整理后,也比官方文檔更好理解。當(dāng)然,追求最新、最權(quán)威的解釋,還得去找官方的。

如果有些前端基礎(chǔ),Chrome擴(kuò)展上手是很快的,畢竟它本質(zhì)上來說就是Web頁面。

系統(tǒng)預(yù)約頁面

系統(tǒng)預(yù)約頁面

系統(tǒng)預(yù)約頁面如上圖,橫排為教練,縱列為時(shí)段。每天20:00,系統(tǒng)會(huì)放出7天后的教練排班信息。如果某位教練的某個(gè)時(shí)段有排班,那對應(yīng)位置就會(huì)出現(xiàn)一個(gè)綠色的塊,點(diǎn)擊,確認(rèn),即可完成預(yù)約過程。

需要說明的是,一個(gè)白色格子代表一個(gè)小時(shí),但是練一次車一般是兩個(gè)小時(shí),所以一個(gè)綠色的塊一般會(huì)覆蓋兩個(gè)白色格子。

智慧駕培助手

最后寫出來是這樣的:

智慧駕培助手 - 首頁
智慧駕培助手 - 設(shè)置

在設(shè)置頁面,設(shè)置好預(yù)約日期、教練和時(shí)段,然后在首頁就可以開始預(yù)約了。

點(diǎn)擊『開始預(yù)約』按鈕后,插件會(huì)自動(dòng)刷新和監(jiān)測預(yù)約日期當(dāng)天的教練排班信息。新的教練排班信息放出后,插件會(huì)立即響應(yīng),自動(dòng)完成預(yù)約過程并通知提醒,然后自動(dòng)停止。當(dāng)然,如果設(shè)置的教練和時(shí)段,與系統(tǒng)中的教練排班信息沒有匹配的,插件也會(huì)提醒預(yù)約失敗。

技術(shù)細(xì)節(jié)

完整的項(xiàng)目結(jié)構(gòu)見下圖:

項(xiàng)目結(jié)構(gòu)

項(xiàng)目采用了Gulp作為前端構(gòu)建工具,gulpfile.js里有兩個(gè)關(guān)鍵任務(wù),分別對應(yīng)SCSS文件和JavaScript文件的處理。

// Styles
gulp.task('styles', function() {
    return sass('src/css/*.scss', {
            style: 'compressed'
        })
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({
            message: 'Styles task complete'
        }));
});

// Scripts
gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(notify({
            message: 'Scripts task complete'
        }));
});

Gulp引入到項(xiàng)目中,很多操作都可以自動(dòng)化了,開發(fā)效率大大提高。

項(xiàng)目也引入了jQueryBootstrap,在寫CSS樣式和DOM操作邏輯的時(shí)候省心不少。

在插件設(shè)置頁面,預(yù)約日期選項(xiàng)會(huì)貼心地提醒用戶幾天后是幾月幾日,這是借助Moment.js來實(shí)現(xiàn)的;教練名字輸入后也會(huì)進(jìn)行校驗(yàn),除了字符長度合適,還得是中文(少數(shù)民族和外國人就不考慮了)。

// popup.js
function isChinese(str) {
    var reg = /[^\u4e00-\u9fa5]/;
    if (reg.test(str)) return false;
    return true;
}

中文校驗(yàn)通過Unicode編碼來實(shí)現(xiàn),雖然比較粗糙,但區(qū)分中文和英文還是完全可以的。

關(guān)于第一教練、第二教練、第一時(shí)段和第二時(shí)段,中間也有一些邏輯,見下圖:

智慧駕培助手 - 幫助

設(shè)置完成后,通過Chrome存儲(chǔ)相關(guān)的API將數(shù)據(jù)保存在本地,比如保存預(yù)約日期:

// popup.js
chrome.storage.local.set({'reservationDate': reservation_date}, function() {
    // 后續(xù)操作
});

同時(shí),首頁也更新了,顯示的是設(shè)置之后的信息。

點(diǎn)擊『開始預(yù)約』按鈕后,插件會(huì)在特定頁面執(zhí)行相應(yīng)的腳本。

特定頁面是哪些頁面?manifest.json里有相應(yīng)的限制:

{
    "name": "智慧駕培助手",
    "version": "1.0",
    "description": "蘇州智慧駕培管理系統(tǒng)助手",
    ...
    "permissions": [
        "activeTab",
        "notifications",
        "storage",
        "http://zhjp.sz-its.cn/"
    ]
}

執(zhí)行什么腳本?popup.js里有相應(yīng)的邏輯:

chrome.tabs.executeScript(null, { file: 'lib/js/jquery.min.js' }, function() {
    chrome.tabs.executeScript(null, { file: 'dist/js/script.min.js' });
});

jQuery就不說了,$用起來實(shí)在方便。script.js是自己寫的,負(fù)責(zé)系統(tǒng)預(yù)約頁面的刷新、監(jiān)測以及預(yù)約操作。

具體的邏輯就不細(xì)說了,主要涉及DOM的查詢、修改和點(diǎn)擊事件的模擬等。

預(yù)約結(jié)果的提醒通過Chrome桌面通知相關(guān)的API來實(shí)現(xiàn)。

// popup.js
function showNotification(title, message) {
    var options = {
        type : "basic",
        title: title,
        message: message,
        iconUrl: "images/icon_48.png"
    };
    chrome.notifications.create("start", options, function(notId) {
        setTimeout(function() {
            chrome.notifications.clear(notId);
        }, 5000);
    });
}

Chrome擴(kuò)展『智慧駕培助手』的代碼已經(jīng)在GitHub上開源了——點(diǎn)此前往,歡迎學(xué)習(xí)交流。

個(gè)人技術(shù)博客 biebu.xin,原文鏈接——Chrome擴(kuò)展『智慧駕培助手』開發(fā)心得

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容