Tệp kê khai phiên bản 1 không còn được dùng trong Chrome 18 và dịch vụ hỗ trợ sẽ ngừng hoạt động theo lịch hỗ trợ tệp kê khai phiên bản 1. Các thay đổi từ phiên bản 1 đến phiên bản 2 thuộc hai danh mục lớn: Thay đổi về API và Thay đổi về bảo mật.
Tài liệu này cung cấp danh sách kiểm tra để di chuyển các tiện ích Chrome của bạn từ tệp kê khai phiên bản 1 sang phiên bản 2, theo sau là phần tóm tắt chi tiết hơn về ý nghĩa của những thay đổi này và lý do thực hiện các thay đổi đó.
Danh sách kiểm tra các thay đổi về API
Bạn đang sử dụng thuộc tính
browser_actions
hay APIchrome.browserActions
?Thay thế
browser_actions
bằng thuộc tínhbrowser_action
số ít.Thay thế
chrome.browserActions
vớichrome.browserAction
.Thay thế thuộc tính
icons
bằngdefault_icon
.Thay thế thuộc tính
name
bằngdefault_title
.Thay thế thuộc tính
popup
bằngdefault_popup
(và thuộc tính này hiện phải là một chuỗi).Bạn đang sử dụng thuộc tính
page_actions
hay APIchrome.pageActions
?Thay thế
page_actions
vớipage_action
.Thay thế
chrome.pageActions
vớichrome.pageAction
.Thay thế thuộc tính
icons
bằngdefault_icon
.Thay thế thuộc tính
name
bằngdefault_title
.Thay thế thuộc tính
popup
bằngdefault_popup
(và thuộc tính này hiện phải là một chuỗi).Bạn có đang sử dụng thuộc tính
chrome.self
không?Thay thế bằng
chrome.extension
.Bạn có đang sử dụng thuộc tính
Port.tab
không?Thay thế bằng
Port.sender
.Bạn đang sử dụng API
chrome.extension.getTabContentses()
haychrome.extension.getExtensionTabs()
?Thay thế bằng
chrome.extension.getViews( { "type" : "tab" } )
.Tiện ích của bạn có sử dụng trang nền không?
Thay thế thuộc tính
background_page
bằng thuộc tínhbackground
.Thêm thuộc tính
scripts
hoặcpage
chứa mã cho trang.Thêm một thuộc tính
persistent
và đặt thuộc tính đó thànhfalse
để chuyển đổi trang nền thành trang sự kiện
Danh sách kiểm tra các thay đổi về bảo mật
Bạn có đang sử dụng các khối tập lệnh nội tuyến trong trang HTML không?
Xoá mã JS có trong thẻ
<script>
và đặt mã đó vào một tệp JS bên ngoài.Bạn có đang sử dụng trình xử lý sự kiện nội tuyến (như onclick, v.v.) không?
Xoá các tệp đó khỏi mã HTML, di chuyển các tệp đó vào một tệp JS bên ngoài và sử dụng
addEventListener()
.Tiện ích của bạn có chèn tập lệnh nội dung vào các trang web cần truy cập vào tài nguyên (chẳng hạn như hình ảnh và tập lệnh) có trong gói của tiện ích không?
Xác định thuộc tính web_accessible_resources và liệt kê các tài nguyên (và một Chính sách bảo mật nội dung riêng biệt cho các tài nguyên đó nếu muốn).
Tiện ích của bạn có nhúng các trang web bên ngoài không?
Xác định thuộc tính sandbox (hộp cát).
Mã hoặc thư viện của bạn có sử dụng
eval()
,Function()
mới,innerHTML
,setTimeout()
hay truyền các chuỗi mã JS được đánh giá động không?Sử dụng
JSON.parse()
nếu bạn đang phân tích cú pháp mã JSON thành một đối tượng.Sử dụng thư viện thân thiện với CSP, ví dụ: AngularJS.
Tạo một mục nhập hộp cát trong tệp kê khai và chạy mã bị ảnh hưởng trong hộp cát, sử dụng
postMessage()
để giao tiếp với trang hộp cát.Bạn có đang tải mã bên ngoài, chẳng hạn như jQuery hoặc Google Analytics không?
Hãy cân nhắc việc tải thư viện xuống và đóng gói thư viện đó trong tiện ích của bạn, sau đó tải thư viện đó từ gói cục bộ.
Đưa miền HTTPS phân phát tài nguyên vào danh sách cho phép trong phần "content_security_policy" của tệp kê khai.
Tóm tắt các thay đổi về API
Tệp kê khai phiên bản 2 giới thiệu một số thay đổi đối với API hành động trên trình duyệt và API hành động trên trang, đồng thời thay thế một số API cũ bằng các API mới hơn.
Thay đổi đối với thao tác trên trình duyệt
API thao tác trên trình duyệt có một số thay đổi về cách đặt tên:
- Các thuộc tính
browser_actions
vàchrome.browserActions
đã được thay thế bằng các thuộc tính tương ứng số ítbrowser_action
vàchrome.browserAction
. Trong thuộc tính
browser_actions
cũ, có các thuộc tínhicons
,name
vàpopup
. Các phương thức này đã được thay thế bằng:default_icon
cho biểu tượng huy hiệu thao tác trên trình duyệtdefault_name
cho văn bản xuất hiện trong chú giải công cụ khi bạn di chuột qua huy hiệudefault_popup
cho trang HTML đại diện cho giao diện người dùng cho thao tác trong trình duyệt (và giờ đây, giá trị này phải là một chuỗi, không được là một đối tượng)
Thay đổi đối với hành động trên trang
Tương tự như các thay đổi đối với hành động trong trình duyệt, API hành động trên trang cũng đã thay đổi:
- Các thuộc tính
page_actions
vàchrome.pageActions
đã được thay thế bằng các thuộc tính tương ứng số ítpage_action
vàchrome.pageAction
. Trong thuộc tính
page_actions
cũ, có các thuộc tínhicons
,name
vàpopup
. Các hàm này đã được thay thế bằng:default_icon
cho biểu tượng huy hiệu hành động trên trangdefault_name
cho văn bản xuất hiện trong chú giải công cụ khi bạn di chuột qua huy hiệudefault_popup
cho trang HTML đại diện cho giao diện người dùng cho thao tác trên trang (và hiện tại, đây phải là một chuỗi, không được là một đối tượng)
Xoá và thay đổi API
Một số API tiện ích đã bị xoá và thay thế bằng các API tương đương mới:
- Thuộc tính
background_page
đã được thay thế bằng nền. - Thuộc tính
chrome.self
đã bị xoá, hãy sử dụngchrome.extension
. - Thuộc tính
Port.tab
đã được thay thế bằngPort.sender
. - API
chrome.extension.getTabContentses()
vàchrome.extension.getExtensionTabs()
đã được thay thế bằngchrome.extension.getViews( { "type" : "tab" } )
.
Tóm tắt các thay đổi về bảo mật
Có một số thay đổi liên quan đến bảo mật đi kèm với việc chuyển từ tệp kê khai phiên bản 1 sang phiên bản 2. Nhiều thay đổi trong số này bắt nguồn từ việc Chrome áp dụng Chính sách bảo mật nội dung; bạn nên đọc thêm về chính sách này để hiểu rõ các tác động của chính sách này.
Không cho phép tập lệnh nội tuyến và trình xử lý sự kiện
Do việc sử dụng Chính sách bảo mật nội dung, bạn không thể sử dụng thẻ <script>
cùng dòng với nội dung HTML được nữa. Bạn phải di chuyển các tệp này sang tệp JS bên ngoài. Ngoài ra, trình xử lý sự kiện nội tuyến cũng không được hỗ trợ. Ví dụ: giả sử bạn có mã sau trong tiện ích:
<html>
<head>
<script>
function myFunc() { ... }
</script>
</head>
</html>
Mã này sẽ gây ra lỗi trong thời gian chạy. Để khắc phục vấn đề này, hãy di chuyển nội dung thẻ <script>
sang các tệp bên ngoài và tham chiếu các tệp đó bằng thuộc tính src='path_to_file.js'
.
Tương tự, trình xử lý sự kiện nội tuyến (một tính năng phổ biến và tiện lợi mà nhiều nhà phát triển Web sử dụng) sẽ không thực thi. Ví dụ: hãy xem xét các trường hợp phổ biến như:
<body onload="initialize()">
<button onclick="handleClick()" id="button1">
Các tiện ích này sẽ không hoạt động trong tiện ích của tệp kê khai phiên bản 2. Xoá trình xử lý sự kiện nội tuyến, đặt các trình xử lý sự kiện đó vào tệp JS bên ngoài và sử dụng addEventListener()
để đăng ký trình xử lý sự kiện cho các trình xử lý sự kiện đó. Ví dụ: trong mã JS, hãy sử dụng:
window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);
Đây là cách tách biệt hành vi của tiện ích với mã đánh dấu giao diện người dùng rõ ràng hơn nhiều.
Nhúng nội dung
Trong một số trường hợp, tiện ích của bạn có thể nhúng nội dung có thể sử dụng bên ngoài hoặc đến từ một nguồn bên ngoài.
Nội dung tiện ích trong trang web: Nếu tiện ích của bạn nhúng các tài nguyên (chẳng hạn như hình ảnh, tập lệnh, kiểu CSS, v.v.) được sử dụng trong tập lệnh nội dung được chèn vào trang web, thì bạn cần sử dụng thuộc tính web_accessible_resources để đưa các tài nguyên này vào danh sách cho phép để các trang web bên ngoài có thể sử dụng:
{
...
"web_accessible_resources": [
"images/image1.png",
"script/myscript.js"
],
...
}
Nhúng nội dung bên ngoài: Chính sách bảo mật nội dung chỉ cho phép tải tập lệnh và đối tượng cục bộ từ gói của bạn, giúp ngăn chặn kẻ tấn công bên ngoài đưa mã không xác định vào tiện ích của bạn. Tuy nhiên, có trường hợp bạn muốn tải các tài nguyên được phân phát bên ngoài, chẳng hạn như jQuery hoặc mã Google Analytics. Có hai cách để thực hiện điều này:
- Tải thư viện có liên quan xuống máy (như jQuery) và đóng gói thư viện đó bằng tiện ích của bạn.
Bạn có thể nới lỏng CSP theo cách hạn chế bằng cách đưa các nguồn gốc HTTPS vào danh sách cho phép trong phần "content_security_policy" của tệp kê khai. Để đưa một thư viện như Google Analytics vào, bạn có thể làm như sau:
{ ..., "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", ... }
Sử dụng tính năng đánh giá tập lệnh động
Có lẽ một trong những thay đổi lớn nhất trong lược đồ tệp kê khai v2 mới là các tiện ích không thể sử dụng các kỹ thuật đánh giá tập lệnh động như eval()
hoặc Function()
mới, hoặc truyền chuỗi mã JS đến các hàm sẽ khiến eval()
được sử dụng, chẳng hạn như setTimeout()
. Ngoài ra, một số thư viện JavaScript thường dùng, chẳng hạn như Google Maps và một số thư viện tạo mẫu, được biết là sử dụng một số kỹ thuật này.
Chrome cung cấp một hộp cát để các trang chạy trong nguồn gốc của riêng chúng. Các trang này bị từ chối quyền truy cập vào Chrome.*
API. Để sử dụng eval()
và các tính năng tương tự theo Chính sách bảo mật nội dung mới:
- Tạo mục nhập hộp cát trong tệp kê khai.
- Trong mục nhập hộp cát, hãy liệt kê các trang bạn muốn chạy trong hộp cát.
- Sử dụng tính năng truyền tin qua
postMessage()
để giao tiếp với trang trong hộp cát.
Để biết thêm thông tin chi tiết về cách thực hiện việc này, hãy xem tài liệu về Sandboxing Eval.
Tài liệu đọc thêm
Những thay đổi trong tệp kê khai phiên bản 2 được thiết kế để hướng dẫn nhà phát triển xây dựng các tiện ích và ứng dụng có cấu trúc mạnh mẽ và an toàn hơn. Để xem danh sách đầy đủ các thay đổi từ tệp kê khai phiên bản 1 đến phiên bản 2, hãy xem tài liệu về tệp kê khai. Để biết thêm thông tin về cách sử dụng hộp cát để tách biệt mã không an toàn, hãy đọc bài viết sandboxing eval. Bạn có thể tìm hiểu thêm về Chính sách bảo mật nội dung bằng cách truy cập vào hướng dẫn liên quan đến tiện ích và hướng dẫn hữu ích về HTML5Rocks.