전체 글30 크롬 익스텐션 튜토리얼 (6) Tabs Manager - 그룹화 해제 기능 목표 : 그룹화 해제 기능이 있는 버튼을 추가한다. 결과물 미리보기 * 소스코드 : https://github.com/junsungc/chrome-extensions-samples/tree/main/tutorials/tabs-manager 커밋 : 9dced6b1efbc5815e0958203375fbb12b23868ca(버그수정), 2e88cc0850571b4d7ca9427c0bdcb1fd85e6fc4a 1. 9dced6b1efbc5815e0958203375fbb12b23868ca 먼저 이전 포스팅에서 index 정렬에서 sort버그를 발견하여 이를 수정하였다. 버그내용 : tab의 index가 1~9까지는 sort가 정상적으로 작동하는 듯 보였으나 index 10부터 정렬이 수상하길래 파악해보니 튜토리.. 2022. 12. 31. 크롬 익스텐션 튜토리얼 (5) Tabs Manager - hostname별 그룹화 목표 : hostname별로 탭을 그룹화하기 결과물 미리보기 * 소스코드 관리를 위해 저의 개인 github로 fork 하였습니다. 코드는 다음의 주소에서 받으실 수 있습니다. https://github.com/junsungc/chrome-extensions-samples/tree/main/tutorials/tabs-manager 커밋 : 0dfb09191a79ea22b870516e934c11eacfbdac93 수정된 파일은 두개이다. 참고로 아래 diff 파일은 가독성을 올리기 위해 필요한 부분만 편집한 (동작하지 않는) diff파일이다. //주석처리된 부분을 집중적으로 읽으면 편하다. 1.mainpref.json diff --git a/tutorials/tabs-manager/manifest.json.. 2022. 12. 31. 크롬 익스텐션 튜토리얼 (4) Tabs Manager 목표 : 탭을 그룹화하기 결과물 미리보기 소스코드 : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/tabs-manager 위 익스텐션 개발에는 총 3개의 파일이 필요하다. (icon,css 제외) 1. manifest.json { "manifest_version": 3, "name": "Tab Manager for Chrome Dev Docs", "version": "1.0", "icons": { "16": "images/icon-16.png", "32": "images/icon-32.png", "48": "images/icon-48.png", "128": "images/icon-128.png" }, "acti.. 2022. 12. 30. 크롬 익스텐션 튜토리얼 (3) Focus Mode 목표 : 현재 페이지의 CSS를 수정하여 집중모드 만들기 소스코드 : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/focus-mode 위 익스텐션 개발에는 총 3개의 파일이 필요하다. (icon 제외) 1. manifest.json { "manifest_version": 3, "name": "Focus Mode", "description": "Enable reading mode on Chrome's official Extensions and Chrome Web Store documentation.", "version": "1.0", "icons": { "16": "images/icon-16.png", "32":.. 2022. 12. 30. 크롬 익스텐션 튜토리얼 (2) reading-time 목표 : 현재 페이지의 컨텐츠를 읽는 데 걸리는 시간 Reading Time 계산하고 알려주기 결과물 미리보기 소스코드 : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/reading-time 위 익스텐션 개발에는 총 2개의 파일이 필요하다. (icon 제외) 1. manifest.json { "manifest_version": 3, "name": "Reading time", "version": "1.0", "description": "Add the reading time to Chrome Extension documentation articles", "icons": { "16": "images/icon-16.p.. 2022. 12. 30. 크롬 익스텐션 튜토리얼 (1) hello-world 목표 : "Hello World!!" 팝업 출력되는 익스텐션 제작하기 github : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/hello-world 위 Hello World 익스텐션 개발을 위해 충 4개의 파일이 필요하다. 1. manifest.json { "name": "Hello Extensions of the world!", "description": "Base Level Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "hello.html", "default_icon": "hello_extensions... 2022. 12. 30. 이전 1 2 3 4 5 다음
