Browser Extensions Development (Chrome & Edge) · บทเรียน

การแทรก CSS และการจัดรูปแบบแบบแยกส่วน

เพิ่มและลบสไตล์บนหน้าเว็บจากสคริปต์เนื้อหา โดยหลีกเลี่ยงความขัดแย้งกับ CSS ของหน้าโฮสต์

การแทรก CSS และการจัดรูปแบบแบบแยกส่วน เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Inject CSS

Content scripts can change how a page looks, not just its structure. Injecting CSS lets your extension highlight elements, hide clutter, or apply a custom skin.

But the host page already has its own styles, so you must inject carefully to avoid clashes.

Declaring CSS in the Manifest

The simplest approach lists a stylesheet under content_scripts. The browser injects it automatically on matching pages.

{
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "css": ["styles.css"]
  }]
}

Injecting CSS Programmatically

To inject only when needed, use the scripting API from your service worker with insertCSS.

chrome.scripting.insertCSS({
  target: { tabId: tab.id },
  files: ['styles.css']
})

Injecting Inline CSS

You can also pass raw CSS text instead of a file with the css property.

chrome.scripting.insertCSS({
  target: { tabId: tab.id },
  css: 'body { filter: grayscale(1); }'
})

Removing Injected CSS

To toggle a feature off, remove the exact same CSS you inserted using removeCSS.

chrome.scripting.removeCSS({
  target: { tabId: tab.id },
  files: ['styles.css']
})

The Specificity Problem

Your injected rules compete with the page's own CSS. If the page has more specific selectors, your styles lose.

Use specific selectors or, sparingly, !important to win when necessary.

.myext-highlight {
  background: yellow !important;
}

Namespacing Your Classes

Prefix every class you add with a unique token like myext- so your rules never accidentally match the page's elements.

el.classList.add('myext-panel')

Shadow DOM for True Isolation

For UI you inject into the page, a shadow DOM fully isolates your styles from the host page, and the page's styles from yours.

const host = document.createElement('div')
const shadow = host.attachShadow({ mode: 'open' })
shadow.innerHTML = '<style>p{color:red}</style><p>Hi</p>'
document.body.appendChild(host)

Loading Fonts and Images

If your CSS references files packaged in the extension, list them under web_accessible_resources and reference them with chrome.runtime.getURL.

const url = chrome.runtime.getURL('img/icon.png')

Respecting the Page's Layout

Avoid breaking the host page. Prefer additive styles, fixed-position overlays, or shadow DOM containers over rewriting the page's core layout properties.

Cleaning Up on Toggle Off

When the user disables your feature, remove injected CSS and any elements you created so the page returns to its original state.

document.querySelectorAll('.myext-panel').forEach(e => e.remove())

Quick Check

Test your CSS injection knowledge.

Recap

You learned to style pages from content scripts:

Declare CSS in the manifest or inject with insertCSS
Remove it with removeCSS
Namespace classes and manage specificity
Use a shadow DOM for true isolation
Clean up when toggling off

Careful injection lets you reshape pages without breaking them.

คำถามที่พบบ่อย

บทเรียน “การแทรก CSS และการจัดรูปแบบแบบแยกส่วน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแทรก CSS และการจัดรูปแบบแบบแยกส่วน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแทรก CSS และการจัดรูปแบบแบบแยกส่วน”

เพิ่มและลบสไตล์บนหน้าเว็บจากสคริปต์เนื้อหา โดยหลีกเลี่ยงความขัดแย้งกับ CSS ของหน้าโฮสต์ คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การแทรก CSS และการจัดรูปแบบแบบแยกส่วน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม

ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Browser Extensions Development (Chrome & Edge)