Viết extension cho Chrome(Phần 2)

Bài trước mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm thế nào để phân trang cho Kipalog.
alt text

Cấu trúc folder

Sẽ chia các phần scripts,images,css thành từng folder
alt text

  • _locales: chứa các file languages
  • images : chứa các ảnh, gồm ảnh icon của ext( có các size như trong hình : 16x16 ...)
  • scripts,styles : chứa file js,css
  • các file html hiển thị màn hình cho popup,trang option ..

dựa vào file manifest.json thì:

  • Trang options: options.html, trong file options.html bạn có thể dùng nhiều file js,css, hoặc dùng các library cũng được. Trang này là trang để thiết lập các cài đặt cho Ext
  • Popup : tương tự như trang options, dùng hiển thị các cài đặt trong trang options
  • Background : có 2 thuộc tính là scripts,page các file script thì dùng để thực thi các task, bắt các event: ví dụ như làm các extension liên quan đến notification chắc hạn, thì có thế dùng để set badge cho icon Ext trên chrome...
  • ContentScripts: các file script được nhúng vào các trang web vào bằng chrome

Phân trang cho Kipalog

Contenscript

Vì trang Kipalog đùng angularjs nên Ext này sẽ dùng thêm angularjs nữa
Trước hết, cần view source của trang này lên và nơi mình muốn đặt pagination ở chỗ nào. Và xem các Request của Kipalog, cái này thì dùng nhiều tool có thể bắt được API, ví dụ dùng firebug của firefox ... và mình đã biết được api lấy các bài viết của Kipalog
Do Kipalog dùng angularjs mà phần mình muốn thêm vào lại nằm trong 1 controller, nên mình phải làm thế nào để thêm,sửa các biến cho Controller này.
Phần muốn phân trang thuộc FeedController, bạn có thể đọc qua file scripts của kipalog(ko đọc cũng được), việc đọc này giúp mình hiểu hơn các function,biến trong controller này, có thể dùng lại,rồi view xem source html, xem phần ng-repeat thì các bài viết được lưu ở posts.
Vấn đề ở đây là file contentscript.js sau khi được nhúng vào nó chạy ở môi trường khác vs các file script của kipalog trước đó, như vậy thì ko thể nào dùng lại các biết hoặc các function của kipalog được. Cho nên từ file contenscript.js mình sẽ tạo 1 đoạn script để append đoạn script mình vào chạy cùng môi trường vs các file js của kipalog.

'use strict';
$(function() {
    console.log('injected');
    var link = document.createElement("link");
    link.href = chrome.extension.getURL('styles/kipalog.css');
    link.type = "text/css";
    link.rel = "stylesheet";
    (document.head||document.documentElement).appendChild(link);

    var s = document.createElement('script');
    s.src = chrome.extension.getURL('scripts/pagination.js');
    (document.head||document.documentElement).appendChild(s);
    s.onload = function() {
        //s.parentNode.removeChild(s);
    };
});

đoạn code trên mình append 2 file: kipalog.css và file pagination.js

  • file kipalog.css: mình ko nói nhé, chỉnh sửa cho đẹp thì tuỳ ở bạn thôi
  • pagination.js: trong file này mình sẽ remove đoạn html hiển thị chữ "Xem tiếp", và add đoạn html hiển thị các page. tiếp đến là phần thêm 1 function gotoPage cho FeedController.
        var scope = angular.element('[ng-controller="FeedController"]').scope();
        scope.$apply(function(){
            var max_page = getCookie('ext_max_page')+0;
            if( max_page != 5 && max_page != 15){
                scope.MAX_PAGE = 10;
            } else {
                scope.MAX_PAGE = max_page;
            }
            var pages = [];
            for(var i= 0; i< scope.MAX_PAGE ; i++){
                pages[i] = {
                    page    :i+1
                };
            }
            scope.pages = pages;
            scope.default_pages = pages;

            scope.gotoPage = function(page){
                if(page >0 && page <= scope.MAX_PAGE && !scope.goingpage) {
                    scope.goingpage = true;
                    $.get(
                        "/posts/pagination",
                        {
                            page: page,
                            filter: scope.focus
                        },
                        function (data) {
                            scope.$apply(function () {
                                scope.pages = angular.copy(scope.default_pages);
                                scope.currentPage = page;
                                if(scope.currentPage == 1){
                                    scope.nextClass = 'disabled';
                                } else if(scope.currentPage == scope.MAX_PAGE){
                                    scope.previousClass = 'disabled';
                                }
                                scope.goingpage = false;
                                scope.posts = data;
                            });
                        }
                    );
                }
            };
            scope.nextPage = function(){
                scope.gotoPage(scope.currentPage+1);
            };
            scope.previousPage = function(){
                scope.gotoPage(scope.currentPage-1);
            };
        });
        var injector = angular.injector(['ng']);
        injector.invoke(function ($compile) {
            $compile(angular.element("#PaginationCtrl").contents())(scope);
        });

