How to Make a Chrome Extension With Video

Build a small Chrome extension that opens a video player from the toolbar, using a local video file bundled with the extension. You’ll create a Manifest V3 project, add a popup with a video element, and load it in Chrome for testing. You’ll need a text editor and a video file you have permission to use.

What You’ll Need

Google Chrome on a computer; extensions are created and tested through Chrome’s desktop extension tools.
A plain-text or code editor, such as the one already available on your computer.
A short MP4 video encoded with a format Chrome can play, such as H.264 video with AAC audio. Keep the file modest in size so the extension remains quick to load and share.
A new folder for the project. This example uses video-extension.

Step-by-Step

Create the project folder. Make a folder named video-extension. Inside it, create a second folder called media. Copy your video into media and name it sample.mp4. The finished structure will contain manifest.json, popup.html, popup.css, and media/sample.mp4.
Write the extension manifest. In the project’s top-level folder, create a plain-text file named manifest.json. Add this JSON:
```
{
  "manifest_version": 3,
  "name": "Video Player",
  "version": "1.0.0",
  "description": "Play a bundled video from the extension popup.",
  "action": {
    "default_title": "Open video player",
    "default_popup": "popup.html"
  }
}
```
Save the file as manifest.json, not manifest.json.txt. Manifest V3 identifies the extension format; the action settings give it a toolbar button and specify the popup that opens when the button is clicked. This basic extension does not need permissions because it only plays a file included in its own folder.

Build the popup interface. Create popup.html in the same folder and add:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Video Player</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <main>
    <h1>Video Player</h1>
    <video controls preload="metadata">
      <source src="media/sample.mp4" type="video/mp4">
      Your browser cannot play this video.
    </video>
  </main>
</body>
</html>

The controls attribute provides play, pause, volume, and timeline controls. preload="metadata" asks the browser to load basic video information without immediately downloading the whole file. The source path is relative to the extension root, so spelling and capitalization must match the actual folder and filename.

Style the popup. Create popup.css and add:
```
body {
  width: 360px;
  margin: 0;
  font: 14px Arial, sans-serif;
  color: #222;
}
main { padding: 12px; }
h1 { margin: 0 0 10px; font-size: 18px; }
video { display: block; width: 100%; height: auto; }
```
The fixed popup width gives the player room to display. If you choose a different width, keep it within the practical limits of Chrome’s popup window and check how it looks at that size.
Load the extension in Chrome. Open chrome://extensions in the address bar. Turn on Developer mode using the toggle on the page, select Load unpacked, and choose the video-extension folder itself—not its parent folder or the media subfolder. Chrome should show a card for Video Player.
Open and test the player. Click the Extensions puzzle-piece icon in Chrome’s toolbar, then select Video Player. If you want faster access, use the pin control beside the extension so its icon remains visible. Click the icon to open the popup, then test playback, pause, seeking, and volume. Test with sound enabled and confirm the player fits without awkward cropping.
Make a change and reload. When you edit the manifest, HTML, or CSS, return to chrome://extensions and click the extension’s reload control. Close and reopen the popup to see the updated interface. If you replace the video, keep the same filename and path or update the src value in popup.html.
Package or share the project carefully. Keep all required files together, including the video. For personal testing, the unpacked folder is enough. To distribute an extension, follow Chrome’s current publishing or organization-specific process; loading an unpacked extension is a development method, not a substitute for distribution requirements. Make sure you have rights to include and share the video.

Common Mistakes

Wrong file extensions: Editors may silently add .txt to JSON or HTML files. Check the actual filenames in your file manager, and ensure the manifest is valid JSON with matching braces, quotes, and commas.
Wrong folder selected: Load unpacked needs the directory containing manifest.json. Selecting the parent directory or a folder that only contains the project can produce a manifest error.
Incorrect video path: media/sample.mp4 is different from Media/Sample.mp4 on systems and packaging workflows where capitalization matters. Keep the path and file name consistent.
Unsupported encoding: An MP4 file extension does not guarantee a supported video or audio codec. If the player appears but playback fails, try exporting the video with commonly supported H.264 video and AAC audio.
Expecting the popup to stay open: Chrome popups can close when focus moves elsewhere. This simple example is intended for brief playback in the popup; it is not a persistent player window.

Tips

Start with a short test clip before adding a large video. This makes path and playback problems easier to diagnose.
Use descriptive file names and keep the project structure simple. Relative paths are easier to maintain than references to files elsewhere on your computer.
For a video hosted online, change the source to an appropriate web URL and account for the site’s access rules, network availability, and any required extension host permissions. Do not add broad permissions unless the extension genuinely needs them.
Use captions when available, and consider adding a text description for context. A video element’s built-in controls help, but they do not replace captions or accessible instructions.
Keep private or copyrighted footage out of a shared extension unless you are authorized to distribute it. Bundled media travels with the project.

Troubleshooting

If Chrome reports that the manifest cannot be read, open manifest.json in your editor and check that it is valid JSON, saved as plain text, and located at the top level of the selected folder. Correct any trailing commas or mismatched quotation marks, then reload the extension.

If the extension loads but the popup is blank, verify that popup.html is in the same folder as the manifest and that the default_popup path matches its name exactly. If the video area appears but will not play, confirm that the source file exists at the stated path and test that same file in a regular Chrome tab. A different video encoding may be needed if it fails there too.

If updates do not appear, click reload on the extension’s card at chrome://extensions, then close and reopen its popup. For more detail, inspect the popup: open it, right-click inside it, and choose Inspect if that option is available. Check the Console for file-not-found or playback messages. Fix the reported path or media issue, reload, and test again.

Frequently Asked Questions

Can I make an extension that plays a video from a website?
Yes. Use a web URL in the video source when the site permits direct playback. Some sites restrict embedding or require authentication, so a direct URL may not work.

Do I need JavaScript for this extension?
No. HTML provides the video player and its controls, and CSS styles it. Add JavaScript only if you need extra behavior such as custom buttons or playback preferences.

Why does the popup close when I click elsewhere?
Chrome extension popups are designed to close when they lose focus. Use a separate extension page or another suitable interface if you need a player that stays open.

Can I include more than one video?
Yes. Add more video files to the project and create additional video elements or a selection interface. Update each source path and keep the media files included when testing or sharing.

Can I use a YouTube video URL in the video element?
Usually not as a normal video file source. Video platforms commonly use their own player and embedding rules; follow the platform’s supported embedding method rather than treating a watch-page URL as an MP4 file.

Does loading an unpacked extension publish it?
No. It loads the extension for local development and testing in your Chrome profile. Sharing it with other users requires a suitable distribution method and compliance with the applicable Chrome requirements.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →