Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vss-web-extension-sdk
Advanced tools
Readme
Client SDK and TypeScript declare files for developing Visual Studio Team Services Extensions.
The core SDK script, VSS.SDK.js
, enables web extensions to communicate to the host Team Services frame and to perform operations like initializing, notifying extension is loaded or getting context about the current page.
A previous version of the SDK was named
vss-sdk
. Make sure to switch to the newvss-web-extension-sdk
name.
npm install vss-web-extension-sdk
from the root of your extension projectThis will place VSS.SDK.js
and VSS.SDK.min.js
in node_modules/vss-web-extension-sdk/lib/
If you are developing a web extension, you will need to reference the SDK script from your HTML pages. For example:
<script src="lib/VSS.SDK.min.js"></script>
To ensure the SDK script is packaged with your extension, update your extension manifest (typically vss-extension.json
) and add a new entry to files
:
{
"files": [{
"path": "node_modules/vss-web-extension-sdk/lib",
"addressable": true,
"packagePath": "lib"
}]
}
Note: setting packagePath
is optional, but results in a simpler path for referencing the SDK script from your HTML pages. Not setting a part name would have required you to reference the full path in your <script>
tag (src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js"
)
From your web extension's HTML page, include and initialize the VSS SDK like this:
<script>
// Initialize
VSS.init({
usePlatformScripts: true,
usePlatformStyles: true
});
// Register callback to get called when initial handshake completed
VSS.ready(function() {
// Start using VSS
});
</script>
Full API reference of VSS.SDK.js can be found at Core Client SDK page.
Type definitions are provided for:
typings/vss.d.ts
)typings/tfs.d.ts
)typings/rmo.d.ts
)Dependency graph:
From a TypeScript 2.5 or later project:
"moduleResolution": "node"
in your tsconfig.json
project fileSee TypeScript Module Resolution for more details.
Alternatively, you can explicitly reference the types at the top of your TypeScript file(s):
/// <reference types="vss-web-extension-sdk" />
If you are developing a web extension for Visual Studio Team Service using TypeScript, we recommend the following organization:
|-- src
|-- app.ts
|-- some-module
|-- a.ts
|-- b.ts
|-- static
|-- css
|-- main.css
|-- images
|-- logo.png
|-- app.html
|-- vss-extension.json
|-- package.json
|-- tsconfig.json
src
static
tsconfig.json
)Defines the options for compiling your TypeScript files.
{
"compilerOptions": {
"module": "amd",
"moduleResolution": "node",
"target": "es5",
"rootDir": "src/",
"outDir": "dist/",
"types": [
"vss-web-extension-sdk"
]
}
}
After compiling (tsc -p .
), resulting .js files are placed in dist
. For example, dist/app.js
.
If your code directly uses types from other @types modules, you will want to include the module(s) in your package.json and add them to the types
array. See @types.
Learn more about tsconfig.json
package.json
)Declares the libraries (like the vss-web-extension-sdk) required to compile, package, and use your extension.
{
/* other details like ID, version, etc are omitted */
"scripts": {
"build": "tsc -p .",
"postbuild": "npm run package",
"package": "tfx extension create",
"gallery-publish": "tfx extension publish --rev-version",
"clean": "rimraf ./dist && rimraf ./*.vsix"
},
"devDependencies": {
"rimraf": "^2.5.4",
"tfx-cli": "^0.3.45",
"typescript": "^2.1.4"
},
"dependencies": {
"@types/jquery": "^2.0.34",
"@types/q": "0.0.32",
"vss-web-extension-sdk": "^5.127.0"
}
}
scripts
provides a convenient way to define common operations that you want to perform on your project, like compiling and packaging.
npm run build
. This runs build
and postbuild
. If you make a change that doesn't require compiling, you can package by simply running npm run package
.postbuild
script to run the gallery-publish
script (instead of package
). You can then run npm run build -- --token xxxxxx
(where xxxx is you personal access token for publishing to the Marketplace) to build, package, and publish your extension.jquery
and q
are only necessary if your TypeScript code is directly referencing either of these types.Learn more about package.json
vss-extension.json
){
/* details omitted */
"files": [
{
"path": "dist",
"addressable": true
},
{
"path": "static",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib",
"addressable": true,
"packagePath": "lib"
}
],
"contributions": [
{
"id": "my-hub",
"type": "ms.vss-web.hub",
"properties": {
"name": "Hub",
"uri": "static/app.html"
}
}
]
}
The compiled JavaScript files (placed into dist
by your tsconfig.json
) will be packaged into the dist
folder of the extension package.
The VSS SDK scripts will be packaged into the lib
folder of the extension package.
Learn more about the extension manifest.
<head>
<script src="../lib/VSS.SDK.min.js"></script>
<!--
Alternatively, if the packagePath attribute is not set for this file in your extension manifest (see above), do this:
<script src="../node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
-->
</head>
<body>
<script type="text/javascript">
// Initialize the VSS sdk
VSS.init({
usePlatformScripts: true,
usePlatformStyles: true
});
VSS.require(["dist/app"], function (app) {
...
});
</script>
</body>
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
FAQs
Visual Studio Team Services web extension JavaScript library and types.
The npm package vss-web-extension-sdk receives a total of 664 weekly downloads. As such, vss-web-extension-sdk popularity was classified as not popular.
We found that vss-web-extension-sdk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.