Làm cách nào để có thể chèn CSS và Javascript vào khung nội tuyến được tải trong tiện ích mở rộng của chrome

Question

Tôi có iframe trong tiện ích mở rộng chrome của mình tải trang web, tôi muốn chèn CSS và Javascript vào trang web nhưng chỉ khi được tải trong iframe mở rộng (vì vậy nó không bị ảnh hưởng khi người dùng duyệt đến trang web thông thường).

Tôi rất ngạc nhiên khi các tiện ích mở rộng của Chrome có chính sách bảo mật tên miền chéo được áp dụng cho họ khi họ cố gắng truy cập nội bộ của khung nội tuyến mặc dù họ có thể thực hiện yêu cầu XHR giữa nhiều miền.

Có cách nào dễ dàng để thực hiện việc này không? Tôi mặc dù tôi có thể làm điều đó bằng cách sử dụng executeScript nhưng nó đòi hỏi một ID tab.

Answer 1

Cách duy nhất để biết bạn đang ở trong ifrmae là window không phải là top.

if (window == top) { 
    // Not in iframe 
} 
else { 
    // In an iframe 
} 

Bạn chỉ có thể làm điều đó cho tập lệnh nội dung chứ không chỉ cho tập bản định kiểu. Những gì tôi thường làm là trong kịch bản nội dung, tôi kiểm tra nếu nó không phải là trong cửa sổ trên cùng, và sau đó tiếp tục kịch bản, nếu không tôi chỉ cần kết thúc nó.

Tóm tắt

1. Tiêm Script Content cho URL
2. rằng Trong kịch bản nội dung, kiểm tra nếu tài sản cửa sổ, if (window != top) { loadContentScript() }
3. Tạo CSS trong JavaScript nếu bạn quá lo lắng về nó ảnh hưởng. Bạn không nên mặc dù nếu bạn sử dụng id duy nhất.

Hy vọng điều đó đã giúp tôi làm điều đó cho một số tiện ích mở rộng của tôi.