Chrome Extension Manifest 'Matches' - json

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

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.

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

Any match pattern should be of the following structure [scheme]://[host][path]
scheme is '*' | 'http' | 'https' | 'file' | 'ftp'
host is '' | '.' (any char except '/' and '*')+
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.

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.

After many tries following working , it matches all URL's and also supports http & https.enter code here
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"*://*/*",
]
}

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

Bro you forgot to add
"manifest_version":2
Which is mandatory one.

Related

regexr in json file

I'm reading the article Debugging ES6 in Visual Studio Code and find a syntax in launch.json file that I don't quite understand.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App.js",
"program": "${workspaceRoot}/src/app.js",
"outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
}
}
"outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
What does the ** (two stars) represent? Also, does *.js match filname.js.map beside matching filename.js? I am not sure if this kind of pattern relates to regexr.
This is not a regex (because dot in ".js" does not look like it matches any character).
This is kind of fancy wildcard for a filename:
${workspaceRoot} - some environmental variable
/.compiled - exact name of folder (e.g. for generated code)
/** - any set of nested folders
/*.js - any file with js extension at path specified before
Also, does *.js match filname.js.map beside matching filename.js?
I assume that it does not, only filename.js.
the ** (double-glob) means that it will search in any number of subdirectories. For example,
a/**/b
will match
a/a/b
a/c/b
a/c/a/b
and so on.

VSCode json schema fileMatch pattern

In VSCode, I'm trying to add a sjson schema to a project I have. My .vscode/settings.json file is this:
{
"json.schemas": [
{
"fileMatch": [
"/*.json"
],
"url": "https://path/to/url.json"
}
]
}
```
This works, but it's currently applying to all .json files in all folders in the project, which I don't want. I want it to only apply to all .json files in the root directory. What do I have to put in the fileMatch property to enable this?
Update
Have tried the following. These work, but apply to every .json file:
"/*.json"
"*.json"
These don't work at all (no .json file gets the schema):
"${workspaceFolder}/*.json"
"${workspaceFolder}*.json"
"${workspaceFolder}\\*.json"
The above 3 without the {}
The above 4 with workspaceRoot
I ran into something similar, but instead of wanting to add everything in the root, I wanted to add all JSON files that are in a subfolder of the workspace (root) folder.
The solution I used was to add all JSON and then exclude the ones I didn't want (including the settings file itself):
{
"json.schemas": [
{
"fileMatch": [
"*.json",
"!/.vscode/settings.json",
"!/Some.json",
"!/SomeOther.json"
],
"url": "/Schema.json"
}
]
}
The ones that needed to be excluded were just a few, so I could just name them all.
A similar approach mightwork in the original problem, with something like this:
{
"fileMatch": [
"*.json",
"!/Folder1/*.json",
"!/Folder2/*.json"
],
}
In only problem here is that VS Code doesn't seem to allow wild cards for folder names. So using Glob like matching to exclude /*/*.json or /**/*.json doesn't help, unfortunately.

Gmail App Scripts AddOn: XMLHttpRequest Error

I am developing a Gmail App Scripts Ad-On. I am able to create cards, and child cards, and add controls to the cards, and it works well. However, I need to add functionality to make an oData call to a web service in another application. As soon as I add the following line in my code.gs file I get the error shown below when I run my add-on in Gmail.
var req = new XMLHttpRequest();
ReferenceError: "XMLHttpRequest" is not defined. [line: 187, function: gotoChildCard, file: Code]
It never even gets beyond that line, so it is not any problem with oData structure or anything, it does not like that line. I have tried to find some posts, but I cannot find anything (I did find some people getting this error when they develop a Chrome Extension, but that is different - I am creating a Gmail App Scripts Add-On). I was thinking that maybe I need to add something to my manifest file, but if so, I do not know what it is.
below is my appscript.json file:
`{
"oauthScopes": [
"https://www.googleapis.com/auth/gmail.addons.execute",
"https://www.googleapis.com/auth/gmail.readonly"
],
"gmail": {
"name": "Dean's Gmail Add-On: Multiple Cards for Set ",
"logoUrl": "https://www.gstatic.com/images/icons/material/system/2x/bookmark_black_24dp.png",
"contextualTriggers": [{
"unconditional": {
},
"onTriggerFunction": "createNavigationCard"
}],
"openLinkUrlPrefixes": [
"https://mail.google.com/"
],
"primaryColor": "#4285F4",
"secondaryColor": "#4285F4",
"version": "TRUSTED_TESTER_V2"
}
}
You can only make HTTP requests using the UrlFetchApp in Apps Scripts

