Tiêm tệp CSS vào trang web qua tiện ích mở rộng firefox

Question

Tôi đang viết tiện ích mở rộng của Firefox và tôi đang sử dụng SDK bổ sung của mình; nhưng tôi không thể tìm ra cách chèn một tệp CSS cục bộ từ thư mục dữ liệu vào trang web. Nó sẽ là tuyệt vời nếu có một cách để làm điều đó thông qua gói page_mod.

Answer 1

Tính đến Add-on SDK 1,14 có nghiệm (API có thể thay đổi) hỗ trợ cho điều này trong các mô-đun page-mod:

var pageMod = require("sdk/page-mod").PageMod({ 
    include: "*", 
    contentStyleFile: require("sdk/self").data.url("my-style.css") 
}); 

Xem Modifying Web Pages Based on URL cho một hướng dẫn phức tạp để sử dụng trang-mod.

Có a page on the Addon SDK's wiki thảo luận các vấn đề với việc triển khai hiện tại, mặc dù có vẻ hơi lỗi thời.

Dưới mui xe, nó sử dụng nsIDOMWindowUtils. LoadingSheet() để thêm biểu định kiểu mà không cần chạm vào DOM của trang. (API này đã được bổ sung trong Firefox 18, xem bug 737003. Trước đó bạn phải sử dụng nsIStyleSheetService mà là tương tự, nhưng không bằng tab cụ thể.)

---

Trước đó bạn có thể sử dụng kịch bản nội dung trang-mod để chèn phần tử liên kết hoặc kiểu dáng (example). [sửa] nhờ bình luận của lwburk, đây là một mô tả phức tạp hơn trong Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.

Answer 2

Để chèn CSS từ main.js ngay bây giờ có thể sử dụng "trang-mod":

var data = require("sdk/self").data; 
var pageMod = require("sdk/page-mod"); 

pageMod.PageMod({ 
    include: "*.org", 
    contentStyleFile: data.url("my-page-mod.css") 
});