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

chrome.devtools.inspectedWindow

Mô tả

Sử dụng API chrome.devtools.inspectedWindow để tương tác với cửa sổ được kiểm tra: lấy mã nhận dạng thẻ cho trang được kiểm tra, đánh giá mã trong bối cảnh của cửa sổ được kiểm tra, tải lại trang hoặc lấy danh sách tài nguyên trong trang.

Tệp kê khai

Bạn phải khai báo các khoá sau trong tệp kê khai để sử dụng API này.

"devtools_page"

Sử dụng chrome.devtools.inspectedWindow để tương tác với cửa sổ được kiểm tra: lấy mã nhận dạng thẻ cho trang được kiểm tra, đánh giá mã trong bối cảnh của cửa sổ được kiểm tra, tải lại trang hoặc lấy danh sách tài nguyên trong trang.

Hãy xem Tóm tắt về các API của Công cụ cho nhà phát triển để biết thông tin giới thiệu chung về cách sử dụng các API của Công cụ cho nhà phát triển.

Tổng quan

Thuộc tính tabId cung cấp giá trị nhận dạng thẻ mà bạn có thể dùng với các lệnh gọi API chrome.tabs.*. Tuy nhiên, xin lưu ý rằng API chrome.tabs.* không được hiển thị cho các trang tiện ích của Công cụ cho nhà phát triển do các yếu tố bảo mật. Bạn sẽ cần truyền mã nhận dạng thẻ đến trang nền và gọi các hàm API chrome.tabs.* từ đó.

Bạn có thể dùng phương thức reload để tải lại trang được kiểm tra. Ngoài ra, phương thức gọi có thể chỉ định một chế độ ghi đè cho chuỗi tác nhân người dùng, một tập lệnh sẽ được chèn sớm khi tải trang hoặc một lựa chọn để buộc tải lại các tài nguyên được lưu vào bộ nhớ đệm.

Sử dụng lệnh gọi getResources và sự kiện onResourceContent để lấy danh sách tài nguyên (tài liệu, biểu định kiểu, tập lệnh, hình ảnh, v.v.) trong trang được kiểm tra. Bạn có thể dùng các phương thức getContent và setContent của lớp Resource cùng với sự kiện onResourceContentCommitted để hỗ trợ việc sửa đổi nội dung tài nguyên, chẳng hạn như bằng một trình chỉnh sửa bên ngoài.

Thực thi mã trong cửa sổ được kiểm tra

Phương thức eval cho phép các tiện ích thực thi mã JavaScript trong bối cảnh của trang được kiểm tra. Phương thức này rất hiệu quả khi được dùng trong đúng ngữ cảnh và nguy hiểm khi được dùng không đúng cách. Sử dụng phương thức tabs.executeScript, trừ phi bạn cần chức năng cụ thể mà phương thức eval cung cấp.

Dưới đây là những điểm khác biệt chính giữa phương thức eval và tabs.executeScript:

Phương thức eval không sử dụng một thế giới riêng biệt cho mã đang được đánh giá, vì vậy, mã có thể truy cập vào trạng thái JavaScript của cửa sổ được kiểm tra. Sử dụng phương thức này khi cần có quyền truy cập vào trạng thái JavaScript của trang được kiểm tra.
Ngữ cảnh thực thi của mã đang được đánh giá bao gồm API bảng điều khiển Công cụ cho nhà phát triển. Ví dụ: mã này có thể sử dụng inspect và $0.
Mã được đánh giá có thể trả về một giá trị được truyền đến lệnh gọi lại của tiện ích. Giá trị được trả về phải là một đối tượng JSON hợp lệ (chỉ có thể chứa các loại JavaScript nguyên thuỷ và các tham chiếu không theo chu kỳ đến các đối tượng JSON khác). Vui lòng hết sức thận trọng khi xử lý dữ liệu nhận được từ trang được kiểm tra – ngữ cảnh thực thi về cơ bản do trang được kiểm tra kiểm soát; một trang độc hại có thể ảnh hưởng đến dữ liệu được trả về cho tiện ích.

Xin lưu ý rằng một trang có thể bao gồm nhiều bối cảnh thực thi JavaScript khác nhau. Mỗi khung hình có ngữ cảnh riêng, cộng với một ngữ cảnh bổ sung cho mỗi tiện ích có tập lệnh nội dung đang chạy trong khung hình đó.

Theo mặc định, phương thức eval sẽ thực thi trong bối cảnh của khung chính trên trang được kiểm tra.

Phương thức eval có đối số thứ hai không bắt buộc mà bạn có thể dùng để chỉ định ngữ cảnh mà mã được đánh giá. Đối tượng options này có thể chứa một hoặc nhiều khoá sau:

frameURL: Dùng để chỉ định một khung không phải là khung chính của trang được kiểm tra.
contextSecurityOrigin: Dùng để chọn một ngữ cảnh trong khung hình đã chỉ định theo nguồn gốc trang web.
useContentScriptContext: Nếu đúng, hãy thực thi tập lệnh trong cùng một bối cảnh với tập lệnh nội dung của tiện ích. (Tương đương với việc chỉ định nguồn gốc web của chính tiện ích làm nguồn gốc bảo mật của bối cảnh.) Bạn có thể dùng cổng này để trao đổi dữ liệu với tập lệnh nội dung.