How do I configure VS Code to enable code completion on .json files (jsonschema support)?

In the Visual Stuido Code demo minute 28:57-29:20 and 30:20-31:10, some cool JSON code completion is shown.
Where and how do I add a schema for my JSON files to a project?
How does VS Code know which schema to use for a given .json file?
The association of JSON schemas to files is done in the settings (File, Preferences, User Settings or Workspace Settings), under the property 'json.schemas'.
This is an example how the JSON schema for bower is associated to the bower schema.
"json.schemas": [
{
"fileMatch": [
"/bower.json",
"/.bower.json"
],
"url": "http://json.schemastore.org/bower"
},
...
You can also use schemas located in your workspace or define a schema right in the settings itself. Check https://code.visualstudio.com/docs/languages/json for examples.
You can refer your JSON Schema in $schema node and get your intellisense in VS Code right away. No need to configure anywhere else.
For example,
{
"$schema": "http://json.schemastore.org/coffeelint",
"line_endings": "unix"
}
This is the intellisense I was talking about. JSON Schema has the list of possible JSON properties in your current cursor position and VS Code can pull out that list of intellisense.
Note that, every official JSON should have a concrete JSON Schema to prove the data integrity. This answer is still valid!
The three ways I've got VS Code to use a JSON schema are ...
So for something like the Azure Function schema from ... http://json.schemastore.org
"json.schemas": [
{
"fileMatch": [
"/function.json"
],
"url": "http://json.schemastore.org/function"
}
]
In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'
In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace
In the "Folder Settings", it's "settings" section in the settings.json, which is in the .vscode directory ... assuming your're using a VS Code Workspace
The Folder takes precedence over Workspace, and Workspace over User
And the Workspace and Folder work with relative paths, e.g. in the .code-workspace file ...
"settings": {
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
}
or in the Folder Settings settings.json in \.vscode\ ...
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
Just add the following configuration item to the settings file to fix it:
"json.validate.enable": false
Or use the GUI way:

More generic Content Scripts match pattern?

I want to match:
http://images.orkut.com/
http://www.orkut.co.uk/
http://www.orkut.com.br/
http://images.orkut.jp/
The pattern I am trying to use is:
http://*.orkut.*/*
But when I try to load the extension it says:
invalid value for content_scripts[0].matches[0]
Is there a way to match these urls without specifying the full domain?
In the manifest file
"permissions": [ "tabs", "http://*.orkut.*/*", "https://*.orkut.*/*" ],
"content_scripts":
[
{
"matches": [ "http://*.orkut.*/" ], // error
"js": ["content/loader.js"]
}
]
A more generic doesn't work, while this one works:
"matches": [ "http://*.orkut.co.uk/" ],
You cannot do that do to security reasons, please refer to http://code.google.com/chrome/extensions/match_patterns.html for more information.
As well, team lead of Chrome Extension did a nice explanation why:
http://groups.google.com/a/chromium.org/group/chromium-extensions/msg/3d305eb340f01763
As Mohamed Mansour's answer mentioned, this is not supported by google in the manifest.json
However, you can still add a simple javascript check in your content script!
For example, this is how I workaround a similar case where I wanted the content script to be executed only on 192.168.*.* hosts (it's an in-house chrome extension)
in your manifest.json use <all_urls>
...
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
],
...
in your content-script.js use a simple condition to verify if the hostname matches a regex pattern
let isValidHostname = /^192.168.\d+.\d+$/.test(window.location.hostname);
if (isValidHostname){
// Do your stuff here
}