Từ Điển Anh Việt "Extension"

  -  

Trong những trình duyệt tiến bộ ngày nay, phần lớn chúng phần đông hộ trợ những tiện ích mở rộng (extensions) nhằm mục đích giúp bổ sung cập nhật những bản lĩnh hữa ích đến trình duyệt. Đi đầu về hộ trợ extension phải nói tới Firefox. Từ cực kỳ lâu, extension chính là điểm mạnh nhất của Firefox.Tuy nhiên, với việc phát triển khỏe mạnh của Google chrome, nó sẽ nổi lên là 1 trong trình duyệt được nhiều người dùng nhất, cùng rất đó là sự quan tâm của những lập trình viên trong bài toán xây dựng extension mang đến nó. Trong nội dung bài viết này tôi muốn ra mắt với các bạn những khái niệm, nhân tố cơ bạn dạng trong một chrome extension, đồng thời test một extension nhỏ dại để lấy tin tức của một pull request bên trên github. Trước tiên, chúng ta sẽ đi tìm kiếm hiểu chrome extension là gì với thành phần cơ bản của nó có những gì.

Bạn đang xem: Từ điển anh việt "extension"

1. Tổng quan

Extension là một trong những tập các file như: Html, css, javascript, images và bất cứ những thành phần khác nhưng bạn rất cần phải nén lại vào một thư mục. Nó nhằm mục tiêu mục đích không ngừng mở rộng những tính năng cho trình phê chuẩn Google Chrome. Extentions về cơ bạn dạng là mọi web pages, chúng rất có thể sử dụng toàn bộ các APIs mà lại trình xem xét cung cấp, từ bỏ XMLHttpRequest tới JSON, HTML5. Như các bạn cũng có thể thấy nó thực sự không thật phức tạp như họ nghĩ.

2. Những thành phần chính

2.1 Extension UIs

Mỗi extension có thể có một browser kích hoạt hoặc page action. Chọn 1 browser action khi extension là tương quan đến số đông các trang. Chọn một page kích hoạt khi nó các chức năng trên gần như trang độc nhất định. Các extensions rất có thể trình diễn theo các cách khác như: thêm context menu, cung cấp một option page, hoặc sử dụng nội dung script để biến đổi hiển thị bên trên web page,...Các chúng ta cũng có thể biết một vài ví dụ về extension UI:

Google Mail Checker extensionMappy extensionSet Page màu sắc extension
*
*
*

2.2 Files

Mỗi extension về cơ bạn dạng có các file sau:

Một tệp tin manifestMột hoặc những file HTMLOptional: Một hoặc những file JavaScriptOptional: bất kể file gì mà chúng ta cần, ví dụ: images

ManifestFile manifest là 1 trong file json nhằm hỗ trợ các thông tin cơ bạn dạng về extension như: Name, version, description, icon, backgroud, permisions, browser_action, ... Các chúng ta có thể tìm hiểu cụ thể về thông số kỹ thuật file manifest trên đây.Dưới đó là một minh họa mang lại file manifest:

"name": "My Extension", "version": "2.1", "description": "Gets information from Google.", "icons": "128": "icon_128.png" , "background": "persistent": false, "scripts": <"bg.js"> , "permissions": <"http://*.google.com/", "https://*.google.com/">, "browser_action": "default_title": "", "default_icon": "icon_19.png", "default_popup": "popup.html" 3. Bản vẽ xây dựng của extension

3.1 Backgroud page

Backgroud pages được định nghĩa bởi vì backgroud.html có thể bao gồm code JavaScript để tinh chỉnh và điều khiển các sự kiện của extension. Bao gồm hai hình dáng backgroud pages: persistent backgroud pages và sự kiện pages. Persistent backgroud pages luôn luôn mở. Còn event pages chỉ mở lúc cần. Khuyến khích sử dụng event page trừ khi bạn cần backgroud page chạy trong đều thời điểm.

Xem thêm: Tìm Hiểu Về Mạng 3G Là Gì ? Sự Khác Biệt Giữa Chúng Tìm Hiểu Sự Khác Nhau Giữa 2 Loại

3.2. UI pages

Extension rất có thể chứa đa số trang HTML thông thường nhằm mục tiêu hiển thị UI của extension. Một browser action có thể có một popup, cũng được xây dựng vị html. Bất kể extension nào cũng có thể có một option page, chiếc mà cho những người dùng tùy chỉnh hoạt động của extension. Một kiểu page quan trọng khác là override page. Cùng cuối cùng, chúng ta cũng có thể sử dụng tabs.create hoặc window.open() để hiển thị hồ hết file html không giống nữa. Hình dưới đây minh họa các thành phần UI cơ phiên bản của extension:

*

3.3 nội dung scripts

Làm thay nào nhằm extension hoàn toàn có thể tương tác với website hiện trên ? câu hỏi này được trở lời bởi nội dung script, chúng ta chỉ có thể lấy thông tin, cố kỉnh đổi, thêm mới các element trên trang web với nội dung script. Chúng ta không thể làm vấn đề này trên các đối tượng người sử dụng backgroud hay popup.Hình dưới diễn đạt vai trò của content script:

