JavaScript Document plugins Property

What You’ll Learn

Document.plugins is a read-only instance property that returns a live HTMLCollection of every <embed> element in the document. Learn how it matches document.embeds, how it differs from navigator.plugins, and five examples with try-it labs.

Introduction

The name plugins can be confusing. On Document, it does not list Flash or PDF browser plugins installed on the machine. It lists the <embed> elements currently in the HTML page.

MDN: the plugins read-only property returns an HTMLCollection containing one or more HTMLEmbedElement objects representing the <embed> elements in the current document. For a list of installed plugins, MDN says to use Navigator.plugins instead.

Related Document tutorials: embeds, images, applets, Document constructor.

Understanding Document.plugins

A read-only instance property on Document. Its value is a live HTMLCollection of every <embed> in the document tree.

• Value — HTMLCollection of HTMLEmbedElement objects (MDN).
• Read-only — you do not assign a new collection to document.plugins.
• Live collection — reflects DOM changes when embeds are added or removed.
• Indexed access — document.plugins[i] or item(i).
• Alias — same collection as document.embeds in modern HTML.
• Not Navigator — installed plugins live on navigator.plugins (MDN).

📝 Syntax

document.plugins

Value

An HTMLCollection of <embed> elements in the document (MDN).

Common patterns

const count = document.plugins.length;
const first = document.plugins[0];

for (const el of document.plugins) {
  console.log(el.src);
}

// Same collection as embeds:
console.log(document.plugins === document.embeds); // true in modern browsers

CSS-selector alternative

const embeds = document.querySelectorAll("embed");
// Static NodeList — does not auto-update when you add/remove embeds

⚖️ document.plugins vs Related APIs

Examples Gallery

Examples follow MDN Document: plugins. Use View Output or Try It Yourself for each case.

const count = document.plugins.length;
console.log("embed count:", count);

if (count === 0) {
  console.log("No <embed> elements on this page");
}

embed count: 2

for (const el of document.plugins) {
  console.log(el.tagName, el.src);
}

EMBED https://example.com/a.pdf
EMBED https://example.com/b.pdf

console.log(document.plugins === document.embeds);
console.log(document.plugins.length === document.embeds.length);

true
true

const before = document.plugins.length;
const el = document.createElement("embed");
el.src = "https://example.com/new.pdf";
el.type = "application/pdf";
document.body.appendChild(el);
console.log(before, "→", document.plugins.length);

1 → 2

console.log("document.plugins length:", document.plugins.length);
console.log("navigator.plugins length:", navigator.plugins.length);
console.log("Same object?", document.plugins === navigator.plugins);
// false — totally different APIs

document.plugins length: 1
navigator.plugins length: 5
Same object? false

🚀 Common Use Cases

• Inventory embeds — count PDFs or other resources inserted with <embed>.
• Read legacy scripts — older code often uses document.plugins instead of embeds.
• Live DOM tools — watch length change as embeds are injected.
• Avoid wrong API — stop confusing page embeds with navigator.plugins.
• Teaching collections — compare with document.images and document.forms.
• Prefer embeds in new code — clearer name when you write fresh tutorials.

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Value is an HTMLCollection of <embed> / HTMLEmbedElement only.
• document.embeds returns the same collection in modern HTML.
• For installed plugins, use navigator.plugins (MDN)—not document.plugins.
• Related: embeds, images, applets, Document constructor.

💡 Best Practices