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.

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"]
}

Answer 2

The problem here is that you are using manifest_version : 2. If you make that manifest-version: 1 you'll not have any problems. Version 2 restricts many such features to improve security. Refer Google Content Security Policy for more details on the restrictions imposed in manifest version 2. I could not find your specific case mentioned in the CSP but when I changed the manifest version to 1 and executed your code it is working fine.

Answer 3

In addition to the answers above I notice that in your contentscript.js you are just adding another script i.e script.js Why don't you directly add script.js through content_scripts in manifest.json.

Answer 4

Another reason for getting this error is if the url is being blocked by CORS. Check the network request header of the page to see if it contains Content-Security-Policy:

Content-Security-Policy: default-src 'self' http://example.com; connect-src http://example.com/; script-src http://example.com/

You can try opening the url in a new browser tab to verify the image url is correct:

chrome-extension://mjcbjlencnokpknflpneebajalcnnifo/images/pattern.jpg

One way around this is to use an image data URI:

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7