Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  


Search found 7 matches for firefox

[Userscript] TruyenYY downloader - 09.08.16 14:25

Tải truyện từ TruyenYY.com định dạng htm. Sau đó, bạn có thể dùng Mobipocket Creator để tạo ebook prc.


Demo


Topics tagged under firefox on Zzbaivong forumvi Truyen12
Tải truyện từ TruyenYY


Cài đặt


Dùng một trong các link sau:

  1. https://greasyfork.org/vi/scripts/17827-truyenyy-downloader
  2. https://openuserjs.org/scripts/baivong/TruyenYY_downloader
  3. https://github.com/baivong/Userscript/raw/master/truyenYY_downloader/truyenYY_downloader.user.js


Mã nguồn


Code:
// ==UserScript==
// @id           truyenyy-downloader@devs.forumvi.com
// @name         TruyenYY downloader
// @namespace    http://devs.forumvi.com/
// @description  Tải truyện từ truyenyy.com định dạng html. Sau đó, bạn có thể dùng Mobipocket Creator để tạo ebook prc
// @version      1.1.6
// @icon         http://i.imgur.com/obHcq8v.png
// @author       Zzbaivong
// @license      MIT
// @match        http://truyenyy.com/truyen/*
// @match        https://truyenyy.com/truyen/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js
// @require      https://greasyfork.org/scripts/18532-filesaver/code/FileSaver.js?version=117790
// @noframes
// @connect      truyenyy.com
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function ($, window, document, undefined) {

    'use strict';

    function downloadFail(url) {

        console.log('%cError: ' + url, 'color:red;');
        $download.html('<i class="icon-repeat icon-white"></i> Resume...').css('background', 'red');
        disableClick = false;

        setTimeout(function() {
            $download.trigger('click');
        }, 120000);

    }

    function getChapter() {

        var fileName = path.slice(1, -1) + '_' + begin + '-' + end + '.htm',
            blob;

        if (count > max) {

            txt = '<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><h1><font color="red">' + $('h1').text() + '</font></h1><h3><font color="blue">' + $('.lww p:eq(0)').text() + '</font></h3><h3><font color="green">' + $('.lww p:eq(1)').text() + '</font></h3><h3><font color="gray">Tổng số chương: ' + (end - begin + 1) + '</font></h3><br><br>' + credits + '<br><br><br>' + txt + '</body></html>';

            blob = new Blob([txt], {
                type: 'text/html'
            });

            $download.attr({
                href: window.URL.createObjectURL(blob),
                download: fileName
            }).html('<i class="icon-ok icon-white"></i> Download Finished!').css('background', 'green').off('click');

            $(window).off('beforeunload');

            console.log('%cDownload Finished!', 'color:blue;');

            saveAs(blob, fileName);

        } else {

            url = path.replace('/truyen/', '/doc-truyen/') + 'chuong-' + count;

            GM_xmlhttpRequest({
                method: 'GET',
                url: url,
                onload: function (response) {

                    var $data = $(response.response),
                        title = $data.find('h1').text(),
                        $chapter = $data.find('#id_noidung_chuong');

                    if ($chapter.length && title !== 'Chương thứ yyy: Ra đảo') {

                        console.log('%cComplete: ' + url, 'color:green;');
                        $download.html('<i class="icon-refresh icon-white"></i> ' + count + '/' + max).css('background', 'orange');

                        $chapter.find('span').remove();
                        txt += '<h2 class="title">' + title + '</h2>' + $chapter.html();

                        ++count;
                        getChapter();

                    } else {
                        downloadFail(url);
                    }

                },
                onerror: function (err) {

                    downloadFail(url);
                    console.error(err);

                }
            });

        }

    }


    var $download = $('[href="#dschuong"]'),
        count = 1,
        max = parseInt($('.ip5').first().find('a').attr('href').match(/\/chuong-(\d+)\/$/)[1], 10),
        begin,
        end,
        txt = '',
        enablePrompt = true,
        disableClick = false,
        path = location.pathname,
        url,
        credits = '<p>Truyện được tải từ: TruyenYY - http://truyenyy.com</p><p>Userscript được viết bởi: Zzbaivong - http://devs.forumvi.com</p>';

    window.URL = window.URL || window.webkitURL;

    $download.html('<i class="icon-download icon-white"></i> Download').css('background', 'orange').on('click', function (e) {

        e.preventDefault();

        if (disableClick) {
            return;
        }

        if (enablePrompt) {

            begin = prompt('Chọn Chương bắt đầu tải', count);
            end = prompt('Chọn Chương kết thúc tải', max);

            if (begin !== null && /^\d+$/.test(begin)) {
                begin = parseInt(begin, 10);
                count = begin;
            } else {
                begin = count;
            }

            if (end !== null && /^\d+$/.test(end)) {
                end = parseInt(end, 10);
                if (end > count) {
                    max = end;
                } else {
                    max = count;
                    end = count;
                }
            } else {
                end = max;
            }

            $(window).on('beforeunload', function () {
                return 'Truyện đang được tải xuống...';
            });

            enablePrompt = false;

        }

        getChapter();

        disableClick = true;

    });

})(jQuery, window, document);



Hướng dẫn


Tải truyện


Script hoạt động sẽ tạo ra nút Download tại trang giới thiệu truyện. Click vào để tải truyện xuống. Bạn cũng có thể theo dõi quá trình trong Console (F12 > console), nếu chương truyện lỗi sẽ hiện link màu đỏ.
Khi quá trình tải hoàn tất, định dạng file tải xuống là ten-truyen.htm.

