Hướng dẫn cài code vào google chrome
|
Không có gì lạ khi trình duyệt yêu thích của tôi là Google Chrome. Tôi thích nó bởi vì nó nhanh, đáng tin cậy, ít bị lỗi (rất hiếm), và nó có giao diện đẹp. Còn có thứ khác mà tôi thấy thậm chí còn có giá trị hơn. Rõ ràng là bạn có thể xây dựng một extension (hay là phần mở rộng) cho nó chỉ bằng HTML, CSS và JavaScript. Tôi luôn ủng hộ các sản phẩm, những sản phẩm mở cho cộng đồng và Chrome là một trong những sản phẩm này. Nếu bạn cần một cái gì đó và nó chưa được làm ra, thì bạn có thể tự mình phát triển nó. Show Vì vậy, khi kết thúc bài này, bạn sẽ thấy extension cho Chrome này hoạt động sử dụng hầu hết các kỹ thuật được trình bày ở bên dưới. Bạn có thể tải về ví dụ hoàn chỉnh bằng cách sử dụng nút Download ở phía trên trang này. Tại sao bạn nên viết extension của riêng bạnTôi luôn khuyến khích mọi người sử dụng các công cụ tốt hơn để tăng tốc tiến trình công việc của họ. Phần mềm mà chúng ta sử dụng nên giúp ích cho chúng ta, chúng ta không nên mất công với nó. Việc phát triển extension/plugin cho trình biên tập hoặc trình duyệt yêu thích của bạn không chỉ giúp bạn mà còn cho cả những lập trình viên khác, những người mà không sớm thì muộn sẽ gặp tình huống tương tự. Nếu còn thiếu thứ gì đó, bạn có thể tự xây dựng nó và với Chrome điều này thật sự dễ dàng. Mô hình hóa môi trường xoay quanh nhu cầu của bạn là chìa khoá để đạt được hiệu quả cao. Phát triển & Kiểm thử Extension của bạnRất may là có một cách để kiểm tra extension của bạn mà không phải tải nó lên cửa hàng của Chrome. Trong thanh địa chỉ của trình duyệt, chỉ cần nhập vào: Hãy đảm bảo rằng bạn đã tích vào Developer mode và nhấp vào nút Load unpacked extension.... Sau đó, chỉ cần chọn thư mục từ ổ cứng chứa các tập tin của extension. Kiến trúcDưới đây là sơ đồ kiến trúc cho một extension của Chrome: Và bây giờ hãy xem kỹ hơn về mỗi thành phần bên trong kiến trúc. ManifestKhởi điểm của extension là tập tin manifest.json. Nó phải chứa một đối tượng JSON hợp lệ. Ví dụ: 1 { 2 { 1 { 2 { 3 { 4 { 5 { 6 { 7 Các thuộc tính cần thiết là Manifest có thể chứa các thuộc tính khác tùy thuộc vào loại extension mà bạn cần, nhưng tôi sẽ chỉ mô tả những cái mà tôi thấy thú vị. Trang NềnMỗi extension có một trang nền (background page) không nhìn thấy được chạy bởi trình duyệt. Có hai loại - trang nền cố định và trang sự kiện. Cái đầu tiên hoạt động, mọi lúc. Cái thứ hai chỉ hoạt động khi cần. Google khuyến khích các nhà phát triển sử dụng các trang sự kiện, vì cái này giúp tiết kiệm bộ nhớ và cải thiện hiệu suất tổng thể của trình duyệt. Tuy nhiên, cũng cần phải biết rằng đây cũng là nơi bạn nên đặt logic chính và những khởi tạo của bạn. Thông thường, trang nền/script đóng vai trò là cầu nối giữa các phần khác nhau của extension. Đây là cách bạn nên mô tả nó trong tập tin manifest: 1 { 9 2 2 1 3 2 3 4 { 7 Như bạn có thể đoán được, nếu thuộc tính Script Nội dungNếu bạn cần truy cập vào DOM của trang hiện tại, thì bạn cần phải sử dụng một script nội dung (content script). Code được chạy bên trong ngữ cảnh của trang web hiện tại, có nghĩa là nó sẽ được thực thi với mỗi lần làm mới. Để thêm một script như vậy, hãy sử dụng cú pháp sau đây. 1 2 7 2 2 9 3 4 5 { 5 { 0 Hãy nhớ rằng giá trị của Giao diện Người dùngCó một số cách để xây dựng UI (giao diện người dùng) cho extension của bạn. Dưới đây là bốn cách phổ biến nhất. Browser ActionHầu hết các nhà phát triển sử dụng thuộc tính Các tập tin manifest nên chứa các dữ liệu sau đây: 1 2 3 1 3 3 3 4 3 5 5 3 7 { 0 3 9 { 2 { 4 { 7 1 Đây là code mà tôi sử dụng để tạo ra hình ảnh ở trên. Page ActionThuộc tính Điều thú vị ở đây là biểu tượng của bạn ban đầu bị ẩn, vì vậy bạn có thể quyết định khi nào hiển thị nó. Ví dụ, trong hình trên, biểu tượng RSS sẽ chỉ được hiển thị khi trang hiện tại chứa liên kết đến một RSS feed. Nếu bạn cần lúc nào cũng hiển thị biểu tượng của bạn, thì tốt nhất là sử dụng trực tiếp Để thêm Page Action, gõ code sau bên trong tập tin manifest của bạn: 1 2 3 1 3 4 1 4 4 3 5 3 7 { 0 4 7 { 2 { 4 { 7 Không giống như biểu tượng của Browser Action, biểu tượng Page Action không có biểu trưng. DeveloperToolsTôi sử dụng DeveloperTools rất nhiều và thật tuyệt khi Chrome cung cấp một cách để thêm các tab mới vào công cụ này. Điều đầu tiên bạn cần làm là thêm một trang HTML sẽ được nạp khi bảng điều khiển được mở ra: 1 Không cần đặt bất kỳ HTML nào bên trong trang, ngoại trừ liên kết đến một tập tin JavaScript, cái mà sẽ tạo ra tab: 1 Và sau đó bao gồm code sau đây bên trong tập tin 1 2 3 5 1 4 5 3 5 5 5 { 0 5 7 { 2 { 5 { 4 Bây giờ code trên sẽ thêm một tab mới với tên là Omnibox1 Và sau đó thêm code dưới đây, vào bên trong script nền của bạn: 1 2 3 4 { 01 5 { 03 { 0 { 05 { 2 { 07 { 4 { 09 { 6 { 11 Bạn sẽ có thể gõ Nhấn vào tab sẽ cho ra màn hình sau: Tất nhiên việc sử dụng APICó rất nhiều thứ khác nhau để bạn có thể thực hiện trong extension của bạn. Ví dụ, bạn có thể truy cập vào bookmark hoặc lịch sử của người dùng. Bạn có thể di chuyển, tạo các tab hoặc thậm chí thay đổi kích thước cửa sổ chính. Tôi khuyên bạn nên tham khảo tài liệu hướng dẫn để có được một ý tưởng tốt hơn về cách để thực hiện các công việc này. Những gì bạn cần biết là không phải tất cả các API đều có sẵn trong mọi phần của extension của bạn. Ví dụ, script nội dung của bạn không thể truy cập vào 3 00 hoặc script bên trong tab DeveloperTools của bạn không thể đọc DOM của trang web. Vì vậy, nếu bạn đang thắc mắc tại sao điều gì đó không hoạt động, thì đây có thể là lý do. Thông điệpNhư tôi đã đề cập ở trên, bạn không phải lúc nào cũng có thể truy cập vào API mà bạn muốn sử dụng. Nếu như vậy, thì bạn nên sử dụng việc truyền thông điệp. Có hai loại thông điệp - các yêu cầu một lần và kết nối lâu dài. Yêu cầu Một lầnKiểu giao tiếp này chỉ xảy ra một lần. Ví dụ, bạn gửi một tin nhắn và chờ một câu trả lời. Ví dụ, bạn có thể đặt code sau đây bên trong script nền của bạn: 1 { 13 2 { 15 3 { 17 4 { 19 5 { 21 { 0 { 5 { 2 { 25 { 4 { 11 Sau đó sử dụng code từ bên dưới trong script nội dung của bạn: 1 { 29 2 { 31 3 { 33 4 { 35 5 { 37 { 0 { 39 { 2 { 41 { 4 { 43 Và đây là cách bạn có thể lấy thông tin về DOM của trang hiện tại và sử dụng nó bên trong script nền của bạn, cái mà thông thường không có quyền truy cập vào dữ liệu này. Kết nối Lâu dàiSử dụng kiểu thông điệp này nếu bạn cần một kênh giao tiếp cố định. Bên trong script nội dung của bạn, hãy đặt code sau đây: 1 { 45 2 { 47 3 { 49 4 { 51 5 { 11 Và sau đó bên trong script nền, sử dụng code này: 1 { 55 2 { 57 3 { 59 4 { 61 5 { 63 { 0 { 5 { 2 { 11 Thay thế TrangThay thế trang là một cách hay để tùy biến trình duyệt của bạn. Bạn cũng có thể thay thế một số trang mặc định trong Chrome. Ví dụ bạn có thể tạo trang lịch sử của riêng mình. Để làm điều đó, hãy thêm đoạn code sau đây: 1 { 69 2 { 71 3 { 7 Các giá trị có thể có của 3 01 là 3 02, 3 03 và 3 04. Thật tuyệt khi có một trang 3 05 mới tinh. Một Extension MẫuĐể tổng hợp bài này, tôi đã quyết định bao gồm một ví dụ đơn giản, để bạn có thể hiểu rõ hơn về bức tranh tổng thể. Extension ví dụ này sử dụng hầu hết những gì mà tôi đã mô tả ở trên để thiết lập một màu nền 3 06 cho tất cả các div ở trong trang hiện tại. Bạn có thể tải về mã nguồn bằng cách sử dụng nút Download ở đầu bài viết này. Tập tin ManifestTất nhiên tôi bắt đầu với tập tin manifest: 1 { 2 { 77 3 { 83 { 0 { 85 { 2 { 87 { 4 { 91 { 92 { 1 { 94 { 95 { 96 3 7 { 98 { 99 2 00 2 01 2 02 2 03 2 04 3 7 2 06 2 07 2 08 2 09 2 10 3 7 2 12 2 13 2 14 2 15 2 16 2 18 2 19 2 20 2 21 2 22 { 7 Lưu ý rằng, bạn có thể sắp xếp các tập tin của bạn thành các thư mục. Ngoài ra, hãy chú ý đến thuộc tính Script Nền1 2 25 2 3 4 2 31 5 { 03 { 0 { 05 { 2 { 07 { 4 2 39 { 6 { 05 { 92 5 7 { 94 2 45 { 96 2 47 { 98 { 13 2 00 { 15 2 02 2 53 2 04 2 55 2 06 { 21 2 08 { 5 2 10 { 25 2 12 { 05 2 14 5 7 2 16 2 67 2 18 2 69 2 20 2 71 2 22 2 73 2 74 2 75 2 76 2 77 2 78 2 79 2 80 2 81 2 82 { 39 2 84 { 41 2 86 { 05 2 88 5 7 2 90 2 91 2 92 2 93 2 94 2 95 2 96 2 97 2 98 2 99 { 41 { 7 Một số dòng đầu tiên lấy hành động của người dùng từ omnibox. Sau đó, tôi thiết lập một listener cho yêu cầu một lần, sẽ chấp nhận thông điệp từ biểu tượng hành động của trình duyệt. Đoạn code tiếp theo là một kết nối lâu dài với tab devtools (hoàn toàn không cần thiết phải sử dụng một kết nối lâu dài cho việc này, tôi thực hiện nó chỉ cho mục đích nghiên cứu). Sử dụng các listener này, tôi có thể lấy được đầu vào từ người dùng và gửi nó đến script nội dung, cái mà có quyền truy cập vào các phần tử DOM. Điểm mấu chốt ở đây là trước tiên chọn tab mà tôi muốn thao tác và sau đó gửi một thông điệp đến nó. Sau cùng, tôi đặt một biểu trưng vào biểu tượng tiện của extension. Browser ActionChúng ta bắt đầu bằng tập tin 3 08: 1 2 3 4 5 Sau đó chúng ta tạo tập tin 3 09: 1 5 7 2 3 4 5 { 0 { 2 { 63 { 4 { 5 { 6 { 7 Cửa sổ pop-up có chứa một nút đơn và một khi người dùng nhấp chuột vào nó, nó sẽ gửi một thông điệp đến script nền. DeveloperTools1 2 3 4 5 { 5 { 0 { 7 Đối với DeveloperTools, chúng ta thực hiện hoàn toàn tương tự như chúng ta đã làm trong pop-up, sự khác biệt duy nhất là tôi đã sử dụng một kết nối lâu dài. Script Nội dung1 2 3 4 5 { 0 { 2 { 4 { 6 { 92 { 94 { 96 { 21 { 98 { 5 2 00 { 11 Script nội dung lắng nghe một thông điệp, chọn tất cả các thẻ div trên trang hiện tại, và thay đổi màu nền của chúng. Hãy chú ý đến đối tượng mà tôi đã gắn vào listener. Trong script nội dung đó là 3 10. Tùy biến trang3 11 Điều cuối cùng mà extension này làm là tùy biến trang 3 11. Chúng ta có thể dễ dàng làm điều đó chỉ bằng cách trỏ thuộc tính 3 04 đến tập tin 3 14: 1 { 69 2 3 { 7 Xin hãy lưu ý rằng bạn không thể tạo một bản sao của trang 3 11. Ý tưởng về tính năng này là để thêm vào một chức năng hoàn toàn khác. Dưới đây là những gì Google nói: Đừng cố gắng bắt chước trang New Tab mặc định. Các API cần tạo một phiên bản hơi khác so với trang New Tab mặc định - với các trang trên cùng, các trang đã đóng gần đây, mẹo, hình nền cho theme, và vân vân - chưa tồn tại. Cho đến khi họ làm xong, bạn tốt hơn nên cố gắng làm một cái gì đó hoàn toàn khác. Gỡ lỗiViết một extension cho Google Chrome không phải lúc nào cũng là một công việc dễ dàng và bạn có khả năng sẽ gặp phải một số vấn đề. Điều tyệt vời là bạn vẫn có thể sử dụng console để xuất ra các biến của bạn để giúp gỡ lỗi. Bạn có thể thêm 3 16 vào script nền hoặc script nội dung của bạn. Tuy nhiên, việc này sẽ không hoạt động trong các script chạy trong ngữ cảnh của developer tools, trong trường hợp đó bạn có thể cân nhắc sử dụng phương thức 3 17 vì nó hoạt động ở mọi nơi. Tóm tắtTheo tôi, Chrome là một trong những trình duyệt tốt nhất hiện nay. Các nhà phát triển tại Google giúp cho việc tạo ra các extension tương đối dễ dàng bằng cách cung cấp cho chúng ta sức mạnh để tạo ra chúng bằng HTML, CSS và JavaScript. Vâng, có một số phần khó, nhưng nhìn chung chúng ta có thể tạo ra các plugin có giá trị. Lưu ý rằng, bài viết này không khái quát hết mọi thứ liên quan đến việc phát triển các extension cho Chrome. Có một số thứ hữu ích khác như menu ngữ cảnh, trang tùy chọn và thông báo. Đối với những chủ đề mà tôi chưa khái quát, hãy tham khảo tài liệu hướng dẫn để biết thêm thông tin. |
