Tiêm CSS cho tiện ích mở rộng chrome

Question

Tôi rất mới phát triển Tiện ích mở rộng của Chrome. Tôi biết có thể tiêm CSS. Nhưng có thể tiêm nó cho một URL cụ thể không. Ví dụ: bất cứ khi nào tôi truy cập google.com, CSS sẽ được tiêm.

Cảm ơn sự giúp đỡ! :)

Answer 1

Vâng, bạn có 2 tùy chọn, tập lệnh có nội dung và chương trình. Tên có thể nghe thật phức tạp và đáng sợ, nhưng đừng lo lắng;)

Content Scripts sẽ tự động tiêm khi trang được tải. Tất cả bạn cần làm (ngoài viết kịch bản), là để xác định một cái gì đó như thế này trong manifest.json của bạn:

{ 
    "name": "My extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/"], //where your script should be injected 
     "css": ["css_file.css"] //the name of the file to be injected 
    } 
    ] 
} 

này nên tiêm CSS mỗi khi bạn tải google.com

khác của bạn tùy chọn là sử dụng Programmatic Injection. Điều này có thể hữu ích nếu thỉnh thoảng bạn chỉ muốn tiêm mã, thường là từ một trang nền. Để thực hiện việc này, bạn có thể sử dụng insertCSS(). Trong trường hợp đó, bạn cần một số host permission trong tệp kê khai của mình:

{ 
    "name": "My extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "background_page": "myBackground.html", //if you want to inject it from a background page 
    "permissions": [ 
    "background", //if you want to inject it from a background page 
    "http://www.google.com/" // host permission to google 
    ] 
} 

Chúc may mắn!