*

Content scripts không trọn vẹn cắt đứt contact với extension phụ thân của chúng. Nó có thể trao đổi thông điệp với extension cha. Lấy một ví dụ một nội dung script hoàn toàn có thể gửi thông điệp bất kì lúc nào tìm thấy một RSS feed trong trang web. Hoặc backgroud page hoàn toàn có thể gửi thông điệp đến content script để chuyển đổi giao diện của trang web. Hình bên dưới minh họa quan hệ giữa chúng:

*

4. Phát hành một extension đơn giản và dễ dàng cho Google Chrome

Trong test này tôi sẽ xây dựng một extension đơn giản và dễ dàng để lấy một số thông tin cơ bản của một pull request bên trên github.Đầu tiên ta cần cấu hình file manifest

manifest.json

"name": "Pull request analytics", "manifest_version": 2, "version": "1.0", "description": "This extension allows you analytics infomation of pull request in github", "icons": "128": "images/icon.png" , "browser_action": "default_title": "Pull request analytics", "default_icon": "images/icon.png", "default_popup": "popup.html" , "content_scripts": < "matches": < "*://github.com/*" >, "js": < "scripts/jquery.10.2.min.js", "scripts/content.js" >, "run_at": "document_start" >, "permissions": < "tabs" >, "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self""Bỏ qua một trong những thông tin cơ bản, tôi xin phân tích và lý giải một số configs quan tiền trọng:

"browser_action": thông số kỹ thuật này dành cho tất cả những page, bao hàm tooltip khi di loài chuột vào, icon, popup page khi người dùng click vào icon."permissions": chỉ định và hướng dẫn phạm vi với quyền nhưng extension hoàn toàn có thể tương tác. Có thể là tabs, bookmark, storange,.. Ở phía trên tôi hướng dẫn và chỉ định phạm vi liên can là các tabs.

Xem thêm: Từ Vựng Tiếng Anh Về Các Hình Tam Giác Tiếng Anh Là Gì, 14 Hình Khối Trong Tiếng Anh

Content.jsỞ trên đây tôi sẽ thực hiện việc lấy tin tức trong DOM trên page hiện tại. Chúng ta hoàn toàn rất có thể dùng jquery để find bất kể element nào trong DOM cùng lấy quý hiếm của chúng. Gồm một lưu ý quan trọng tại chỗ này là: từ content script họ không thể truyền tài liệu tới popup page (trang sẽ hiện thị thông tin của pull request hiện tại). Vị vậy, tất cả một phương án để thực hiện điều này, nó khá ngược với đều gì họ nghĩ. Đầu tiên, khi popup ban đầu được mở lên, tôi sẽ send một message về content script. Triển khai như bên dưới:

window.addEventListener("DOMContentLoaded", function () chrome.tabs.query( active: true, currentWindow: true , function (tabs) chrome.tabs.sendMessage( tabs<0>.id, from: "popup", subject: "DOMInfo", setDOMInfo); ););Sau đó, tại content.js tôi nhận message này:

chrome.runtime.onMessage.addListener(function (msg, sender, response) if ((msg.from === "popup") && (msg.subject === "DOMInfo")) var commentCount = $(".review-comments").length; var numberOfChangedCode = $(".text-green").html(); numberOfChangedCode = numberOfChangedCode.replace("+", ""); numberOfChangedCode = numberOfChangedCode.replace(",", ""); var customerConvension = ""; var prInfo = issue: $(".issue-link").first().text(), author: $(".pull-header-username").text(), commentCount: commentCount, numberOfChangedCode: numberOfChangedCode, changedFiles: $("#files_tab_counter").text(), commentsPerchangedLineCode: commentCount/parseInt(numberOfChangedCode) * 100 ; response(prInfo); );Như chúng ta thấy sinh hoạt code trên, tôi thực hiện lấy tin tức của pull request dựa trên những thẻ html bao gồm sẵn (tôi sử dụng jquery) như: số comment, author, issue number, tổng số dòng code rứa đổi, số file cầm đổi. Tiếp đó, tôi tổng hợp chúng vào một object với response nó cho tới popup page.

Popup.jsTại đây ngoài việc send một message gởi về content script như code phía trên, tôi yêu cầu bind những tin tức nhận được từ content script lên html

function setDOMInfo(info) document.getElementById("issue").textContent = info.issue; document.getElementById("totalComments").textContent = info.commentCount; document.getElementById("author").textContent = info.author; document.getElementById("totalComments").textContent = info.commentCount; document.getElementById("changedCode").textContent = info.numberOfChangedCode; document.getElementById("changedFiles").textContent = info.changedFiles; document.getElementById("ratio").textContent = info.commentsPerchangedLineCode + " %";Popup.html

Pull request info

Issue: N/A
Author: N/A
Total of comments: N/A
Number of changed lines: N/A
Changed files: N/A
Comments per changed lines(%): N/A