Bạn đang tìm Hướng dẫn viết extension chrome ? Không có gì ngạc nhiên khi trình duyệt yêu thích của tôi là Google Chrome. Tôi thích nó vì nó nhanh, đáng tin cậy, không có lỗi (rất hiếm) và nó có giao diện đẹp. Cũng có những thứ mà tôi thấy giá trị hơn. Rõ ràng là bạn có thể tạo một phần mở rộng (hoặc các 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 mở cho cộng đồng và Chrome là một trong số đó. Nếu bạn cần một cái gì đó và chưa làm được, bạn có thể tự phát triển nó.
Vì vậy, vào cuối bài đăng này, bạn sẽ thấy tiện ích mở rộng extension Chrome này đang chạy bằng hầu hết các kỹ thuật được mô tả bên dưới. Bạn có thể tải xuống ví dụ hoàn chỉnh bằng cách sử dụng nút “Tải xuống” ở đầu trang này.
Tại sao bạn nên viết extension chrome của riêng mình
Tô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 quy trình làm việc của họ. Phần mềm chúng ta sử dụng sẽ giúp ích cho chúng ta và chúng ta không nên lãng phí thời gian vào nó. Việc phát triển một tiện ích mở rộng / plugin cho trình chỉnh sửa hoặc trình duyệt yêu thích của bạn sẽ không chỉ giúp ích cho bạn mà còn cả những lập trình viên khác, những người sớm hay muộn cũng gặp phải tình huống tương tự. Nếu thiếu thứ gì đó, bạn có thể tự tạo và điều này khá dễ dàng với Chrome. Mô hình hóa môi trường xung quanh nhu cầu của bạn là chìa khóa để đạt được hiệu quả.
Phát triển và thử nghiệm extension chrome
May mắn thay, có một cách để kiểm tra tiện ích mở rộng của bạn mà không cần 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:
https://chrome.google.com/extensions
Đảm bảo bạn đã chọn “Chế độ nhà phát triển” và nhấp vào nút “Tải tiện ích mở rộng đã giải nén …”. Sau đó, chỉ cần chọn thư mục từ ổ cứng của bạn nơi chứa các tệp mở rộng.
sơ đồ kiến trúc
Đây là sơ đồ kiến trúc của tiện ích mở rộng Chrome:
Bây giờ chúng ta hãy xem xét kỹ hơn từng thành phần trong kiến trúc hiện ra
Điểm bắt đầu cho một phần mở rộng là tệp manifest.json. Nó phải chứa một đối tượng JSON hợp lệ. Ví dụ:
{“name”: “BrowserActionExtension”,
“phiên bản”: “0.0.1”,
“phiên bản kê khai”: 2,
“hành động của trình duyệt”: {
“default_title”: “Đây là một chú giải công cụ”,
“default_popup”: “popup.html”}
}
Thuộc tính bắt buộc là tên, phiên bản và phiên bản tệp kê khai. Phiên bản có thể là bất kỳ số nào từ 1 đến 4, một số nguyên được phân tách bằng dấu chấm. Đây là những gì hệ thống tự động cập nhật của Google sử dụng. Đây là cách nó biết khi nào cần cập nhật tiện ích mở rộng của bạn. Giá trị của tệp kê khai phải là số nguyên 2.
Tệp kê khai có thể chứa các thuộc tính khác tùy thuộc vào loại tiện ích mở rộng bạn cần, nhưng tôi sẽ chỉ mô tả những thuộc tính mà tôi thấy thú vị.
trang nền
Mỗi tiện ích mở rộng có một trang nền ẩn đượ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 thiết. Google khuyến khích các nhà phát triển sử dụng các trang sự kiện vì nó 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 biết rằng đây cũng là nơi bạn nên đặt logic và khởi tạo chính của mình. Thông thường, trang nền / tập lệnh đóng vai trò là cầu nối giữa các phần khác nhau của tiện ích mở rộng.
Đây là cách bạn nên mô tả nó trong tệp kê khai của mình:
“lai lịch”: {
“script”: [“background.js”],
“dai dẳng”: false / true
}
Như bạn có thể đoán, nếu thuộc tính liên tục là false, thì bạn đang sử dụng trang sự kiện. Nếu không, bạn sẽ sử dụng một trang nền cố định.
nội dung kịch bản
Nếu bạn cần truy cập DOM của trang hiện tại, bạn cần sử dụng các tập lệnh nội dung. Mã chạy trong ngữ cảnh của trang web hiện tại, có nghĩa là nó sẽ được thực thi mỗi lần làm mới. Để thêm một tập lệnh như vậy, hãy sử dụng cú pháp sau.
“nội dung kịch bản”: [
{
“match”: [“https: // * / *”, “https: // * / *”],
“js”: [“content.js”]
}
]
Hãy nhớ rằng giá trị của các kết quả phù hợp sẽ xác định các trang mà tập lệnh của bạn sẽ được sử dụng. Đọc thêm về các mẫu phù hợp tại đây.
Giao diện người dùng
Có một số cách để xây dựng giao diện người dùng (Giao diện người dùng) cho tiện ích mở rộng của bạn. Dưới đây là bốn cách phổ biến nhất.
hoạt động của trình duyệt
Hầu hết các nhà phát triển sử dụng thuộc tính ‘browser_action’ để xây dựng các plugin của họ. Sau khi thiết lập, một biểu tượng đại diện cho tiện ích mở rộng của bạn sẽ được đặt ở phía bên phải của thanh địa chỉ. Sau đó, người dùng có thể nhấp vào biểu tượng và mở một cửa sổ có nội dung HTML mà bạn kiểm soát.
Tệp kê khai phải chứa dữ liệu sau:
“hành động của trình duyệt”: {
“biểu tượng mặc định”: {
“19”: “icon / 19×19.png”,
“38”: “biểu tượng / 38×38.png”
},
“default_title”: “Đây là một chú giải công cụ”,
“default_popup”: “popup.html”
}
default_title là một chú giải công cụ nhỏ xuất hiện khi người dùng di chuột qua biểu tượng của bạn. default_popup là tệp HTML thực được tải trong cửa sổ bật lên. Bạn cũng có thể đặt biểu tượng của mình lên trên biểu tượng của mình. Bạn có thể làm điều này trong một tập lệnh nền. Ví dụ:
chrome.browserAction.setBadgeText ({text: “yeah”});
Đây là đoạn mã tôi đã sử dụng để tạo hình ảnh trên.
thao tác trang
Thuộc tính page_action tương tự như hành động của trình duyệt, nhưng biểu tượng được hiển thị bên trong thanh địa chỉ:
Đ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 thời điểm hiển thị nó. Ví dụ, trong hình trên, biểu tượng RSS sẽ chỉ xuất hiện nếu trang hiện tại chứa liên kết đến nguồn cấp RSS. Nếu bạn cần hiển thị biểu tượng của mình mọi lúc, tốt hơn nên sử dụng browser_action trực tiếp.
Để thêm một hành động trên trang, hãy nhập mã sau vào tệp kê khai:
“page_action”: {
“biểu tượng mặc định”: {
“19”: “image / icon19.png”,
“38”: “image / icon38.png”
},
“default_title”: “Google Mail”,
“default_popup”: “popup.html”
}
Không giống như biểu tượng hành động của trình duyệt, biểu tượng hành động của trang không có logo.
Những công cụ phát triển
Tôi sử dụng DeveloperTools rất nhiều và Chrome cung cấp một cách để thêm các tab mới vào công cụ, điều này thật tuyệt. Điều đầu tiên bạn cần làm là thêm một trang HTML sẽ tải khi bảng điều khiển mở ra:
“devtools_page”: “devtools.html”
Không cần đặt bất kỳ HTML nào bên trong trang, ngoài liên kết đến tệp JavaScript, sẽ tạo tab:
Đầu tiên
<script src=”devtools.js”> </script>;
Sau đó, bao gồm mã sau trong tệp devtools.js:
chrome.devtools.panels.create (
“TheNameOfYourExtension”,
“img / icon16.png”,
“index.html”,
Đặc trưng() {
}
);
Bây giờ, đoạn mã trên sẽ thêm một tab mới có tên là TheNameOfYourExtension, khi nhấp vào, trình duyệt sẽ tải index.html trong DeveloperTools.
Thanh địa chỉ
Hộp đôi là một từ khóa xuất hiện trên thanh địa chỉ Chrome. Ví dụ: nếu bạn thêm thuộc tính sau vào tệp kê khai của mình:
“omnibox”: {“keyword”: “yes”}
Sau đó, thêm mã sau vào tập lệnh nền:
chrome.omnibox.onInputChanged.addListener (function (text, suggest) {
Đề xuất([
{content: text + “one”, description: “first”},
{content: text + “second”, description: “second entry”}
]);
});
chrome.omnibox.onInputEntered.addListener (function (text) {
alert (‘Bạn vừa gõ “‘ + text + ‘”‘);
});
Bạn sẽ có thể gõ “có” vào thanh địa chỉ. Sau đó, bạn sẽ thấy một cái gì đó như thế này:
Nhấp vào tab sẽ xuất hiện màn hình sau:
Tất nhiên, với API chrome.omnibox, bạn có thể chấp nhận và tương tác với đầu vào của người dùng.
API
Bạn có thể làm nhiều việc khác nhau trong tiện ích mở rộng của mình. Ví dụ: bạn có thể truy cập dấu trang hoặc lịch sử người dùng. Bạn có thể di chuyển, tạo tab và 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 để hiểu rõ hơn về cách làm cho những điều này hoạt động.
Điều 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 tiện ích mở rộng của bạn. Ví dụ: các tập lệnh nội dung của bạn không thể truy cập chrome.devtools.panels hoặc các tập lệnh bên trong thẻ DeveloperTools không thể đọc DOM của trang. Vì vậy, nếu bạn đang tự hỏi tại sao một cái gì đó không hoạt động, đây có thể là lý do tại sao.
thông tin
Như tôi đã đề cập ở trên, không phải lúc nào bạn cũng có quyền truy cập vào API bạn muốn sử dụng. Nếu vậy, bạn nên sử dụng tính năng nhắn tin. Có hai loại tin nhắn – yêu cầu một lần và kết nối liên tục.
yêu cầu một lần
Kiể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ờ trả lời. Ví dụ: bạn có thể đặt mã sau trong một tập lệnh nền:
chrome.extension.onMessage.addListener (function (request, sender, sendResponse) {
switch (requestType) {
Trường hợp “được tải bằng dom”:
alert (request.data.myProperty);
nghỉ ngơi;
}
trả về true;
});
Sau đó, sử dụng mã sau trong tập lệnh nội dung của bạn:
window.addEventListener (“Tải”, function () {
chrome.extension.sendMessage ({
loại: “dom-load”,
dữ liệu: {
thuộc tính của tôi: “giá trị”
}
});
}, thực tế);
Dưới đây là cách lấy thông tin về DOM của trang hiện tại và sử dụng nó trong các tập lệnh nền, thường không có quyền truy cập vào dữ liệu này.
Kết nối liên tục
Sử dụng loại tin nhắn này nếu bạn cần một kênh liên lạc cố định. Trong tập lệnh nội dung của bạn, hãy đặt mã sau:
var port = chrome.runtime.connect ({name: “my-channel”});
port.postMessage ({myProperty: “value”});
port.onMessage.addListener (function (msg) {
// làm gì đó ở đây
});
Sau đó, trong tập lệnh nền, hãy sử dụng mã sau:
chrome.runtime.onConnect.addListener (function (port) {
if (port.name == “Kênh của tôi”) {
port.onMessage.addListener (function (msg) {
// làm gì đó ở đây
});
}
});
Thay thế trang
Thay thế trang là một cách tuyệt vời để tùy chỉnh 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ử, đường link URL của riêng mình. Để thực hiện việc này, hãy thêm mã sau:
“chrome_url_overrides”: {
“<page to cover>;”: “custom.html”
}
Các giá trị có thể có cho <page to override> là dấu trang, lịch sử và newtab. Rất vui khi có một trang tab hoàn toàn mới.
Phần mở rộng mẫu
Với tất cả những gì đã nói, tôi quyết định đưa vào một ví dụ đơn giản để bạn có thể hình dung rõ hơn về bức tranh lớn. Tiện ích mở rộng ví dụ này sử dụng hầu hết những gì tôi đã mô tả ở trên để đặt màu nền # F00 cho tất cả các div trong trang hiện tại. Bạn có thể tải xuống mã nguồn bằng cách sử dụng nút “Tải xuống” ở đầu bài viết này.
manifest.file
Tất nhiên, tôi bắt đầu với tệp kê khai:
{
“name”: “Tiện ích mở rộng trình duyệt”,
“phiên bản”: “0.0.1”,
“phiên bản kê khai”: 2,
“description”: “mô tả …”,
“icon”: {“16”: “icon / 16×16.png”, “48”: “icon / 48×48.png”, “128”: “icon / 128×128.png”},
“omnibox”: {“keyword”: “yes”},
“hành động của trình duyệt”: {
“default_icon”: {“19”: “biểu tượng / 19×19.png”, “38”: “biểu tượng / 38×38.png”},
“default_title”: “Đây là một chú giải công cụ”,
“default_popup”: “browser / popup.html”
},
“lai lịch”: {
“script”: [“background.js”],
“dai dẳng”: false
},
“chrome_url_overrides”: {
“newtab”: “newtab / newtab.html”
},
“nội dung kịch bản”: [{
“match”: [“http: // * / *”, “https: // * / *”],
“js”: [“content.js”]
}],
“devtools_page”: “devtools / devtools.html”
}
Lưu ý rằng bạn có thể sắp xếp các tệp thành các thư mục. Ngoài ra, hãy chú ý đến thuộc tính phiên bản. Thuộc tính này nên được cập nhật mỗi khi tiện ích mở rộng được tải lên cửa hàng.
Script Nền
// omnibox
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
suggest([
{content: "color-divs", description: "Make everything red"}
]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
if(text == "color-divs") colorDivs();
});
// listening for an event / one-time requests
// coming from the popup
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "color-divs":
colorDivs();
break;
}
return true;
});
// listening for an event / long-lived connections
// coming from devtools
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
switch(port.name) {
case "color-divs-port":
colorDivs();
break;
}
});
});
// send a message to the content script
var colorDivs = function() {
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
// setting a badge
chrome.browserAction.setBadgeText({text: "red!"});
});
}
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 Action
Chúng ta bắt đầu bằng tập tin popup.html:
|
1
2
3
4
5
|
// popup.html<script type="text/javascript" src="popup.js"></script><div style="width:200px"> <button id="button">Color all the divs</button></div> |
Sau đó chúng ta tạo tập tin popup.js:
// popup.js
window.onload = function() {
document.getElementById("button").onclick = function() {
chrome.extension.sendMessage({
type: "color-divs"
});
}
}
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.
DeveloperTools
window.onload = function() {
var port = chrome.extension.connect({ name: "color-divs-port" });
document.getElementById("button").onclick = function() {
port.postMessage({ type: "color-divs"});
}
}
Đố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 dung
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
switch(message.type) {
case "colors-div":
var divs = document.querySelectorAll("div");
if(divs.length === 0) {
alert("There are no any divs in the page.");
} else {
for(var i=0; i<divs.length; i++) {
divs[i].style.backgroundColor = message.color;
}
}
break;
}
});
Tập lệnh nội dung lắng nghe thông báo, chọn tất cả các div trên trang hiện tại và thay đổi màu nền của chúng. Lưu ý đối tượng mà tôi đang gắn vào người nghe. trong tập lệnh có nội dung chrome.extension.onMessage .
Trang tùy chỉnh Tab mới
Điều cuối cùng mà tiện ích mở rộng này làm là tùy chỉnh trang Tab mới . Chúng tôi có thể dễ dàng thực hiện việc này bằng cách chỉ cần trỏ thuộc tính newtab vào tệp newtab / newtab.html :
"chrome_url_overrides": {
"newtab": "newtab / newtab.html"
}
Lưu ý rằng bạn không thể sao chép trang tab mới . Ý tưởng của tính năng này là thêm chức năng hoàn toàn khác. Đây là những gì Google phải nói:
Đừng cố bắt chước trang tab mới mặc định. API được yêu cầu để tạo một phiên bản hơi khác của trang tab mới mặc định – bao gồm các trang phổ biến, trang đã đóng gần đây, lời nhắc, chủ đề, v.v. – chưa tồn tại. Trước khi họ làm, tốt hơn hết bạn nên thử làm một điều gì đó hoàn toàn khác.
Gỡ lỗi
Việc viết tiện ích mở rộng cho Google Chrome không phải lúc nào cũng dễ dàng và bạn có thể gặp một số vấn đề. Điều tuyệt vời là bạn vẫn có thể sử dụng các biến đầu ra của bảng điều khiển để giúp gỡ lỗi. Bạn có thể thêm console.log vào tập lệnh nền hoặc tập lệnh nội dung. Tuy nhiên, điều này không hoạt động đối với các tập lệnh chạy trong ngữ cảnh của các công cụ dành cho nhà phát triển, trong trường hợp đó, bạn có thể cân nhắc sử dụng phương thức alert vì nó sẽ hoạt động ở mọi nơi.
Tóm tắt
Theo tôi, Chrome là một trong những trình duyệt tốt nhất hiện có. Các nhà phát triển của Google đã làm cho việc tạo tiện ích mở rộng tương đối dễ dàng bằng cách cho phép chúng tôi tạo tiện ích mở rộng bằng HTML, CSS và JavaScript.
Có, có một số phần khó, nhưng nhìn chung, chúng tôi có thể tạo ra các plugin có giá trị. Lưu ý rằng bài viết này không đề cập đến mọi thứ liên quan đến việc phát triển các tiện ích mở rộng của Chrome. Ngoài ra còn có một số thứ hữu ích khác, chẳng hạn như menu ngữ cảnh, trang tùy chọn và thông báo. Đối với các chủ đề tôi chưa đề cập, hãy xem sách hướng dẫn để biết thêm thông tin.
