Google Chrome Extension - Script Injections

Question

I'm trying to get my Chrome Extension to inject some javascript with content_scripts, using this previous answer as a reference.

manifest.json

"name": "My Chrome Extension", "version": "1.0", "manifest_version": 2, "content_scripts": [{     "matches": ["http://pagetoinject/script/into/*"],     "js": ["contentscript.js"] }]   

contenscript.js:

var s = document.createElement('script'); s.src = chrome.extension.getURL("script.js"); (document.head||document.documentElement).appendChild(s); s.parentNode.removeChild(s); 

( also tried this method with no success. )

var s = document.createElement('script'); s.src = chrome.extension.getURL("script.js"); s.onload = function() {     this.parentNode.removeChild(this); }; (document.head||document.documentElement).appendChild(s); 

I keep getting this javascript error. Here's a screenshot.

GET chrome-extension://invalid/ (anonymous function)

Answer 1

1. In your manifest file, "manifest_version": 2 is specified. This automatically activates a stricter mode, in which all extension's files are not available to web pages by default.
2. Your original code would never work, because the <script> element is immediately removed after injection (the script file does not have a chance to load).

As a result of 1., the following error shows up in the console:

Failed to load resource                             chrome-extension://invalid/ 

To fix the problem, add script.js to the whitelist, "web_accessible_resources" in your manifest file:

{   "name": "Chrome Extension",   "version": "1.0",   "manifest_version": 2,   "content_scripts": [{       "matches": ["http://pagetoinject/script/into/*"],       "js": ["contentscript.js"]   }],   "web_accessible_resources": ["script.js"] }