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

Tệp kê khai phiên bản 1 không được dùng nữa trong Chrome 18 và dịch vụ hỗ trợ sẽ bị ngừng hỗ trợ theo lịch hỗ trợ tệp kê khai phiên bản 1. Các thay đổi từ phiên bản 1 sang phiên bản 2 nằm trong hai nhiều danh mục: Thay đổi về API và Thay đổi về tính bảo mật.

Tài liệu này cung cấp danh sách kiểm tra để di chuyển tiện ích của Chrome từ tệp kê khai phiên bản 1 sang phiên bản 2, sau đó là thông tin tóm tắt chi tiết hơn về ý nghĩa và lý do thực hiện các thay đổi đó.

Danh sách kiểm tra về các thay đổi đối với 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 browser_action số ít.

  • 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 bây giờ 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 bây giờ 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 chrome.extension.getTabContentses() hay Các API 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 thuộc tính scripts hoặc page chứa mã cho trang đó.

  • Thêm thuộc tính persistent rồi đặt thuộc tính này thành false để chuyển đổi trang nền của bạn thành một sự kiện trang

Danh sách kiểm tra các thay đổi về bảo mật

  • Bạn có đang sử dụng khối tập lệnh cùng dòng trong trang HTML không?

  • Xoá mã JS có trong thẻ <script> và đặt mã đó trong 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ư nhấp, v.v.) không?

  • Xóa chúng khỏi mã HTML, di chuyển chúng vào tệp JS bên ngoài và sử dụng addEventListener() thay thế.

  • Tiện ích của bạn có đưa tập lệnh nội dung vào các trang web cần truy cập tài nguyên không (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à tùy chọn 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?

  • Định nghĩa thuộc tính sandbox.

  • Mã hoặc thư viện của bạn có đang dùng eval(), Function() mới, innerHTML, setTimeout() hay không nếu không thì chuyển các chuỗi mã JS được đánh giá độ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, ví dụ: AngularJS.

  • Tạo 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ó 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 rồi đóng gói thư viện trong tiện ích của bạn, sau đó tải thư viện từ gói nội bộ.

  • Đưa miền HTTPS phân phát tài nguyên trong "content_security_policy" vào danh sách cho phép một phần của tệp kê khai.

Tóm tắt các thay đổi đối với API

Tệp kê khai phiên bản 2 ra mắt một số thay đổi đối với các API hành động trên trang và API hành động trên trang, đồng thời thay thế một vài API cũ với các API mới.

Các thay đổi đối với thao tác trên trình duyệt

Trình duyệt hành động API giới thiệu một số thay đổi về tên:

  • Các thuộc tính browser_actionschrome.browserActions đã được thay thế bằng các bản sao tương ứng duy nhất browser_actionchrome.browserAction.
  • Trong tài sản browser_actions cũ, có icons, namepopup. Các tham số này đã được thay thế bằng:

  • default_icon cho biểu tượng huy hiệu hành động 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 qua huy hiệu

  • default_popup cho trang HTML thể hiện giao diện người dùng cho thao tác của trình duyệt (và đối tượng này phải là chuỗi, không được là đối tượng)

Các thay đổi đối với hành động 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_actionschrome.pageActions đã được thay thế bằng số ít phiên bản tương tự page_actionchrome.pageAction.
  • Trong tài sản page_actions cũ, có icons, namepopup. Các đã đượ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 qua huy hiệu

  • default_popup cho trang HTML đại diện cho giao diện người dùng của hành động trên trang (và giờ đây giá trị này phải là chuỗi thì không được là đối tượng)

Xoá và thay đổi các API

Một vài API tiện ích đã bị xoá và được 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.
  • Các API chrome.extension.getTabContentses()chrome.extension.getExtensionTabs() có đã được thay thế bởi 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 sử 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õ tác động của chính sách.

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

Do việc sử dụng Chính sách bảo mật nội dung, bạn không thể dùng các thẻ <script> cùng dòng nữa với nội dung HTML. Các tệp này phải được chuyển sang tệp JS bên ngoài. Ngoài ra, trình xử lý sự kiện cùng dòng cũng không được hỗ trợ. Ví dụ: giả sử bạn có mã sau trong tiện ích của mình:

<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 tệp bên ngoài rồi tham chiếu đến chúng bằng thuộc tính src='path_to_file.js'.

Tương tự như vậy, trình xử lý sự kiện cùng dòng – một tính năng xuất hiện và tiện lợi phổ biến được nhiều người sử dụng Nhà phát triển web 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 thao tác 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 các trình xử lý đó. Cho 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 gọn gàng hơn để tách biệt hành vi của tiện ích khỏi mã đánh dấu trên giao diện người dùng của tiện ích.

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ể đượ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 trong trang web: Nếu tiện ích của bạn nhúng tài nguyên (như hình ảnh, tập lệnh, kiểu CSS, v.v.) được sử dụng trong nội dung những tập lệnh được chèn vào các trang web, 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 chú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. Chính sách 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ó một số khi bạn muốn tải tài nguyên được phân phối 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:

  1. Tải thư viện liên quan xuống cục bộ (như jQuery) và đóng gói thư viện đó với tiện ích của bạn.
  2. 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 &quot;content_security_policy&quot; của tệp kê khai. Để thêm một thư viện như Google Analytics, đây là phương pháp tiếp cận:

    {
      ...,
      "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 linh động

Có lẽ một trong những thay đổi lớn nhất trong lược đồ mới của tệp kê khai phiên bản 2 là các tiện ích không thể sử dụng các kỹ thuật đánh giá tập lệnh linh động như eval() hoặc Function() mới hoặc truyền các chuỗi JS mã vào các hàm sẽ sử dụng eval(), chẳng hạn như setTimeout(). Ngoài ra, một số Các 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 đến sử dụng một vài kỹ thuật trong số này.

Chrome cung cấp một hộp cát cho các trang chạy trên nguồn gốc riêng. Các trang này không được phép truy cập vào Chrome.* API. Để sử dụng eval() và các tuỳ chọn tương tự theo Chính sách bảo mật nội dung mới:

  1. Tạo một mục hộp cát trong tệp kê khai.
  2. Trong mục nhập hộp cát, liệt kê các trang bạn muốn chạy trong hộp cát.
  3. Sử dụng thông báo truyền qua postMessage() để giao tiếp với trang hộp cát.

Để biết thêm chi tiết về cách thực hiện việc này, hãy xem tài liệu về Hộp cát Eval.

Tài liệu đọc thêm

Các 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 ứng dụng và tiện ích đượ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 đế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ề thẻ Nội dung Chính sách bảo mật bằng cách truy cập hướng dẫn liên quan đến tiện ích của chúng tôi và giới thiệu hay về HTML5Rocks