Svelte로 다음 Chrome 확장 프로그램을 빌드하는 방법
Chrome Developers Portal에서 사용할 수 있는 기본 자습서를 따른 후 확장 기능을 빌드하려면 HTML, CSS 및 JavaScript만 있으면 된다는 사실을 알게 되었습니다.
그러나 문제는 Research Pal이 서로 다른 조건에 따라 표시되는 몇 가지 다른 "화면"또는 "섹션"을 갖게 된다는 것입니다. 게다가 사용자는 상호 작용을 통해 "화면"사이를 탐색할 수 있습니다. 나는 당신을 모르지만 일반 JavaScript로 모든 상태 논리를 처리하고 싶지 않습니다 😆
Svelte 발표
Svelte에 대해 처음 듣는다면 official website을 살펴보는 것이 좋습니다.
svelte에 대한 이전 게시물 중 일부를 확인할 수도 있습니다.
Svelte가 다른 JS 프레임워크와 차별화되는 점 중 하나는 대부분의 작업을 브라우저에서 수행하는 대신 해당 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 전환한다는 것입니다.
몇 시간 동안 Svelte에 대해 이야기할 수 있지만 Chrome 확장 프로그램에 Svelte를 어떻게 사용할 수 있는지 살펴보겠습니다.
1. Svelte 앱 만들기
Svelte 앱을 만들려면 degit을 사용해야 합니다. 다음 명령을 실행합니다.
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev
모든 것이 예상대로 진행되면 http://localhost:3000에서 실행 중인 앱을 볼 수 있어야 합니다.
2. Chrome 확장 프로그램 추가
이 자습서에서는 "extension"이라는 폴더를 만들어야 합니다. 그런 다음 새 폴더 안에 다음 파일을 만듭니다.
매니페스트.json
{
"name": "Counter App",
"version": "1.0",
"description": "Chrome extension + Svelte boilerplate",
"permissions": ["activeTab"],
"browser_action": {
"default_popup": "popup.html",
},
"manifest_version": 2
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Counter App</title>
<!-- CSS Bundle generated by Svelte -->
<link rel='stylesheet' href='/build/bundle.css'>
<!-- JS Bundle generated by Svelte -->
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
If you want to dig into Chrome extension development, please take a look at
's post:
3. Svelte 앱에 로직 추가
App.svelte로 이동하여 내용을 다음 코드로 바꿉니다.
<script>
let count = 0;
function sum() {
count++;
}
</script>
<p>Counter: {count}</p>
<button on:click={sum}> + </button>
<style>
</style>
4. 확장 기능 구축
Svelte 프로젝트에서 npm run build 스크립트를 실행하면 public라는 새 폴더가 나타납니다.
Svelte 파일과 함께 이 폴더에 확장 파일을 포함하고 싶기 때문에 cpx이라는 라이브러리를 설치해야 합니다.
npm install --save cpx
Cpx를 사용하면 확장 폴더에서 각 빌드의 공용 폴더로 파일을 이동할 수 있습니다.
마지막으로 package.json 파일 내에서 빌드 스크립트를 다음과 같이 업데이트해야 합니다.
{
...
"scripts": {
- "build": "rollup -c",
+ "build": "cpx -C public/** public/** && rollup -c && cpx extension/**/*.* public",
...
},
...
}
이 새 스크립트를 사용하여 public 폴더를 삭제하고 Svelte 앱을 빌드하고 마지막으로 cpx를 사용하여 확장 파일을 복사합니다.
그게 다야. 이제 Google Chrome으로 이동하여 다음 단계에 따라 확장 프로그램을 로드할 수 있습니다.
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev
이 자습서에서는 "extension"이라는 폴더를 만들어야 합니다. 그런 다음 새 폴더 안에 다음 파일을 만듭니다.
매니페스트.json
{
"name": "Counter App",
"version": "1.0",
"description": "Chrome extension + Svelte boilerplate",
"permissions": ["activeTab"],
"browser_action": {
"default_popup": "popup.html",
},
"manifest_version": 2
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Counter App</title>
<!-- CSS Bundle generated by Svelte -->
<link rel='stylesheet' href='/build/bundle.css'>
<!-- JS Bundle generated by Svelte -->
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
If you want to dig into Chrome extension development, please take a look at 's post:
3. Svelte 앱에 로직 추가
App.svelte로 이동하여 내용을 다음 코드로 바꿉니다.<script>
let count = 0;
function sum() {
count++;
}
</script>
<p>Counter: {count}</p>
<button on:click={sum}> + </button>
<style>
</style>
4. 확장 기능 구축
Svelte 프로젝트에서
npm run build 스크립트를 실행하면 public라는 새 폴더가 나타납니다.Svelte 파일과 함께 이 폴더에 확장 파일을 포함하고 싶기 때문에 cpx이라는 라이브러리를 설치해야 합니다.
npm install --save cpx
Cpx를 사용하면 확장 폴더에서 각 빌드의 공용 폴더로 파일을 이동할 수 있습니다.
마지막으로
package.json 파일 내에서 빌드 스크립트를 다음과 같이 업데이트해야 합니다.{
...
"scripts": {
- "build": "rollup -c",
+ "build": "cpx -C public/** public/** && rollup -c && cpx extension/**/*.* public",
...
},
...
}
이 새 스크립트를 사용하여
public 폴더를 삭제하고 Svelte 앱을 빌드하고 마지막으로 cpx를 사용하여 확장 파일을 복사합니다.그게 다야. 이제 Google Chrome으로 이동하여 다음 단계에 따라 확장 프로그램을 로드할 수 있습니다.
public 폴더 선택 업데이트를 테스트할 때마다
build 스크립트를 실행하면 확장 프로그램이 브라우저에 다시 로드됩니다.
상용구를 보여주세요!
상용구를 얻으려면 내 github 저장소를 확인하십시오.
마우로 코드
/
chrome-extension-with-svelte
Svelte를 사용하는 기본 크롬 확장이 포함된 상용구
크롬 확장 프로그램 만들기
다음 명령을 실행합니다.
npm i
npm run build
확장 빌드는 public 폴더에서 사용할 수 있습니다.
이 상용구에 대해 더 알고 싶다면 내 blog post를 확인하십시오.
View on GitHub
아래 댓글에 여러분의 생각을 알려주세요 👇
Reference
이 문제에 관하여(Svelte로 다음 Chrome 확장 프로그램을 빌드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mauro_codes/how-to-build-your-next-chrome-extension-with-svelte-13cd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다음 명령을 실행합니다.
npm i npm run build
확장 빌드는
public 폴더에서 사용할 수 있습니다.이 상용구에 대해 더 알고 싶다면 내 blog post를 확인하십시오.
View on GitHub
아래 댓글에 여러분의 생각을 알려주세요 👇
Reference
이 문제에 관하여(Svelte로 다음 Chrome 확장 프로그램을 빌드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mauro_codes/how-to-build-your-next-chrome-extension-with-svelte-13cd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
