Extension

     

Trong những trình trông nom văn minh ngày nay, số đông chúng rất nhiều hộ trợ phần lớn phầm mềm không ngừng mở rộng (extensions) nhằm giúp bổ sung cập nhật rất nhiều thiên tài hữa ích cho trình chăm bẵm. Đi đầu về hộ trợ extension phải kể đến Firefox. Từ rất mất thời gian, extension chính là ưu thế duy nhất của Firefox.Tuy nhiên, với việc trở nên tân tiến khỏe khoắn của Google chrome, nó đã nổi lên là 1 trình để ý được rất nhiều người dùng tuyệt nhất, cùng với đó là sự quan tâm của các thiết kế viên vào Việc tạo ra extension cho nó. Trong nội dung bài viết này tôi mong mỏi giới thiệu với các bạn hồ hết tư tưởng, yếu tắc cơ bản vào một chrome extension, mặt khác kiểm tra một extension bé dại để mang lên tiếng của một pull request trên github. Thứ nhất, bọn họ đã đi kiếm phát âm chrome extension là gì và thành phần cơ phiên bản của chính nó có đa số gì.

Bạn đang xem: Extension

1. Tổng quan

Extension là một tập những tệp tin như: Html, css, javascript, images và bất kỳ các yếu tắc khác nhưng các bạn rất cần phải nén lại trong một thư mục. Nó nhằm mục đích mở rộng đa số chức năng mang lại trình để mắt tới Google Chrome. Extentions về cơ bản là phần lớn website pages, bọn chúng có thể sử dụng toàn bộ các APIs nhưng trình phê duyệt hỗ trợ, từ XMLHttpRequest cho tới JSON, HTML5. Như những chúng ta cũng có thể thấy nó đích thực không thật phức tạp nhỏng họ nghĩ.

2. Các nhân tố chính

2.1 Extension UIs

Mỗi extension hoàn toàn có thể có một browser action hoặc page action. Chọn một browser action Lúc extension là liên quan cho hầu hết các trang. Chọn một page action lúc nó các chức năng bên trên đầy đủ trang nhất mực. Những extensions rất có thể biểu hiện theo các cách khác như: thêm context menu, hỗ trợ một option page, hoặc thực hiện nội dung script để đổi khác hiện trên web page,...Các bạn cũng có thể biết một số ví dụ về extension UI:

Google Mail Checker extensionMappy extensionSet Page Color extension
*
*
*

2.2 Files

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

Một file manifestMột hoặc những file HTMLOptional: Một hoặc những tệp tin JavaScriptOptional: Bất kì file gì nhưng bạn phải, ví dụ: images

ManifestFile manifest là một trong những file json nhằm mục đích cung cấp những ban bố cơ bản về extension như: Name, version, mô tả tìm kiếm, ibé, backgroud, permisions, browser_action, ... Các chúng ta cũng có thể tò mò chi tiết về thông số kỹ thuật tệp tin manifest trên phía trên.Dưới đấy là một minh họa cho 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. Kiến trúc của extension

3.1 Backgroud page

Backgroud pages được có mang bởi vì backgroud.html hoàn toàn có thể bao hàm code JavaScript để điều khiển và tinh chỉnh các sự kiện của extension. Có nhì kiểu dáng backgroud pages: persistent backgroud pages cùng sự kiện pages. Persistent backgroud pages luôn luôn luôn luôn mlàm việc. Còn event pages chỉ msống Lúc buộc phải. khích lệ áp dụng sự kiện page trừ khi chúng ta đề nghị backgroud page chạy vào hầu như thời khắc.

Xem thêm: Hướng Dẫn Sử Dụng Máy Pos Là Gì? Cách Dùng Những Loại Máy Pos Mới Nhất 2021

3.2. UI pages

Extension rất có thể đựng đông đảo trang HTML thường thì nhằm mục tiêu hiển thị UI của extension. một browser action hoàn toàn có thể tất cả một popup, cũng được tạo ra vị html. Bất kì extension nào cũng có thể có một option page, dòng cơ mà cho tất cả những người sử dụng thiết lập hoạt động vui chơi của extension. Một vẻ bên ngoài page đặc biệt quan trọng không giống là override page. Và cuối cùng, chúng ta có thể sử dụng tabs.create hoặc window.open() để hiển thị gần như tệp tin html khác nữa. Hình sau đây minc họa các nguyên tố UI cơ bản của extension:

