개요
요즘 인스타그램 클론코딩을 하고있는데 기능도 많고 복잡해서 그런지 집중이 잘 안되는 기분이라서 그동안 만들고 싶었지만 미루고 있던 재미난 일을 했다.
크롬 익스텐션 만들기
크롬 익스텐션을 워낙 잘 쓰고있어서 비슷한 것을 너무 만들어 보고 싶었다.
그리고 드디어 만들었다.
정말 간단 버전이지만 앞으로 차근차근 업데이트 하려고한다.
과정
1. 익스텐션에 맞게 프로젝트 셋팅하기
- web/index.html에서 모든
<script>..</script>문을 삭제한 뒤, body안에
를 추가해주었다.<script src="main.dart.js" type="application/javascript"></script>
기존에 있던 스크립트 문은 웹에서 초기화하고 기본값들을 로드하는 코드들인데 삭제할 필요가 있었는지 궁금했다.
삭제한 스크립트문
<script> // The value below is injected by flutter build, do not touch. var serviceWorkerVersion = null; </script><!-- This script adds the flutter initialization JS code --> <script src="flutter.js" defer></script><script> window.addEventListener('load', function(ev) { // Download main.dart.js _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, }, onEntrypointLoaded: function(engineInitializer) { engineInitializer.initializeEngine().then(function(appRunner) { appRunner.runApp(); }); } }); }); </script>
해당 코드를 지우지않으면 CSP error(콘텐츠 보안 정책 에러)가 생긴다고 한다.
-
태그에 높이와 넓이를 추가해준다. 원하는 높이와 넓이로 설정해주면 된다. 추후 나는 350px / 350px 으로 수정해주었다.
<html style="height: 600px; width: 350px"> -
web/manifest.json로 넘어가 아래 코드로 변경해준다. name과 description은 프로젝트이름, version은 내가 만든 프로젝트의 버전, default_icon은 favicon 이름이 될 것이다.
{ "name": "프로젝트 이름", "description": "프로젝트 이름", "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 }
2. 구글 io처럼 색깔과 폰트 셋팅하기/google_fonts
요즘 이런 스타일에 꽂혀있어서 정말 하고싶었다. 그래서 이런 느낌으로 해볼 수 있을까 싶어서 글꼴과 색깔을 가져와보았다.
위의 두개의 익스텐션을 사용해 fontStryle과 color를 찾을 수 있었다.
Text(
DateFormat('y년 M월 d일').format(DateTime.now()),
style: GoogleFonts.notoSans(
textStyle: Theme.of(context).textTheme.headlineSmall,
color: Colors.black,
letterSpacing: .5),
),3. timer_builder 사용해서 StatelessWidget에서 실시간으로 시간이 움직이게 만들어보기
처음에는 setState에 DateTime을 넣어서 바뀔 때마다 보이는 걸로 해야하나 생각했지만, 밀리미터초로 계속 바뀌는데 그렇게 하면 안될 것 같아서, 찾아보니 timer_builder를 사용할 수 있었다. 2년전 업뎃이 마지막이라서 혹시 다른 것도 있나 찾아봤는데, Duration으로 milliseconds마다 매번 바꿀 수 있는 패키지는 찾을 수가 없었다(못 찾은건가..)
TimerBuilder.periodic(
const Duration(milliseconds: 1),
builder: (context) {
return Container(
padding: const EdgeInsets.all(30),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 50,
color: const Color.fromARGB(255, 146, 198, 253),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
DateFormat('y년 M월 d일').format(DateTime.now()),
style: GoogleFonts.notoSans(
textStyle: Theme.of(context).textTheme.headlineSmall,
color: Colors.black,
letterSpacing: .5),
),
Row(
children: [
Text(
DateFormat('h시 mm분 s초').format(DateTime.now()),
style: GoogleFonts.notoSans(
textStyle: Theme.of(context).textTheme.headlineMedium,
fontWeight: FontWeight.w500,
color: Colors.black,
letterSpacing: .5),
),
const SizedBox(width: 10),
Text(
DateTime.now().millisecond.toString(),
style: GoogleFonts.notoSans(
color: Colors.black,
textStyle: Theme.of(context).textTheme.headlineSmall,
textBaseline: TextBaseline.alphabetic,
),
),
],
),
],
),
);
},
),
dependencies
- google_fonts
- intl
- timer_builder
후기
정말로 서버시간만 보이는 정도로 밖에 못 만들었다.
그래도 뿌듯.
바로 구글에 제출할까 말까 고민스럽긴하다.
근데 뭔가 더 수정해서 제출하고 싶다. 아직은 너무 아쉬워
Building a Chrome Extension using Flutter 따라하면서 qr코드 제네레이터도 만들어보고 도움이 많이 되었다.
추가/수정하고 싶은 사항
- 밀리세컨 선택으로 visible하게 만들기(계속 떠있으니까 정신 사나운 것 같다)
- favicon 수정
- 개발자도구 오는 것처럼 아예 고정할 수 있게 만들고 싶음 (서버시간은 주로 수강신청/티켓팅 같은 것을 위해서 사용하는데 다른 활동하다보면 사라지니까 불편 함)
- 각 사이트 별로 서버시간 가져오기
- 정각 알림 / n분 전 알림
구글 I/O 페이지처럼 하고싶은데 폰트와 색깔만으로는 그 느낌이 전혀 아니다. 어떻게 해야하는지 연구 해야 할 것 같다