Tạo Ebook


Tải phần mềm Mobipocket Creator.
Sau khi cài đặt, chạy Mobipocket Creator, trong mục Import From Exiting File, nhấp vào HTML document.

Tại trang Import from HTML document:

  1. Choose a file: Nhấn Browse..., chọn file truyện bạn vừa tải trước đó.
  2. Create publication in folder: Đây là vị trí chứa ebook sau khi tạo, nên để mặc định.
  3. Language: Chọn Vietnamese.
  4. Encoding: Chọn UTF-8.

Nhấn nút Import.

Để tạo mục lục cho các chương truyện, chọn mục Table of contents, nhấn nút Add a Table of contents.
Bạn điền vào 3 ô trên dòng First level lần lượt là:

  1. Tagname: h2
  2. Attribute: class
  3. Value: title

Nhấn nút Update.

Đến đây bạn đã hoàn thành những việc cần thiết để tạo Ebook, Nhấn menu Build(F7) ở phía trên, sau đó chọn nút Build ở trang hiện ra để tạo Ebook định dạng prc. File này sẽ được lưu ở thư mục bạn chọn ở Create publication in folder. Trong thư mục này còn chứa một số file cấu hình khác, bạn có thể xóa chúng đi.
Nếu muốn chỉnh Ebook chi tiết hơn, trước khi build, bạn có thể điều chỉnh 2 mục Conver ImageMetadata. Nhớ nhấn nút Update sau khi điều chỉnh.


Chú ý


Nếu cần chuyển đổi sang định dạng khác như .epub, .mobi, ... để đọc trên điện thoại, máy đọc sách, ... bạn có thể dùng công cụ trực tuyến như ToePub, Zamzar. Hoặc, dùng phần mềm Calibre, Hamster ebook converter.

Trang TruyenYY tự động chặn mỗi khi download ~20 chương trong 2 phút (xuất hiện nút Resume...) với lý do: Xem truyện quá nhanh.
Bạn không cần lo lắng, sau 2 phút, script sẽ tự động tải tiếp.
Vì lý do đó nên quá trình tải sẽ khá chậm, nếu như truyện bạn cần cũng có trên TruyenCV thì bạn nên tải bên đó, dùng script TruyenCV downloader.


Credits


  1. Eligrey

Tags: #firefox #userscript #chromium #download #ebook #truyenyy

[Userscript] TruyenCV downloader - 09.08.16 14:24

Tải truyện từ TruyenCV.com định dạng htm. Sau đó, bạn có thể dùng Mobipocket Creator để tạo ebook prc.


Demo


Topics tagged under firefox on Zzbaivong forumvi Truyen10
Tải truyện từ TruyenCV


Cài đặt


Dùng một trong các link sau:

  1. https://greasyfork.org/vi/scripts/17826-truyencv-downloader
  2. https://openuserjs.org/scripts/baivong/TruyenCV_downloader
  3. https://github.com/baivong/Userscript/raw/master/truyenCV_downloader/truyenCV_downloader.user.js


Mã nguồn