*

3.3 Content scripts

Làm nạm như thế nào để extension có thể liên can cùng với trang web hiện tại ? Câu hỏi này được trngơi nghỉ lời vị content script, các bạn chỉ có thể rước lên tiếng, đổi khác, thêm new những element trên trang web với nội dung script. Các các bạn quan yếu làm điều đó bên trên những đối tượng người sử dụng backgroud giỏi popup.Hình dưới biểu thị phương châm của content script:

*

Content scripts không trọn vẹn cắt đứt tương tác cùng với extension phụ vương của chúng. Nó hoàn toàn có thể hiệp thương thông điệp cùng với extension phụ thân. lấy một ví dụ một nội dung script có thể gửi thông điệp bất cứ lúc nào search thấy một RSS feed trong website. Hoặc backgroud page rất có thể gửi thông điệp mang lại content script nhằm chuyển đổi đồ họa của trang web. Hình dưới minch họa quan hệ giữa chúng:

*

4. Xây dựng một extension đơn giản và dễ dàng đến Google Chrome

Trong chạy thử này tôi sẽ xây dựng dựng một extension dễ dàng và đơn giản để đưa một số trong những công bố cơ bạn dạng của một pull request trên github.Trước hết ta cần thông số kỹ thuật 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/inhỏ.png" , "browser_action": "default_title": "Pull request analytics", "default_icon": "images/ibé.png", "default_popup": "popup.html" , "content_scripts": < "matches": < "*://github.com/*" >, "js": < "scripts/jquery.10.2.min.js", "scripts/nội dung.js" >, "run_at": "document_start" >, "permissions": < "tabs" >, "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self""Bỏ qua một số thông tin cơ bản, tôi xin giải thích một trong những configs quan liêu trọng:

"browser_action": Cấu hình này dành cho tất cả những page, bao hàm tooltip Lúc di loài chuột vào, inhỏ, popup page Lúc người dùng cliông chồng vào inhỏ."permissions": Chỉ định phạm vi cùng quyền nhưng extension có thể shop. cũng có thể là tabs, bookmark, storange,.. Ở đây tôi chỉ định phạm vi thúc đẩy là các tabs.

Xem thêm: Nội Dung Văn Bản ' Thông Tư 162 Năm 2014 Của Bộ Tài Chính

Content.jsTại trên đây tôi đã tiến hành vấn đề mang báo cáo trong DOM trên page hiện tại. Chúng ta hoàn toàn hoàn toàn có thể cần sử dụng jquery nhằm find bất kể element làm sao vào DOM với mang cực hiếm của bọn chúng. Có một chú ý đặc trưng ở chỗ này là: tự content script họ cần thiết truyền dữ liệu cho tới popup page (trang đã hiện thị lên tiếng của pull request hiện tại). Do vậy, có một phương án nhằm triển khai vấn đề đó, nó tương đối ngược cùng với hồ hết gì họ nghĩ về. Trước tiên, Lúc popup bước đầu được mở lên, tôi sẽ sover một message về nội dung script. Thực hiện tại nlỗi mặt 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 đó, trên content.js tôi dìm message này:

chrome.runtime.onMessage.addListener(function (msg, sender, response) if ((msg.from === "popup") &và (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ỏng các bạn thấy làm việc code trên, tôi triển khai lấy đọc tin của pull request dựa trên các thẻ html tất cả sẵn (tôi cần sử dụng jquery) như: số bình luận, author, issue number, tổng số mẫu code đổi khác, số tệp tin biến hóa. Tiếp kia, tôi tổng hòa hợp chúng nó vào một object với response nó tới popup page.

Popup.jsTại đây kế bên bài toán sover một message gửi về nội dung script nlỗi code phía bên trên, tôi nên bind phần đông đọc tin nhận thấy 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


Chuyên mục: Đầu tư