Chrome Extension Manifest 'Matches'

Question

I'm trying my hands at a simple Chrome Extension, but am running into a problem with providing a value for the matches array in my content_scripts.

{
  "name": "My Extension",
  "version": "1.0",
  "description": "My Extension Experiment",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Ext",
    "default_popup": "popup.html"
  },
  "content_scripts": {
    "matches": ["http://*"],
    "js": ["scripts.js"]
  }
}

When I try to load this extension into Chrome, I get the following message:

Could not load extension from 'C:\Users\foo\Desktop\Extensions\bar'.
Invalid value for 'content_scripts'.

I cannot see what is "invalid" about my value though. What I'm trying to do is match every URL, so my extension can manipulate the DOM (via javascript within scripts.js) of any page it is ran on. Am I missing something, going about this all wrong, or what?

update

After posting this question, I did notice that the Google example was slightly different than mine, so I modified my code a bit to reflect their syntax:

"content_scripts": [{
  "matches": ["http://*"],
  "js": ["scripts.js"]
}]

That being said, I still get the following error when trying to load my extension:

Could not load extension from 'C:\Users\foo\Desktop\Extensions\bar'.
Invalid value for 'content_scripts[0].matches[0]'.

Answer 1

You need to surround the value of the content_scripts field in square brackets:

"content_scripts": [ {
  "matches": ["http://*"],
  "js": ["scripts.js"]
} ]

(see the Chrome Docs for more info)

Incidentally, using http://*/* would be a better match for all urls (see the docs), adding https://*/* if you also need to match those as well.

Edit:

Following your edit, the error you are getting is because of the match pattern being incorrect.

Answer 2

If you want to match every URL, then Google has a special pattern just for this purpose: <all_urls>

Sample usage:

"matches": ["<all_urls>"],

See this page for more info: https://developer.chrome.com/extensions/match_patterns

Answer 3

Any match pattern should be of the following structure [scheme]://[host][path]

1. scheme is '*' | 'http' | 'https' | 'file' | 'ftp'
2. host is '' | '.' (any char except '/' and '*')+
3. path is '/' (any chars)

For matching any HTTP/S and FILE URL use:

 "matches": [
    "*://*/*",
    "file://*/*"
  ],

Ref: https://developer.chrome.com/apps/match_patterns

By the way, in order to allow access to local files - add the permission:

"permissions": [
   "file://*/*"
]

Or approve file access on the extension settings page.

Answer 4

For many that are getting errors involving:

'content_scripts[0].matches' is missing or invalid.

or

'content_scripts[0].matches[0]': Empty path.

Trying filling in, or creating, the matches field with your specific URL needed. If you want to use all URLs, then use the <all_urls> tag like below.

"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [ "jquery.js" ]
        }
    ]

Files listed in the "js" array have their path relative to you app. In other words, the location of "manifest.json" is your root directory.

Note: jquery.js is a file in my project's directory and you should replace it with whatever script file you want.

Answer 5

After many tries following working , it matches all URL's and also supports http & https.enter code here

 "manifest_version": 2,
 "content_scripts": [
    {
     "matches": [
        "*://*/*",
      ]
   }

Answer 6

If you are using Jquery on a CDN, Just download it and include it to your working folder, And then try to import it

Answer 7

Bro you forgot to add

"manifest_version":2

Which is mandatory one.