Chrome Extension Manifest 'Matches'

JsonGoogle Chrome-Extension

Json Problem Overview


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]'.

Json Solutions


Solution 1 - Json

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.

Solution 2 - Json

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

Solution 3 - Json

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.

Solution 4 - Json

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.

Solution 5 - Json

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

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

Solution 6 - Json

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

Solution 7 - Json

Bro you forgot to add

"manifest_version":2

Which is mandatory one.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAristotleView Question on Stackoverflow
Solution 1 - JsonadrianbanksView Answer on Stackoverflow
Solution 2 - JsonthdoanView Answer on Stackoverflow
Solution 3 - JsonDavid D.View Answer on Stackoverflow
Solution 4 - JsonAnselmView Answer on Stackoverflow
Solution 5 - JsonSanjeeva Kumar AchamView Answer on Stackoverflow
Solution 6 - JsonПаван ВикаситхаView Answer on Stackoverflow
Solution 7 - JsonAyush kumarView Answer on Stackoverflow