Code:
// ==UserScript==
// @id           truyencv-downloader@devs.forumvi.com
// @name         TruyenCV downloader
// @namespace    http://devs.forumvi.com/
// @description  Tải truyện từ truyencv.com định dạng html. Sau đó, bạn có thể dùng Mobipocket Creator để tạo ebook prc
// @version      1.1.7
// @icon         http://i.imgur.com/o5cmtkU.png
// @author       Zzbaivong
// @license      MIT
// @icon         http://truyencv.com/templates/truyencv/images/logo.png
// @match        http://truyencv.com/*/
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js
// @require      https://greasyfork.org/scripts/18532-filesaver/code/FileSaver.js?version=117790
// @noframes
// @connect      truyencv.com
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function ($, window, document, undefined) {

    'use strict';

    function downloadFail(url) {

        console.log('%cError: ' + url, 'color:red;');
        $download.text('Resume...').css('background', 'red');
        disableClick = false;

    }

    function downloadComplete() {

        var skipSize = skip.length,
            blob,
            fileName = path.slice(1, -1) + '_' + begin + '-' + end + '.htm';

        txt = '<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><h1><font color="red">' + $('h1').text() + '</font></h1><h3><font color="blue">' + $('#poster p:eq(3)').text() + '</font></h3><h3><font color="green">' + $('#poster p:eq(4)').text() + '</font></h3><h3><font color="gray">Tổng số chương: ' + (end - begin - skipSize + 1) + '</font></h3><br><br>' + credits + '<br><br><br>' + txt + '</body></html>';

        blob = new Blob([txt], {
            type: 'text/html'
        });

        $download.attr({
            href: window.URL.createObjectURL(blob),
            download: fileName
        }).text('Download Finished!').css('background', 'green').off('click');

        if (skipSize) {
            console.log('%cLinks skipped: ' + skip.join(','), 'color:orange;');
        }

        console.log('%cDownload Finished!', 'color:blue;');

        saveAs(blob, fileName);

    }

    function getChapter() {

        if (count > max) {

            if (complete) {
                downloadComplete();
            } else {

                enablePrompt = true;
                disableClick = false;
                $download.text('Nothing!').css('background', 'red');
                console.log('%cNothing!', 'color:red;');

            }

            $(window).off('beforeunload');

        } else {

            url = path + 'chuong-' + count;

            GM_xmlhttpRequest({
                method: 'GET',
                url: url,
                onload: function (response) {

                    var $data = $(response.responseText),
                        title = $data.find('h2.text-muted').html(),
                        $chapter = $data.find('.chapter');

                    if ($chapter.length) {

                        $download.text(count + '/' + max).css('background', 'orange');

                        if (response.finalUrl.slice(-8) === '/chuong/') {

                            $download.css('background', 'black');
                            console.log('%cSkip: ' + url, 'color:orange;');
                            skip.push(count);
                            ++count;
                            getChapter();
                            return;

                        }

                        console.log('%cComplete: ' + url, 'color:green;');
                        ++count;
                        ++complete;

                    } else {
                        downloadFail(url);
                    }

                    $chapter.find('font, p:last').remove();
                    txt += '<h2 class="title">' + title + '</h2>' + $chapter.html();

                    getChapter();

                },
                onerror: function (err) {

                    downloadFail(url);
                    console.error(err);

                }
            });

        }

    }


    var $download = $('[href="#dsc"]'),
        count = 1,
        max = parseInt($('.listchapter').eq($('.listchapter').length - 2).find('.latestchaper').eq(0).find('a').attr('href').match(/chuong-(\d+)/)[1], 10),
        begin,
        end,
        skip = [],
        txt = '',
        enablePrompt = true,
        disableClick = false,
        complete = 0,
        path = location.pathname,
        url,
        credits = '<p>Truyện được tải từ: TruyenCV - http://truyencv.com</p><p>Userscript được viết bởi: Zzbaivong - http://devs.forumvi.com</p>';

    window.URL = window.URL || window.webkitURL;

    $download.text('Download').css('background', 'orange').on('click', function (e) {

        e.preventDefault();

        if (disableClick) {
            return;
        }

        if (enablePrompt) {

            begin = prompt('Chọn Chương bắt đầu tải', count);
            end = prompt('Chọn Chương kết thúc tải', max);

            if (begin !== null && /^\d+$/.test(begin)) {
                begin = parseInt(begin, 10);
                count = begin;
            } else {
                begin = count;
            }

            if (end !== null && /^\d+$/.test(end)) {
                end = parseInt(end, 10);
                if (end > count) {
                    max = end;
                } else {
                    max = count;
                    end = count;
                }
            } else {
                end = max;
            }

            $(window).on('beforeunload', function () {
                return 'Truyện đang được tải xuống...';
            });

            enablePrompt = false;

        }

        getChapter();

        disableClick = true;

    });

})(jQuery, window, document);



Hướng dẫn


Tải truyện


Script hoạt động sẽ tạo ra nút Download tại trang giới thiệu truyện. Click vào để tải truyện xuống. Bạn cũng có thể theo dõi quá trình trong Console (F12 > console), nếu chương truyện lỗi sẽ hiện link màu đỏ.
Khi quá trình tải hoàn tất, định dạng file tải xuống là ten-truyen.htm.

Tạo Ebook


Tải phần mềm Mobipocket Creator.
Sau khi cài đặt, chạy Mobipocket Creator, trong mục Import From Exiting File, nhấp vào HTML document.

Tại trang Import from HTML document:

  1. Choose a file: Nhấn Browse..., chọn file truyện bạn vừa tải trước đó.
  2. Create publication in folder: Đây là vị trí chứa ebook sau khi tạo, nên để mặc định.
  3. Language: Chọn Vietnamese.
  4. Encoding: Chọn UTF-8.

Nhấn nút Import.

Để tạo mục lục cho các chương truyện, chọn mục Table of contents, nhấn nút Add a Table of contents.
Bạn điền vào 3 ô trên dòng First level lần lượt là:

  1. Tagname: h2
  2. Attribute: class
  3. Value: title

Nhấn nút Update.

Đến đây bạn đã hoàn thành những việc cần thiết để tạo Ebook, Nhấn menu Build(F7) ở phía trên, sau đó chọn nút Build ở trang hiện ra để tạo Ebook định dạng prc. File này sẽ được lưu ở thư mục bạn chọn ở Create publication in folder. Trong thư mục này còn chứa một số file cấu hình khác, bạn có thể xóa chúng đi.
Nếu muốn chỉnh Ebook chi tiết hơn, trước khi build, bạn có thể điều chỉnh 2 mục Conver ImageMetadata. Nhớ nhấn nút Update sau khi điều chỉnh.


Chú ý


Nếu cần chuyển đổi sang định dạng khác như .epub, .mobi, ... để đọc trên điện thoại, máy đọc sách, ... bạn có thể dùng công cụ trực tuyến như ToePub, Zamzar. Hoặc, dùng phần mềm Calibre, Hamster ebook converter.
Trang TruyenCV hầu hết là truyện convert do thành viên đóng góp, nhiều truyện hơi khó đọc nếu chưa quen. Bạn có thể tìm bên TruyenYY, dùng script TruyenYY downloader.


Credits


  1. Eligrey

Tags: #firefox #userscript #chromium #truyencv #download #ebook

[Userscript] Image viewer - Hỗ trợ xem ảnh có nền trong suốt và ảnh lớn - 09.08.16 14:23

Userscript này sẽ thay nền xem ảnh dạng lưới, tác dụng của nó thể hiện rõ nhất khi xem ảnh trong suốt. Đối với ảnh lớn, script này hỗ trợ bạn cuộn ảnh thuận tiện hơn bằng cách giữ chuột phải và kéo.