đầu tiên mình get scope của FeedController. sau đó viết function scope.gotoPage() trong function này, get các bài viết theo trang (cái này do api của kipalog có truyền page lên :D) sau khi lấy được kết quả về thì gán cho scope.posts
Đoạn code ở dưới cùng: dùng để compile đoạn html mà mình đã inject vào(cái này bắt buộc có), giống như việc bạn viết các directive lồng nhau thôi.

var max_page = getCookie('ext_max_page')+0; cái này là đã được setting trong trang options

Trang options

Cái này chỉ cần dùng js thuần thôi cũng được thiết lập các giá trị rồi lưu vào cookie của kipalog( chú ý: để lưu được,đọc được cookies của trang kipalog thì trong manifest.json phần permissions add thêm quyền cookies cho nó)

Popup:

khi click icon Ext trên chrome thì nội dung của trang popup.html sẽ được hiển thị ở đây. Ví dụ như hình dưới đây.
alt text

Test

Vào chrome extension, enable chế độ developer lên. Chọn Load unpacked extension chọn project bạn đã viết, reload lại trang kipalog và xem kết quả.
Sau mỗi lần sửa thì bạn phải reload lại Chrome Extension.

Publish Ext

Sau khi hoàn thành các trang này rồi bạn có thể upload lên Chrome store. Nhưng thông báo 1 tin buồn, để upload được lên Chrome Store thì bạn phải chi trả 5$ cho 1 account :D
Đầu tiên bạn nén folder project của bạn thành file .zip
vào trang Chrome Ext Dashboard
trong trang này có 2 phần: 1 cho chrome ext, 1 phần cho chrome app
Click add new iterm cho chrome ext:
alt text

sau khi chọn file và upload lên,nếu ko có lỗi gì thì nó sẽ chuyển về trang thiết lập các thông tin,screenshot,icon cho ext này
alt text

Sau khi điền đầy đủ thông tin rồi thì bạn có thể publish nó thôi, thường chỉ chờ khoáng 1h là extension của bạn sẽ xuất hiện trên chrome store.

Đây là code mình đã viết và up lên github, các bạn có thể dùng tham khảo nhé, có thắc mắc gì thì comment ở đây nhé
https://github.com/dieuhd/Kipalog-Ext
chỉ là sample thôi, có nhiều chỗ viết chưa được tốt đâu nhé :D
Kết quả như thế này nhé

À, cái project này mình dùng generator-chrome-extension để tạo project,debug,build nhé.
dùng grunt debug để khi bạn sửa gì tự động nó reload lại extension trên chrome
dùng grunt build để build project ra file .zip nằm trong folder packages( mỗi lần build thì version trong file manifest.json sẽ tăng lên 1, ví dụ version hiện tại là 0.0.2, thì khi build thì version sẽ là 0.0.3)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

noname

5 bài viết.
67 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
51 8
Có khi nào bạn muốn thay đổi 1 phần giao diện của website nào đó chưa ? Ví dụ bây giờ ko thích click vào "Xem tiếp" của Kipalog nữa. Mà thay vào đ...
noname viết 3 năm trước
51 8
White
21 6
Ở các bài trước mình đã giới thiệu cách viết 1 extension cho chrome như thế nào rồi, và cũng đã hướng dẫn làm extension phân trang cho Kipalog rồi....
noname viết hơn 2 năm trước
21 6
White
20 1
Dạo này đang ngồi nghịch thằng Angular2, thấy có khá nhiều cái hay, 1 trong số đó là có thể dùng Typescripts để code thay cho js, mặc dù khì chạy t...
noname viết hơn 2 năm trước
20 1
Bài viết liên quan
White
21 6
Ở các bài trước mình đã giới thiệu cách viết 1 extension cho chrome như thế nào rồi, và cũng đã hướng dẫn làm extension phân trang cho Kipalog rồi....
noname viết hơn 2 năm trước
21 6
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết 3 năm trước
18 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
67 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!