Flutter 앱을 Google Chrome 확장 프로그램으로 만들기
소개
최근에 나는 daily.dev 응용 프로그램과 유사한 응용 프로그램을 에뮬레이트하고 생성하려고 노력했습니다. daily.dev에 대해 모른다면 간단히 말해서 개발자를 위한 개인화 기술에 대한 뉴스와 기사를 제공하는 플랫폼입니다.
지난 몇 년 동안 Flutter & Dart를 사용하여 앱을 빌드하는 방법을 배우고 익숙해졌습니다. 이 여정에서 저는 daily.dev 플랫폼에서 영감을 받았습니다. 그래서 daily.dev와 유사한 Flutter 애플리케이션을 만들고 Flutter 애플리케이션을 Chrome 확장 애플리케이션으로 실행하려고 했습니다.
...
어떻게 해야 하나요? 🤔
Flutter 프로젝트 생성 또는 기존 Flutter 프로젝트 사용
처음부터 Flutter 프로젝트를 만들거나 이전에 만든 Flutter 프로젝트를 사용할 수 있습니다. 물론 Flutter로 크롬 확장 프로그램을 빌드하려면 Flutter 프로젝트가 웹 플랫폼을 지원해야 합니다.
나는 daily.dev와 유사한 간단한 Flutter 애플리케이션을 직접 만들었습니다. 이 Flutter 앱은 Flutter 2.0을 사용하여 만들어졌습니다.
아래 Github 저장소에서 볼 수 있습니다.
sahibul-nf / 일일
일일
새로운 Flutter 프로젝트.
시작하기
이 프로젝트는 Flutter 애플리케이션의 시작점입니다.
첫 번째 Flutter 프로젝트인 경우 시작할 수 있는 몇 가지 리소스:
Flutter를 시작하는 데 도움이 필요하면 다음을 확인하세요.
online documentation 튜토리얼을 제공하는
샘플, 모바일 개발 지침 및 전체 API 참조.
View on GitHub
매니페스트.json 설정
/web 폴더에 있는 manifest.json 파일에서 다음과 같이 파일을 변경했습니다.
{
"name": "daily",
"short_name": "daily",
"start_url": ".",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "A new Flutter project.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"chrome_url_overrides": {
"newtab": "index.html"
},
"version": "1.0.0",
"content_security_policy": {
"extension_pages": "script-src 'self' ; object-src 'self'"
},
"action": {
"default_popup": "index.html",
"default_icon": "/icons/Icon-192.png"
},
"manifest_version": 3
}
...
index.html 설정
다음으로 index.html 파일에서 몇 가지 사항을 변경했습니다.
<html style="height: 650px; width: 350px;">
<script src="main.dart.js" type="application/javascript"></script>
index.html 파일은 대략 다음과 같습니다.
<!DOCTYPE html>
<html style="height: 650px; width: 350px;">
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="daily">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>daily</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<!-- <script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script> -->
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
...
앱을 빌드하고 사용해 봅시다! 🚀
위의 단계 중 일부를 수행한 후 다음 명령을 사용하여 앱을 빌드합니다.
flutter build web --web-renderer html --csp
애플리케이션 빌드가 완료되면 Chrome을 열고 chrome://extensions/로 이동합니다.
And enable Developer mode.
다음으로 Load unpacked를 클릭하고 빌드된 Flutter 웹 애플리케이션의 결과인 build/web 폴더를 선택합니다. 그러면 아래 이미지와 같이 크롬 확장 프로그램이 나타납니다.
...
결과
이제 Flutter를 사용하여 만든 Chrome 확장 앱을 실행할 수 있으며 잘 실행됩니다.
굉장해요🤩
...
데모 앱
다음 비디오를 통해 보다 완전한 비디오 데모를 보십시오.
...
종결
이것은 저에게 환상적인 학습 경험이었습니다 🚀.
그리고 마지막으로 Flutter를 사용하여 만든 daily.dev 애플리케이션 복제 프로젝트에서 크롬 확장 지원을 제공함으로써 daily.dev과 유사한 애플리케이션을 만들 수 있습니다. 대박😁 🤩
Reference
이 문제에 관하여(Flutter 앱을 Google Chrome 확장 프로그램으로 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sahibul_nf/make-your-flutter-app-the-google-chrome-extension-4d68텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
