I'm stuck with what seems to be really simple.
I'm trying to inject a div of my own in every page the user visited, in a google chrome extention.
I looked at examples on the web, but nothing seems to be working with me :s
Here's my manifest.json
{
"name": "My extension",
"version": "1.0",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"browser_action": {
"default_title": "My extension",
"default_icon": "icon.png"
},
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["test.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
And my test.js
var newdiv = document.createElement('div');
newdiv.setAttribute('id','this_is_my_own_div');
document.body.appendChild(newdiv);
But I get nothing in source codes...
My div's not created.
How can I check if my test.js is running ? I can't understand why it is working with others and not with me :s
Any help appreciate !
It worked try:
"browser_action": { "default_title": "My extension", "default_icon": "icon.png" },
instead of:
"browser_action": { "name": "My extension", "icons": ["icon.png"] },
Related
I am writing a logic gate simulator and have decided to make a VSCode extension for the language it uses. So far, I have a folder named lgc that contains the extension. Inside that folder there are the following:
package.json:
{
"name": "Lgc",
"version": "0.1.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "AwesomeCronk",
"contributes": {
"languages": [{
"id": "lgc",
"aliases": ["lgc", "Lgc", "LGC"],
"extensions": [".lgc",".ttb"]
}],
"grammars": [{
"language": "lgc",
"scopeName": "source.lgc",
"path": "./syntaxes/lgc.tmLanguage.json"
}]
}
}
syntaxes/lgc.tmLanguage.json:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Lgc",
"patterns": [
{
"include": "#keywords"
}
],
"repository":
{
"keywords":
{
"paterns":
[
{
"name:": "keyword.gate.lgc",
"match": "a"
}
]
}
},
"scopeName": "source.lgc"
}
This is a test that should highlight any instance of the letter a as keywords. When I copy this folder to $Home/.vscode/extensions/, and restart VSCode with a .lgc file open, it is not highlighted at all. All the text is white. The status bar shows lgc as the language, so I know VSCode is detecting the language properly. Why doesn't it highlight?
I think you have a typo in your syntaxes/lgc.tmLanguage.json file:
"paterns":
Should be:
"patterns":
We have a self-hosted Azure DevOps Server 2019 for which I have created my own widget using the tutorial https://learn.microsoft.com/en-us/azure/devops/extend/develop/add-dashboard-widget?view=azure-devops-2019.
I was also able to successfully add the extension to the server and the extension is also visible.
However, when I edit my dashboard, my newly created widget is not displayed. What could be the reason for this?
Furthermore, I also installed the extension VstsDashboardWidgetProjectTemplate (https://github.com/GregTrevellick/VstsDashboardWidgetProjectTemplate) in Visual Studio and also created an extension/widget from it. Unfortunately with the same result that I can install and see the extension, but not the actual widget.
I am attaching the vss-extension.json file as I suspect this is where the error is most likely to be found. However, I can also supply the other files if needed.
{
"manifestVersion": 1,
"id": "MyVeryFirstCustomExtension",
"version": "1.0.0",
"name": "My Very First Custom Extension",
"description": "Samples containing different widgets extending dashboards",
"publisher": "MyCompany",
"categories": [
"Azure Boards"
],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"icons": {
"default": "img/logo.png"
},
"contributions": [
{
"id": "HelloWorldWidget",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog"
],
"properties": {
"name": "Hello World Widget",
"description": "My first widget",
"catalogIconUrl": "img/CatalogIcon.png",
"previewImageUrl": "img/preview.png",
"uri": "hello-world.html",
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 2
}
],
"supportedScopes": [
"project_team"
]
}
}
],
"files": [
{
"path": "hello-world.html",
"addressable": true
},
{
"path": "sdk/scripts",
"addressable": true
},
{
"path": "img",
"addressable": true
}
],
"scopes": [
"vso.work"
]
}
I am trying to create a new VS Code theme, but whenever I try to run the debugger vs code shows a warning "You don't have an extension for debugging 'JSON with comments'. Should we find a 'JSON with comments' extension in the marketplace?'
My launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"]
}
]
}
My package.json file:
{
"name": "theme",
"displayName": "theme",
"description": "theme",
"version": "0.0.1",
"engines": {
"vscode": "^1.58.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "theme",
"uiTheme": "vs-dark",
"path": "./themes/theme-color-theme.json"
}
]
}
}
I tried finding the JSON with comments debugger in the marketplace, but couldn't find it. Does anyone has any idea what I am doing wrong?
When debugging a theme your "./.vscode/launch.json" should look like this:
// "./.vscode/launch.json"
{
"configurations": [
{
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"name": "Launch Extension",
"request": "launch",
"type": "pwa-extensionHost"
}
]
}
"You only need four (4) settings total, which are displayed in the snippet above. Everything else is unnecessary junk when debugging a theme."
You need to do one more thing:
At the very top of your "./themes/theme-color-theme.json" file add the following lines:
// "./themes/theme-color-theme.json"
{
"name": "Your-themes-name",
"type": "dark",
"$schema": "vscode://schemas/color-theme",
"colors": {
// theme highlighting...
},
}
EDIT:
I unintentionally added "semanticHighlighting": true to the snippet above. That's something that isn't related to this question so I removed it from the example. Semantic Highlight is important, though, and you should read about it before choosing true or false, if you haven't read about it already.
My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.
I have the problem that the google home/assitant action console simulators response and request tab are not working. At least when I am using a custom action.json.
For me I am not sure if all have this problem or only some. That are using an custom action sdk. Or is it a problem only because something of my action.json is maybe not 100% correct configured.
here is the action.json:
{
"actions": [
{
"description": "Default Welcome Intent",
"name": "MAIN",
"fulfillment": {
"conversationName": "testApp"
},
"intent": {
"name": "actions.intent.MAIN",
"trigger": {
"queryPatterns": [
"open special manager",
"open s p m"
]
}
}
}
],
"types": [],
"conversations": {
"testApp": {
"name": "testApp",
"url": "https://572e66a2.ngrok.io/",
"fulfillmentApiVersion": 2,
"in_dialog_intents": [
{
"name": "actions.intent.NO_INPUT"
},
{
"name": "actions.intent.SIGN_IN"
}
]
}
}
here is a picture of the request:
As you can see it is only the dummy content in request tab anyway if the chat is working.
The response tab is completly empty. But the messages and voice is correctly working. Also on my google home.
Does anybody have an idea? I will add of course more debug informations if necessary. Can it be trouble with the response or request messages from my server?
But actually the messages, they are working...