Demo


Topics tagged under firefox on Zzbaivong forumvi YOBYNp4
Hiển thị rõ phần trong suốt của ảnh


Cài đặt


Dùng một trong các liên kết sau:

  1. https://openuserjs.org/scripts/baivong/Image_viewer
  2. https://greasyfork.org/vi/scripts/16113-image-viewer
  3. https://github.com/baivong/Userscript/raw/master/image_viewer/Image_viewer.user.js


Mã nguồn


Code:
// ==UserScript==
// @id           image-viewer@devs.forumvi.com
// @name         Image viewer
// @namespace    http://devs.forumvi.com/
// @description  Use grid wallpaper to highlight transparent image. Support to see the large image by holding the right mouse and drag.
// @version      1.0.5
// @icon         http://i.imgur.com/ItcjCPc.png
// @author       Zzbaivong
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @noframes
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_addStyle
// ==/UserScript==

(function () {

    'use strict';

    var theme = 'light', // dark|light

        url,
        doc = document;

    if (theme === 'light') {
        url = 'data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==';
    } else {
        url = 'data:image/gif;base64,R0lGODlhCgAKAPAAACIiIgAAACH5BAHoAwEALAAAAAAKAAoAAAIRjA2Zhwoc3GMSykqd1VltzxQAOw==';
    }

    function scrollByDragging(container, disableH, disableV) {

        function mouseUp(e) {
            if (e.which !== 3) return;

            window.removeEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'default';
        }

        function mouseDown(e) {
            if (e.which !== 3) return;

            pos = {
                x: e.clientX,
                y: e.clientY
            };

            window.addEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'move';
        }

        function mouseMove(e) {
            if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
            if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
        }

        var pos = {
            x: 0,
            y: 0
        };

        container.oncontextmenu = function (e) {
            e.preventDefault();
        };

        container.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

    }

    if (document.contentType.indexOf('image/') === 0) {

        GM_addStyle('body{background:url(' + url + ') repeat scroll rgba(0, 0, 0, 0.3);} body > img {background-color: transparent !important; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;} body > img:hover {background: rgba(0, 0, 0, 0.4) !important; outline: 3px solid #333;} body > img[style*="cursor: zoom-out;"], body > img.overflowing {position: relative!important;}');

        scrollByDragging(doc.body);
        scrollByDragging(doc.documentElement);

    }

}());




Ứng dụng xem ảnh trong forumotion

Demo: http://devs.forumvi.com/viewimage.forum?u=https://i.imgur.com/Yfl5NFO.gif