Ví dụ

Đoạn mã sau đây kiểm tra phiên bản jQuery mà trang được kiểm tra sử dụng:

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v" + result);
    }
  }
);

Để dùng thử API này, hãy cài đặt các ví dụ về API devtools từ kho lưu trữ chrome-extension-samples.

Loại

Resource

Một tài nguyên trong trang được kiểm tra, chẳng hạn như tài liệu, tập lệnh hoặc hình ảnh.

Thuộc tính

url

chuỗi

URL của tài nguyên.
getContent

void

Promise

Lấy nội dung của tài nguyên.

Hàm getContent có dạng như sau:
```
(callback?: function) => {...}
```
- callback
  
  hàm không bắt buộc
  
  Tham số callback có dạng như sau:
```
(response: object) => void
```
  - phản hồi
    
    đối tượng
    
    Đang chờ xử lý
    
    Một đối tượng chứa nội dung tài nguyên và cách mã hoá nội dung đó.
    
    nội dung
    
    chuỗi
    
    Nội dung của tài nguyên (có thể được mã hoá).
    
    mã hoá
    
    chuỗi
    
    Để trống nếu nội dung không được mã hoá, nếu không thì là tên mã hoá. Hiện tại, chỉ base64 được hỗ trợ.
- returns
  Promise<object>
  
  Đang chờ xử lý
  
  Một hàm nhận nội dung tài nguyên khi yêu cầu hoàn tất.
  
  Các promise chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.
setContent

void

Promise

Đặt nội dung của tài nguyên.

Hàm setContent có dạng như sau:
```
(content: string, commit: boolean, callback?: function) => {...}
```
- nội dung
  
  chuỗi
  
  Nội dung mới của tài nguyên. Hiện tại, chỉ những tài nguyên có loại văn bản mới được hỗ trợ.
- cam kết
  
  boolean
  
  True nếu người dùng đã chỉnh sửa xong tài nguyên và nội dung mới của tài nguyên đó sẽ được duy trì; false nếu đây là một thay đổi nhỏ được gửi trong quá trình người dùng chỉnh sửa tài nguyên.
- callback
  
  hàm không bắt buộc
  
  Tham số callback có dạng như sau:
```
(error?: object) => void
```
  - error
    
    đối tượng không bắt buộc
    
    Đặt thành không xác định nếu nội dung tài nguyên được đặt thành công; nếu không, hãy mô tả lỗi.
- returns
  Promise<object>
  
  Đang chờ xử lý
  
  Một hàm được gọi khi yêu cầu hoàn tất.
  
  Các promise chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

Thuộc tính

tabId

Mã nhận dạng của thẻ đang được kiểm tra. Bạn có thể dùng mã nhận dạng này với chrome.tabs.* API.

Loại

số

Phương thức

eval()

Promise

chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
): Promise<object>

Đánh giá một biểu thức JavaScript trong bối cảnh của khung chính của trang được kiểm tra. Biểu thức phải đánh giá thành một đối tượng tuân thủ JSON, nếu không, một ngoại lệ sẽ được đưa ra. Hàm eval có thể báo cáo lỗi phía DevTools hoặc một ngoại lệ JavaScript xảy ra trong quá trình đánh giá. Trong cả hai trường hợp, tham số result của lệnh gọi lại là undefined. Trong trường hợp xảy ra lỗi ở phía Công cụ cho nhà phát triển, tham số isException sẽ khác rỗng và có isError được đặt thành true và code được đặt thành mã lỗi. Trong trường hợp xảy ra lỗi JavaScript, isException được đặt thành true và value được đặt thành giá trị chuỗi của đối tượng được truyền.

Thông số

biểu thức

chuỗi

Một biểu thức để đánh giá.
tùy chọn

đối tượng không bắt buộc

Tham số options có thể chứa một hoặc nhiều lựa chọn.
- frameURL
  
  chuỗi không bắt buộc
  
  Nếu được chỉ định, biểu thức sẽ được đánh giá trên iframe có URL trùng khớp với URL được chỉ định. Theo mặc định, biểu thức được đánh giá trong khung trên cùng của trang được kiểm tra.
- scriptExecutionContext
  
  chuỗi không bắt buộc
  
  Chrome 107 trở lên
  
  Đánh giá biểu thức trong bối cảnh của một tập lệnh nội dung của tiện ích khớp với nguồn gốc đã chỉ định. Nếu được cung cấp, scriptExecutionContext sẽ ghi đè chế độ cài đặt "true" trên useContentScriptContext.
- useContentScriptContext
  
  boolean không bắt buộc
  
  Đánh giá biểu thức trong ngữ cảnh của tập lệnh nội dung của tiện ích gọi, miễn là tập lệnh nội dung đã được chèn vào trang được kiểm tra. Nếu không, biểu thức sẽ không được đánh giá và lệnh gọi lại sẽ được gọi với tham số ngoại lệ được đặt thành một đối tượng có trường isError được đặt thành true và trường code được đặt thành E_NOTFOUND.
