11.3: Chrome Extensions: Content Scripts - Programming with Text

The Coding Train · 230K views · 2017 · 16:55

Open on YouTube

Web developmentTesting, debugging & developer toolstutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when explaining how content scripts work, and askers cite it as the tutorial they were following when their extension's content.js failed to load or run.

Recommended by 1 people across 1 different months, 2017 to 2022.

What it is

Part of Daniel Shiffman's Chrome Extensions series on The Coding Train, this video covers content scripts: JavaScript files that run in the context of a web page and can modify it. It is a live-coding walkthrough that builds a basic extension with a manifest and a content.js file.

What people said

Recommends user8851991 · 2017-12 · Stack Overflow · on “Create a popup inside chrome extension”

You need to use content scripts. If you have made a trigger the content script is able to change the page. By using that to your advantage you can add a div filled with all of the html you want to add. You can find a in depth example here [this video] .

Cites rosyTown · 2019-05 · Stack Overflow · on “Content.js not firing”

I'm attempting a super basic 'hello world' chrome extension. I want a content script to interact with the browser's page. There are no errors present but no console log from the content.js. I've tried Google's documentation here: [LINK] And have watched this guy here: [this video] manifest.json { "manifest_version": 2, "name": "Hello World", "version": "1.0", "description": "xxxxx", "browser_action": { "default_icon": "images/icon128.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["content.js"] } ], "permissions": [ "activeTab" ] } popup.html <!DOCTYPE html> <html> <head> <script src="js/Main.js" type="text/javascript"></script> <style> button { h

Cites Aparna Pallod · 2022-01 · Stack Overflow · on “How to fix "Could not load JavaScript 'content.js' for content script" error”

I'm following this video [this video] and have also enabled json formatter extension. But can anyone help me understand why the below error is produced: this is the manifest.json file { "manifest_version": 2, "name": "My Cool Extension", "version": "0.001", "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["content.js"] } ] } this is the content.js file console.log("My First Attempt");