Thêm vào CSS:
Code:
/* Image viewer - devs.forumvi.com */
p + center > a[href="javascript:window.close()"]{display:block;padding:15px;background:url('data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==') repeat scroll #dddddd;}
p + center > a[href="javascript:window.close()"] img{border:1px solid transparent}
p + center > a[href="javascript:window.close()"] img:hover{border:1px dotted #c0c0c0;background-color:rgba(0,0,0,0.05)}



Credit


Zzbaivong
Tags: #firefox #userscript #photo #viewer #chromium

[TUTs] Tạo Push Notification với OneSignal - 09.08.16 14:13

Push Notification (thông báo đẩy) đang được ưa chuộng ở nhiều trang web hiện đại, nhằm gửi thông báo quan trọng đến người dùng, ngay trên trình duyệt của họ.

Hình thức gửi thông báo này có phần tương tự API HTML5 Notification trước đây, nhưng tối ưu hơn ở điểm có thể gửi thông báo ngay cả khi người dùng không mở trang web. Và nó cũng thân thiện với người dùng hơn so với hình thức gửi Email vì nội dung sẽ hiển thị ngay khi mở trình duyệt và họ có thể dừng nhận tin bất kỳ lúc nào.

Để ứng dụng công nghệ Push Notification thì trang web của bạn phải được bật SSL (HTTPS), và cấu hình server khá rắc rối. Nếu làm thế thì Forumotion xem như vô vọng rồi. Vì vậy, chúng ta sẽ dùng một dịch vụ trong gian là OneSignal để gửi thông báo. Có nhiều dịch vụ tương tự bao gồm miễn phí và trả phí, có cả từ Việt Nam nữa, nhưng mình chọn OneSignal vì nó cho phép tùy biến tốt hơn và hoàn toàn miễn phí.


Demo


Topics tagged under firefox on Zzbaivong forumvi 2110
Giao diện quản lý và cách thông báo hiển thị


Hướng dẫn cài đặt


Vì bài viết chứa rất nhiều hình ảnh nên mình sẽ chỉ để hình thu nhỏ, các bạn đọc hướng dẫn khó hiểu thì nhấn vào đó để xem hình gốc.

Bước 1


Mở trang OneSignal.com, nhấn vào nút Sign up free để đăng ký tài khoản.

Topics tagged under firefox on Zzbaivong forumvi 110

Bạn có thể dùng tài khoản Github, Facebook có sẵn, hoặc dùng Email của bạn.
Trong mục Company or Organization Name, hãy nhập tên diễn đàn của bạn.

Bước 2


Sau khi đăng ký thành công, đăng nhập vào trang quản lý, lúc này bạn chưa có ứng dụng nào được tạo.

Topics tagged under firefox on Zzbaivong forumvi 210

Nhấn Add a new app để tạo ứng dụng mới.
Trong mục App name, điền tên diễn đàn của bạn.
Nhất Create để tạo ứng dụng.

Bước 3


Chọn nền tảng cho ứng dụng vừa tạo.

Topics tagged under firefox on Zzbaivong forumvi 310

Chọn Website Push, vì diễn đàn cũng Forumotion thuộc kiểu trang web.
Nhấn Next để tiếp tục.

Bước 4


Chọn nền tảng để cấu hình.

Topics tagged under firefox on Zzbaivong forumvi 410

Chọn Google Chrome & Mozilla Firefox để cấu hình trước. Nếu bạn nào sử dụng Mac thì cấu hình Safari trước cũng được.
Nhấn Next để tiếp tục.

Bước 5


Cấu hình cho Google Chrome và Mozilla Firefox.

Để thực hiện được bước này, bạn phải có Server API KeySender ID.

Hướng dẫn tạo Server API Key và Sender ID:


Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.

Topics tagged under firefox on Zzbaivong forumvi 510

Site URL: Điền URL diễn đàn của bạn. Ví dụ:
Code:
http://devs.forumvi.com

Google Server API Key: Điền Server API Key của ứng dụng bạn tạo trên Google Services Wizard.
Default Notification Icon URL: Điền URL icon, kích thước tối thiểu 192 x 192 px. Bạn nên dùng logo của diễn đàn, nếu không, có thể dùng URL sau:
Code:
http://i.imgur.com/srF9Tzi.png

Tích vào My site is not fully HTTPS.
Choose Subdomain: Nên điền tên miền diễn đàn, nó sẽ được dùng làm tên miền phụ của OneSignal. Ví dụ mình điền devs, nó sẽ thành:
Code:
https://devs.onesignal.com

Google Project Number: Điền Sender ID của ứng dụng bạn tạo trên Google Services Wizard.
Nhấn Save và qua bước tiếp theo.

Bước 6


Chọn bộ SDK để tích hợp vào diễn đàn.

Topics tagged under firefox on Zzbaivong forumvi 610

Chọn Website Push.
Nhấn Next để tiếp tục.

Bước 7


Cài đặt SDK của OneSignal vào diễn đàn.

Topics tagged under firefox on Zzbaivong forumvi 710

Ghi lại mã Your App ID.
Không đóng OneSignal. Đi đến diễn đàn của bạn để cài đặt SDK.
Lưu ý không dùng trình duyệt ở chế độ ẩn danh, tắt các tiện ích chặn Popup và nên dùng Google Chrome.

Sao chép và chỉnh sửa code sau:
Code:
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
    var OneSignal = OneSignal || [];
    OneSignal.push(['init', {
        appId: 'APP_ID',
        safari_web_id: 'SAFARI_WEB_ID',
        autoRegister: true,
        subdomainName: 'SUBDOMAIN',
        notifyButton: {
            enable: true,
            size: 'small',
            position: 'bottom-left',
            prenotify: true,
            showCredit: false,
            text: {
                'tip.state.unsubscribed': 'Đăng ký nhận thông báo',
                'tip.state.subscribed': 'Bạn đã đăng ký nhận thông báo',
                'tip.state.blocked': 'Bạn đã chặn hiển thị thông báo',
                'message.prenotify': 'Click để đăng ký nhận thông báo',
                'message.action.subscribed': 'Cảm ơn bạn đã đăng ký!',
                'message.action.resubscribed': 'Bạn đã đăng ký nhận thông báo',
                'message.action.unsubscribed': 'Bạn đã hủy đăng ký nhận thông báo',
                'dialog.main.title': 'Quản lý thông báo',
                'dialog.main.button.subscribe': 'ĐĂNG KÝ',
                'dialog.main.button.unsubscribe': 'HỦY ĐĂNG KÝ',
                'dialog.blocked.title': 'Bỏ chặn thông báo',
                'dialog.blocked.message': 'Thực hiện các hướng dẫn sau để cho phép thông báo:'
            }
        },
        welcomeNotification: {
            title: 'SITE_NAME',
            message: 'Cảm ơn bạn đã đăng ký!'
        },
        promptOptions: {
            siteName: 'SITE_NAME',
            actionMessage: 'Chúng tôi muốn hiển thị thông báo cho bạn khi có bài viết hoặc cập nhật mới.',
            exampleNotificationTitle: 'Thông báo mẫu',
            exampleNotificationMessage: 'Ví dụ cách thông báo sẽ hiển thị',
            exampleNotificationCaption: 'Bạn có thể dừng nhận thông báo bất kỳ lúc nào',
            acceptButtonText: 'CHO PHÉP',
            cancelButtonText: 'BỎ QUA'
        }
    }]);
</script>

Trong code trên:
Thay APP_ID bằng mã Your App ID vừa lấy.
Thay SUBDOMAIN bằng tên miền phụ từ OneSignal tạo ở Bước 5 (mục Choose Subdomain).
Thay 2 vị trí SITE_NAME bằng tên diễn đàn của bạn.

Sau khi chỉnh sửa xong, mở template overall_header:
ACP >> Display >> Templates >> General >> overall_header

Tìm </head> và thêm code vừa chỉnh sửa vào phía trước nó.
Save template và Publish.

Bước 8


Kiểm tra hoạt động. Truy cập diễn đàn của bạn và kiểm tra thông báo.

Topics tagged under firefox on Zzbaivong forumvi 810

Nhấn CHO PHÉP trong bảng yêu cầu xác nhận hiện ra. Nếu không hiện thì có thể code bạn sửa bị sai, kiểm tra lại Bước 7.

Sau đó một Popup sẽ hiện ra. Nhấn Cho phép (Allow) khi được yêu cầu xác nhận hiển thị thông báo.

Topics tagged under firefox on Zzbaivong forumvi 910

Nếu nó không hiện, kiểm tra xem bạn có dùng tiện ích chặn Popup không, nếu có thì tắt nó đi, rồi nhấn vào icon thông báo ở góc dưới, bên trái diễn đàn.
Nếu bạn dùng trình duyệt ẩn danh sẽ không thể cho phép hiển thị thông báo được.

Bước 9


Kiểm tra người dùng nhận thông báo. Lúc này thì đó chính là bạn.

Topics tagged under firefox on Zzbaivong forumvi 1010

Nhấn vào nút Check Subscribed Users.
Nếu bạn làm Bước 8 đúng thì sẽ qua được bước này. Nhấn Next để tiếp tục.

Bước 10


Kiểm tra hoạt động của ứng dụng.

Topics tagged under firefox on Zzbaivong forumvi 1110

Nhấp vào nút Send Test Notification, một thông báo sẽ được hiện ra.

Topics tagged under firefox on Zzbaivong forumvi 1210

Nhấn vào thông báo vừa hiện ra, trình duyệt sẽ mở một tab mới, dẫn đến trang kiểm tra ứng dụng hoạt động.

Topics tagged under firefox on Zzbaivong forumvi 12_510

Tắt trang kiểm tra đó và quay lại trang cấu hình. Nhấn vào nút Check Notification Status.
Nhấn Done.

Topics tagged under firefox on Zzbaivong forumvi 1310

Vậy là bạn đã cấu hình xong cho Google Chrome và Mozilla Firefox. Nhấn Done để kết thúc.

Bước 11


Cấu hình cho Safari.

Topics tagged under firefox on Zzbaivong forumvi 1410

Nhấn vào App Settings.
Nhấn nút Configure ở dòng Apple Safari.

Bước 12


Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.

Topics tagged under firefox on Zzbaivong forumvi 1510

Site Name: Điền tên diễn đàn của bạn
Site URL: Điền URL diễn đàn của bạn.
Không tích vào I'd like to upload my own .p12 certificate
Tích vào I'd like to upload my own notification icons, và tải lên logo diễn đàn của bạn theo các kích thước được yêu cầu. Nếu không, bạn có thể tải về Bộ icon BELL để sử dụng.
Nhấn Save và qua bước tiếp theo.

Bước 13


Lấy mã Web ID cho Safari

Topics tagged under firefox on Zzbaivong forumvi 1611

Đóng Dialog lại, bằng cách nhấn vào Kí hiệu X.
Do mình không có máy Mac nên không hướng dẫn tiếp được. Hơn nữa, bước tiếp theo chỉ là kiểm thử ứng dụng tương tự như Google Chrome và Mozilla Firefox, chỉ còn thêm Web ID cho Safari vào code mà còn sai nữa thì mình cũng chịu.
Dù sao bạn cũng yên tâm, mình đã nhờ người kiểm tra bằng Safari trên Mac rồi, đảm bảo hoạt động.

Topics tagged under firefox on Zzbaivong forumvi 1711

Sau khi đóng Dialog thì tại dòng cấu hình Apple Safari bạn sẽ thấy mã Web ID của nó, sao chép lại.
Đi đến diễn đàn của bạn, mở template overall_header.
Tìm trong code mà bạn đã thêm vào ở Bước 7.
Thay SAFARI_WEB_ID bằng mã Web ID mà bạn vừa lấy được.
Save template và Publish.

Vậy là xong rồi đó, giờ bạn đã có thể tạo thông báo cho người dùng (nếu họ cho phép).


Cách tạo thông báo


Topics tagged under firefox on Zzbaivong forumvi 1910

Nhấn New Message
Điền tiêu đề thông báo trong mục Title và nội dung trong mục Content.

Topics tagged under firefox on Zzbaivong forumvi 19_510

Nhấn vào Options để mở tùy chọn thêm.

Topics tagged under firefox on Zzbaivong forumvi 2010

Mở mục Launch URL và điền URL, để khi người dùng nhấn vào thông báo, trình duyệt sẽ chuyển đến URL đó.

Các tùy chọn khác, ít dùng hơn:
Include Additional Data: Bạn sẽ cần biết cách dùng API, có kiến thức javascript kha khá mới dùng được.
Include Android / iOS Action Buttons: Dùng cho ứng dụng Web, không sài được.
Include Chrome Web Push Action Buttons: Tùy chọn này chỉ hoạt động trên Google Chrome 48+, nó cho phép tạo thêm tối đa 2 nút phụ bên dưới thông báo.

Topics tagged under firefox on Zzbaivong forumvi 2110

Sau khi thông báo được gửi, bạn cũng có thể xem thống kê số người dùng tương tác với nó.


Nguồn


Zzbaivong (devs.forumvi.com)
Tags: #firefox #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #notification #chrome #safari

[Add-ons] Forumotion backup templates - 21.08.15 13:52

Forumotion Backup Templates



Giới thiệu


Tiện ích này sẽ giúp bạn lưu trữ và cài đặt tất cả Template trong Forumotion một cách nhanh chóng và chính xác.


  • Tất cả Template sẽ được nén vào một tệp zip nên rất thuận tiện lưu trữ và chia sẻ.
  • Cài đặt tệp zip lưu trữ từ máy sẽ có đủ thông tin và được cảnh báo về phiên bản giúp tránh nhầm lẫn.
  • Chế độ One-Click: Đơn giản hóa thao tác với 1 click, sử dụng khi cần cài đặt và lưu trữ toàn bộ Template.
  • Thông báo trên màn hình khi tiến trình hoàn tất, bạn chỉ cần giữ tab mở trong lúc tiện ích đang xử lý và làm việc khác.
  • Để đảm bảo bạn không vô tình tắt trình duyệt khi tiến trình đang chạy, một cảnh báo đã được thêm vào.


Cài đặt


Google Chrome: http://1drv.ms/1SxX5cj
Sau khi tải xong, bạn mở tab chrome://extensions/ và kéo thả file cxr vừa tải vào để cài đặt.
Firefox: https://addons.mozilla.org/en-US/firefox/addon/forumotion-backup-templates/
Opera: https://addons.opera.com/en/extensions/details/forumotion-backup-templates/

Phiên bản Userscript cho các trình duyệt khác: Xem tại đây.


Ảnh chụp màn hình


Topics tagged under firefox on Zzbaivong forumvi P5aHHKN
Tiện ích vừa hoàn tất lưu trữ toàn bộ Template

Xem thêm ảnh chụp màn hình khác tại đây.


Video hướng dẫn


Google Chrome: https://www.youtube.com/watch?v=OV9ZX2uj5ec
Firefox: https://www.youtube.com/watch?v=jvyc1vfIZ9I
Opera: https://www.youtube.com/watch?v=0nhHRSeWWRI


Mã nguồn


https://github.com/baivong/ForumotionBackupTemplates

Tài nguyên

jsZip (v2.5.0) By StuartKnightley
jszip-utils (v0.0.2) By Stuart Knightley, David Duponchel
FileSaver (2015-05-07.2) By Eli Grey
ForumotionBackupTemplates (v2.0.1) By Zzbaivong


Tác giả


Zzbaivong (http://devs.forumvi.com)
Tags: #google-chrome #firefox #opera #template #extension #tutorial #backup #add-on #hot

[Userscript] View source kiểu Chromium cho Firefox - 21.08.15 13:49

View-source trong Firefox có điểm bất tiện là, mở trong cửa sổ mới, và các liên kết trong đó đều ở dạng view-source. Vì thế mình viết script này theo kiểu của Chromium, bổ sung thêm tính năng định dạng code.


Demo


Topics tagged under firefox on Zzbaivong forumvi G7PNESO
Source đã được format

Gợi ý: Nhấn Ctrl+Y hoặc chọn trên menu User script command.
Nên sử dụng chung với js-css beautify


Cài đặt


Dùng một trong các link sau:

  1. https://greasyfork.org/vi/scripts/16112-viewsource
  2. https://openuserjs.org/scripts/baivong/viewsource
  3. https://github.com/baivong/Userscript/raw/master/view_source/view_source.user.js


Mã nguồn


Code:
// ==UserScript==
// @id           view-source@devs.forumvi.com
// @name         viewsource
// @namespace    devs.forumvi.com
// @description  View and beauty website source code. Support to see the source code by holding the right mouse and drag. Shortcut: Alt+U.
// @version      2.3.6
// @icon         http://i.imgur.com/6yZMOeH.png
// @author       Zzbaivong
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github-gist.min.css
// @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css
// @require      https://greasyfork.org/scripts/18530-beautify-html/code/beautify-html.js?version=117787
// @require      https://greasyfork.org/scripts/18531-beautify-js/code/beautify-js.js?version=117786
// @require      https://greasyfork.org/scripts/18528-beautify-css/code/beautify-css.js?version=117789
// @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js
// @noframes
// @connect      self
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_xmlhttpRequest
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {

    'use strict';

    var theme = 'light', // light|dark

        win = window,
        urlpage = location.href,
        doc = document,
        wrapcontent = doc.documentElement,
        content = doc.body;

    function scrollByDragging(container, disableH, disableV) {

        function mouseUp(e) {
            if (e.which !== 3) return;

            window.removeEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'default';
        }

        function mouseDown(e) {
            if (e.which !== 3) return;

            pos = {
                x: e.clientX,
                y: e.clientY
            };

            window.addEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'move';
        }

        function mouseMove(e) {
            if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
            if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
        }

        var pos = {
            x: 0,
            y: 0
        };

        container.oncontextmenu = function (e) {
            e.preventDefault();
        };

        container.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

    }

    function removeEvents(ele, attr) {
        var events = 'onafterprint onbeforeprint onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onresize  onstorage onunload onblur onchange oncontextmenu onfocus oninput oninvalid onreset onsearch onselect onsubmit onkeydown onkeypress onkeyup onclick ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll onwheel oncopy oncut onpaste onerror onshow ontoggle'.split(' '),
            x;
        for (x in events) {
            var _event = events[x];
            ele[_event] = null;
            if (attr) {
                ele.removeAttribute(_event);
            }
        }
    }

    function viewsource() {
        GM_xmlhttpRequest({
            method: 'GET',
            url: urlpage,
            onload: function (response) {

                removeEvents(win);
                removeEvents(doc);
                removeEvents(wrapcontent, true);
                removeEvents(content, true);

                var txt = html_beautify(response.response);

                doc.head.innerHTML = '';
                content.innerHTML = '';
                content.removeAttribute('id');
                content.removeAttribute('class');
                content.removeAttribute('style');
                doc.title = 'view-source:' + urlpage;

                GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:#d2d2d2;text-align:right;width:3.5em;left:-.5em;border-right:1px solid rgba(221, 221, 221, 0.36);padding-right:.5em}');

                var output = doc.createElement('PRE');
                output.setAttribute('class', 'xml');
                output.textContent = txt;

                content.appendChild(output);

                hljs.highlightBlock(output);

                var lines = txt.split('\n'),
                    l = '';
                lines = lines ? lines.length : 0;
                for (var i = 0; i < lines; i++) {
                    l += (i + 1) + '\n';
                }

                output.setAttribute('data-lines', l);
                output.style.width = output.scrollWidth + 'px';

                scrollByDragging(content);
                scrollByDragging(wrapcontent);

                var attrUrl = doc.getElementsByClassName('hljs-attr');
                for (var j = 0; j < attrUrl.length; j++) {
                    if (/\b(src|href\b)/.test(attrUrl[j].textContent)) {
                        var link = attrUrl[j].nextSibling.nextSibling;
                        var url = link.textContent.slice(1, -1);
                        link.innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a>';
                    }
                }

            }
        });
    }

    GM_registerMenuCommand('View source', viewsource, 'u');

    if (/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(doc.contentType)) {
        doc.onkeydown = function (e) {

            // Alt+U
            if (e.which === 85 && e.altKey) {
                e.preventDefault();

                viewsource();
            }
        };
    }

}());

Chú ý: Bạn có thể chọn giao diện Dark hoặc Light bằng cách sửa tham số theme ở dòng 25.


Credits


  1. jsBeautifier
  2. highlightJs

Tags: #userscript #firefox #highlight #beautify

[Userscript] Javascript-css beautify - 21.08.15 13:47

Javascript-css beautify chỉ hoạt động với các URL file js/json/css. Tác dụng của nó là định dạng và làm nổi cú pháp trong code, giúp việc đọc code thuận tiện hơn.


Demo


Topics tagged under firefox on Zzbaivong forumvi Z2fhzSR
File CSS

Topics tagged under firefox on Zzbaivong forumvi Rt0HUaw
File Javascript


Cài đặt

Dùng một trong các link sau:

  1. https://greasyfork.org/vi/scripts/16111-javascript-css-beautify
  2. https://openuserjs.org/scripts/baivong/Javascript-css_beautify
  3. https://github.com/baivong/Userscript/raw/master/js-css_beautify/js-css_beautify.user.js


Mã nguồn


Code:
// ==UserScript==
// @id           javascript-css-beautify@devs.forumvi.com
// @name         Javascript-css beautify
// @namespace    http://devs.forumvi.com
// @description  Beautify and syntax highlighting for source code javascript, json, css. Support to see the source code by holding the right mouse and drag.
// @version      2.3.6
// @icon         http://i.imgur.com/kz8nqz1.png
// @author       Zzbaivong
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github-gist.min.css
// @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css
// @require      https://greasyfork.org/scripts/18531-beautify-js/code/beautify-js.js?version=117786
// @require      https://greasyfork.org/scripts/18528-beautify-css/code/beautify-css.js?version=117789
// @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js
// @noframes
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

(function () {

    'use strict';

    var theme = 'light', // light|dark

        url = location.pathname,
        doc = document,
        contenttype = doc.contentType;

    function scrollByDragging(container, disableH, disableV) {

        function mouseUp(e) {
            if (e.which !== 3) return;

            window.removeEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'default';
        }

        function mouseDown(e) {
            if (e.which !== 3) return;

            pos = {
                x: e.clientX,
                y: e.clientY
            };

            window.addEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'move';
        }

        function mouseMove(e) {
            if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
            if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
        }

        var pos = {
            x: 0,
            y: 0
        };

        container.oncontextmenu = function (e) {
            e.preventDefault();
        };

        container.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

    }

    if (/^application\/(x-javascript|javascript|json)|text\/css$/.test(contenttype) || (/.+\.(js|json|css)$/.test(url) && !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contenttype))) {

        var output = doc.getElementsByTagName('pre')[0],
            txt = output.textContent,
            lang = 'javascript',
            lines = 0,
            l = '';

        GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:#d2d2d2;text-align:right;width:3.5em;left:-.5em;border-right:1px solid rgba(221, 221, 221, 0.36);padding-right:.5em}');

        if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
            lang = 'css';
            txt = css_beautify(txt);
        } else {
            txt = js_beautify(txt);
        }

        output.textContent = txt;
        output.setAttribute('class', lang);

        hljs.highlightBlock(output);

        lines = txt.split('\n');
        lines = lines ? lines.length : 0;
        for (var i = 0; i < lines; i++) {
            l += (i + 1) + '\n';
        }

        output.setAttribute('data-lines', l);
        output.style.width = output.scrollWidth + 'px';

        scrollByDragging(doc.body);
        scrollByDragging(doc.documentElement);

    }

}());

Chú ý: Bạn có thể chọn giao diện Dark hoặc Light bằng cách sửa tham số theme ở dòng 22.


Credits


  1. jsBeautifier
  2. highlightJs
  3. Devs forumvi

Tags: #Userscript #firefox #highlight #beautify #chromium


Back to top