callback

hàm không bắt buộc

Tham số callback có dạng như sau:
```
(response: object) => void
```
- phản hồi
  
  đối tượng
  
  Đang chờ xử lý
  
  Kết quả đánh giá và thông tin về trường hợp ngoại lệ.
  - exceptionInfo
    
    đối tượng
    
    Một đối tượng cung cấp thông tin chi tiết nếu xảy ra ngoại lệ trong quá trình đánh giá biểu thức.
    
    mã
    
    chuỗi
    
    Đặt xem lỗi có xảy ra ở phía Công cụ cho nhà phát triển trước khi biểu thức được đánh giá hay không.
    
    mô tả
    
    chuỗi
    
    Đặt xem lỗi có xảy ra ở phía Công cụ cho nhà phát triển trước khi biểu thức được đánh giá hay không.
    
    chi tiết
    
    bất kỳ[]
    
    Đặt nếu lỗi xảy ra ở phía Công cụ cho nhà phát triển trước khi biểu thức được đánh giá, chứa mảng các giá trị có thể được thay thế vào chuỗi nội dung mô tả để cung cấp thêm thông tin về nguyên nhân gây ra lỗi.
    
    isError
    
    boolean
    
    Đặt xem lỗi có xảy ra ở phía Công cụ cho nhà phát triển trước khi biểu thức được đánh giá hay không.
    
    isException
    
    boolean
    
    Đặt nếu mã được đánh giá tạo ra một trường hợp ngoại lệ chưa được xử lý.
    
    value
    
    chuỗi
    
    Đặt nếu mã được đánh giá tạo ra một trường hợp ngoại lệ chưa được xử lý.
  - kết quả
    
    đối tượng
    
    Kết quả đánh giá.

Giá trị trả về

Promise<object>

Đang chờ xử lý

Một hàm được gọi khi quá trình đánh giá hoàn tất.

Các promise chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

getResources()

Promise

chrome.devtools.inspectedWindow.getResources(
  callback?: function,
): Promise<Resource[]>

Truy xuất danh sách tài nguyên từ trang được kiểm tra.

Thông số

callback

hàm không bắt buộc

Tham số callback có dạng như sau:
```
(resources: Resource[]) => void
```
- các tài nguyên
  
  Tài nguyên[]
  
  Các tài nguyên trong trang.

Giá trị trả về

Promise<Resource[]>

Đang chờ xử lý

Một hàm nhận danh sách tài nguyên khi yêu cầu hoàn tất.

Các promise chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
): void

Tải lại trang được kiểm tra.

Thông số

reloadOptions

đối tượng không bắt buộc
- ignoreCache
  
  boolean không bắt buộc
  
  Khi đúng, trình tải sẽ bỏ qua bộ nhớ đệm cho tất cả tài nguyên trang được kiểm tra đã tải trước khi sự kiện load được kích hoạt. Thao tác này tương tự như khi bạn nhấn tổ hợp phím Ctrl+Shift+R trong cửa sổ được kiểm tra hoặc trong cửa sổ Công cụ cho nhà phát triển.
- injectedScript
  
  chuỗi không bắt buộc
  
  Nếu được chỉ định, tập lệnh sẽ được chèn vào mọi khung của trang được kiểm tra ngay khi tải, trước bất kỳ tập lệnh nào của khung. Tập lệnh sẽ không được chèn sau khi tải lại các lần tiếp theo, chẳng hạn như nếu người dùng nhấn tổ hợp phím Ctrl+R.
- userAgent
  
  chuỗi không bắt buộc
  
  Nếu được chỉ định, chuỗi này sẽ ghi đè giá trị của tiêu đề HTTP User-Agent được gửi trong khi tải tài nguyên của trang được kiểm tra. Chuỗi này cũng sẽ ghi đè giá trị của thuộc tính navigator.userAgent được trả về cho mọi tập lệnh đang chạy trong trang được kiểm tra.

Sự kiện

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

Được kích hoạt khi một tài nguyên mới được thêm vào trang được kiểm tra.

Thông số

callback

hàm

Tham số callback có dạng như sau:
```
(resource: Resource) => void
```
- tài nguyên
  
  Tài nguyên

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

Kích hoạt khi một bản sửa đổi mới của tài nguyên được xác nhận (ví dụ: người dùng lưu một phiên bản đã chỉnh sửa của tài nguyên trong Công cụ cho nhà phát triển).

Thông số

callback

hàm

Tham số callback có dạng như sau:
```
(resource: Resource, content: string) => void
```
- tài nguyên
  
  Tài nguyên
- nội dung
  
  chuỗi

chrome.devtools.inspectedWindow Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Mô tả

Tệp kê khai

Tổng quan

Thực thi mã trong cửa sổ được kiểm tra

Ví dụ

Loại

Resource

Thuộc tính

Thuộc tính

tabId

Loại

Phương thức

eval()

Thông số

Giá trị trả về

getResources()

Thông số

Giá trị trả về

reload()

Thông số

Sự kiện

onResourceAdded

Thông số

onResourceContentCommitted

Thông số

chrome.devtools.inspectedWindow