CSS của tôi không được tiêm thông qua tập lệnh nội dung

Question

Bất cứ ai cũng có thể giải thích điều này cho tôi. Tôi đang cố gắng để tiêm một tập tin CSS vào một trang web bằng cách sử dụng content_script với các phần mở rộng của Google, nhưng tập tin css của tôi không bao giờ được thêm vào trang web. Ai đó có thể cho tôi biết tôi đang làm gì sai và giúp tôi sửa nó không? nhờ

Manifest:

{ 
    "name": "Extension", 
    "version": "0", 
    "description": "", 


    "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"], 
    "content_scripts": [ 
    { 
     "matches": [ "http://*/*", "https://*/*", "file:///*/*"], 
     "css": ["myStyles.css"], 
     "js": ["myScript.js"], 
     "all_frames": true 
    } 
    ] 
} 

myStyles.css

#test { 
    margin: 0 10px; 
    background: #fff; 
    padding: 3px; 
    color: #000; 
} 

Answer 1

Style sheet được thực tiêm, nhưng không được áp dụng, bởi vì phong cách khác ghi đè lên các quy tắc. Để các quy tắc hoạt động, bạn có một số tùy chọn:

1. Tăng specificity quy tắc CSS của bạn.

2. Suffix mọi quy tắc với !important:

   #test { 
       margin: 0 10px !important; 
       background: #fff !important; 
       padding: 3px !important; 
       color: #000 !important; 
   } 
   

3. Tiêm CSS thông qua một kịch bản nội dung:

   myScript.js:

   var style = document.createElement('link'); 
   style.rel = 'stylesheet'; 
   style.type = 'text/css'; 
   style.href = chrome.extension.getURL('myStyles.css'); 
   (document.head||document.documentElement).appendChild(style); 
   

   manifest.json

   { 
       "name": "Extension", 
       "version": "0", 
       "description": "", 
       "manifest_version": 2, 
       "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"], 
       "content_scripts": [ 
       { 
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"], 
        "js": ["myScript.js"], 
        "all_frames": true 
       } 
       ], 
       "web_accessible_resources": ["myStyles.css"] 
   } 
   

   Phím cuối cùng, web_accessible_resources là cần thiết khi manifest version 2 hoạt động để tệp CSS có thể được đọc từ trang không mở rộng.