VS 코드로 크롬 앱 개발
7504 단어 ChromeAppsJavaScriptVSCode
파일 목록
manifest.json
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
calculator-16.png 
calculator-128.png 
구성 설정
여기서부터 VS코드의 본색 발휘.VS 코드에서 이 폴더를 엽니다.켜고 누릅니다
Ctrl+Shift+B.그래서 No task runner configured.문서 레지스트리에 항목을 추가합니다.
이 메시지가 나타나면'작업 실행기 설정'을 누르십시오.
그리하여vscode/tasks.json이라는 파일을 만듭니다.tasks.json이 열려 있습니다.
tasks.json은 TypeScript 설정을 템플릿으로 설명합니다.이번에는 TypeScript가 아니므로 잠시 모두 삭제하고 아래 내용으로 쓰십시오.
tasks.json
{
"version": "0.1.0",
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"isShellCommand": true,
"showOutput": "silent",
"args": [
"--load-and-launch-app=${workspaceRoot}"
]
}
"command"에서 지정한 것은 Chrome 설치의 전체 경로입니다.Windows의 경우 위의 경로여야 하며 서로 다른 경우에는 각 환경에 따라 설정해야 합니다.검색 방법은 바탕 화면 단축 아이콘 → 속성 → 링크 대상을 오른쪽 단추로 클릭하는 것이 간단합니다.
설정 후 VS Code에서 다시 누릅니다
Ctrl+Shift+B.이번에 구축을 설정했기 때문에 크롬 프로그램이 시작될 것입니다.
Chrome Dev Editor이 끝나고 크롬 앱을 쉽게 개발하기 어려울 줄 알았는데 그럴 수 있을 것 같아요.
Reference
이 문제에 관하여(VS 코드로 크롬 앱 개발), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/niusounds/items/c10c48501393c80ae186텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
