Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Hướng dẫn: Di chuyển sang Manifest V2

Manifest phiên bản 1 đã không được dùng nữa trong Chrome 18 và dịch vụ hỗ trợ sẽ ngừng hoạt động theo lịch trình hỗ trợ Manifest phiên bản 1. Các thay đổi từ phiên bản 1 sang phiên bản 2 thuộc 2 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, sau đó là bản tóm tắt chi tiết hơn về ý nghĩa của những thay đổi này và lý do chúng được thực hiện.

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 API chrome.browserActions?
Thay thế browser_actions bằng thuộc tính số ít browser_action.
Thay thế chrome.browserActions với chrome.browserAction.
Thay thế thuộc tính icons bằng default_icon.
Thay thế thuộc tính name bằng default_title.
Thay thế thuộc tính popup bằng default_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 API chrome.pageActions?
Thay thế page_actions với page_action.
Thay thế chrome.pageActions với chrome.pageAction.
Thay thế thuộc tính icons bằng default_icon.
Thay thế thuộc tính name bằng default_title.
Thay thế thuộc tính popup bằng default_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() hay chrome.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ính background.
Thêm một thuộc tính scripts hoặc page có chứa mã cho trang.
Thêm một thuộc tính persistent và đặt thành false để chuyển đổi trang nền của bạn thành một 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 cùng dòng (chẳng hạn như onclick, v.v.) không?
Xoá các đoạn mã đó khỏi mã HTML, di chuyển chúng 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à không bắt buộc phải có Chính sách bảo mật nội dung riêng cho các tài nguyê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.
Mã hoặc thư viện của bạn có đang sử dụng eval(), Function(), innerHTML, setTimeout() mới hay đang 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 một thư viện thân thiện với CSP, chẳng hạn như 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, bằng cách sử dụng postMessage() để giao tiếp với trang được đưa vào 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?
Cân nhắc việc tải thư viện xuống và đóng gói 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

Manifest phiên bản 2 có một số thay đổi đối với API hành động của trình duyệt và API hành động của 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 các 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ề 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 ở dạng số ít là browser_action và chrome.browserAction.
Trong tài sản browser_actions cũ, có các tài sản icons, 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 của thao tác trên trình duyệt
default_name cho văn bản xuất hiện trong chú thích khi bạn di chuột lên huy hiệu
default_popup cho trang HTML đại diện cho giao diện người dùng của thao tác trên trình duyệt (và giờ đây, đây phải là một chuỗi, không thể là một đối tượng)

Thay đổi đối với các thao tác trên trang

Tương tự như các thay đổi đối với thao tác trên trình duyệt, API thao tác 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 ở dạng số ít là page_action và chrome.pageAction.
Trong tài sản page_actions cũ, có các tài sản icons, name và popup. Những thông tin này đã được thay thế bằng:
default_icon cho biểu tượng huy hiệu hành động trên trang
default_name cho văn bản xuất hiện trong chú thích khi bạn di chuột lên huy hiệu
default_popup cho trang HTML đại diện cho giao diện người dùng của thao tác trên trang (và giờ đây, đây phải là một chuỗi, không thể 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 background.
Thuộc tính chrome.self đã bị xoá, hãy sử dụng chrome.extension.
Thuộc tính Port.tab đã được thay thế bằng Port.sender.
API chrome.extension.getTabContentses() và chrome.extension.getExtensionTabs() đã được thay thế bằng chrome.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õ những tác động của chính sách.

Không cho phép tập lệnh và trình xử lý sự kiện cùng dòng

Do sử dụng Chính sách bảo mật nội dung, bạn không thể sử dụng thẻ <script> nằm cùng dòng với nội dung HTML 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 cùng dòng (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">

Những tiện ích này sẽ không hoạt động trong các tiện ích của nền tảng Manifest V2. Xoá trình xử lý sự kiện cùng dòng, đặt chúng vào tệp JS bên ngoài và sử dụng addEventListener() để đăng ký trình xử lý sự kiện cho chúng. Ví dụ: trong mã JS, hãy sử dụng:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

Đây là một cách tách biệt hành vi của tiện ích khỏi mã đánh dấu giao diện người dùng một cách rõ ràng hơn nhiều.

Nhúng nội dung

Có một số trường hợp mà tiện ích của bạn có thể nhúng nội dung có thể được 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 trên các 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 dùng trong các tập lệnh nội dung được chèn vào các trang web, thì bạn cần 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ể dùng các tài nguyên này:

{
...
  "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, điều này ngăn chặn những 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ó những lúc 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ư mã jQuery hoặc 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 thiết bị (chẳng hạn như jQuery) và đóng gói thư viện đó cùng với tiện ích của bạn.
Bạn có thể nới lỏng CSP theo cách có giới hạn 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. Để thêm một thư viện như Google Analytics, bạn cần thực hiện theo cách 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 đồ manifest v2 mới là các tiện ích không còn có 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 các chuỗi mã JS đến các hàm sẽ khiến eval() được 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 nhất định, được biết là có 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 riêng của chúng, những trang này bị từ chối quyền truy cập vào chrome.* API. Để sử dụng eval() và các phương thức tương tự trong Chính sách bảo mật nội dung mới:

Tạo một 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ê những trang bạn muốn chạy trong hộp cát.
Sử dụng tính năng truyền thông báo qua postMessage() để giao tiếp với trang được cách ly.

Để 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ề Đánh giá hộp cát.

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 ứng dụng và tiện ích an toàn hơn và có cấu trúc mạnh mẽ. Để xem danh sách đầy đủ các thay đổi từ tệp kê khai phiên bản 1 sang 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 đánh giá hộp cát. 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 của chúng tôi và phần giới thiệu hay trên HTML5Rocks.