Bagaimana untuk Menyuntik Gaya CSS ke Halaman Web Menggunakan Skrip Kandungan?

Masalah Menyuntik Gaya CSS ke Halaman Web Menggunakan Skrip Kandungan

Isu biasa yang dihadapi oleh pembangun menggunakan skrip kandungan untuk menyuntik CSS ialah kegagalan untuk menggunakan gaya CSS pada halaman web. Walaupun disuntik, gaya ini mungkin ditindih oleh peraturan lain.

Untuk menyelesaikan masalah ini, pelbagai pendekatan boleh diambil:

1. Tingkatkan Kekhususan CSS

Tingkatkan kekhususan peraturan CSS untuk menjadikannya lebih dominan.

2. Gunakan "!penting"

Imbuhkan setiap peraturan dengan "!penting" untuk memaksa penggunaannya, mengatasi peraturan lain.

3. Suntikan CSS melalui Skrip Kandungan

Suntikan CSS menggunakan skrip kandungan. Buat fail JavaScript (cth., myScript.js) dan ubah suai manifes.json:

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"]
}

Nota: Apabila menggunakan manifes versi 2, kunci "web_accessible_resources" adalah penting untuk membenarkan akses kepada fail CSS daripada halaman bukan sambungan.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik Gaya CSS ke Halaman Web Menggunakan Skrip Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!