업무 명세서와 전자상거래 사이트 구축에 지쳤습니까?그 중 하나는 크롬의 확장 아이디어가 당신의 투자 그룹을 구분하는 데 도움을 줄 수 있다.👩‍💻
첫 번째 크롬 확장을 구축하는 데 필요한 모든 지식은 HTML, 자바스크립트, CSS의 기초 지식입니다!이것들은 내가 제기한 몇 가지 재미있는 생각들이다. 그것들은 단지 이런 기술로만 창조할 수 있다.
궁금한 게 있으면 제 동영상을 보세요.

1. 당신이 가장 좋아하는 사이트의 어두운 모드

너는 네가 좋아하지만 어두운 모드가 없는 사이트를 자주 사용하니?
Chrome 확장을 통해 특정 웹 사이트의 특정 스타일을 덮어쓰는 CSS 스타일시트를 만들 수 있습니다.이것은 확장을 사용할 때 웹 사이트에 암흑 모드 스타일을 적용할 수 있도록 합니다.
이를 실현하려면 내용 스크립트를 사용해야 합니다.

Tip: Set "run_at": "document_end" in the content_scripts object in the manifest.json so your styles override the site's.

이 프로젝트에 대해 알아야 할 사항은 다음과 같습니다.

Content Scripts

2. 날씨 활용

브라우저에 특정 위치의 현재 날씨를 표시하는 확장자를 만들 수 있습니다.
날씨 정보를 검색하려면 API를 호출해야 합니다. OpenWeatherMap API 좋은 선택입니다.그들은 공짜 계획을 가지고 있다.
서비스 담당자가 처리한 chrome.alarms API의 경고를 사용하여 몇 분 간격으로 백그라운드에서 최신 날씨 업데이트를 받을 수 있습니다.chrome.storage API를 사용하여 결과를 저장하고 확장된 작업 팝업 창에 표시합니다.
API를 호출하려면 fetch를 사용하고, manifest.json에 다음을 추가해야 합니다.

"host_permissions": ["https://some-weather-api.com/*"]

이 프로젝트에 대해 알아야 할 사항은 다음과 같습니다.

chrome.storage API

chrome.alarms API

chrome.action API

Service Workers

3. 오늘의 달력을 전시한다.

브라우저에 당일 캘린더 이벤트를 표시하도록 확장하여 이러한 이벤트에 쉽게 액세스할 수 있습니다.
앞의 생각과 마찬가지로, 당신은 몇 분 간격으로 백엔드에서 chrome.alarms API와 서비스 직원이 보낸 경보를 사용하여 외부 API (구글 달력 또는 당신이 가장 좋아하는 달력 API) 에서 데이터를 가져와야 합니다.
스토리지 API 요청 결과chrome.storage를 사용해야 합니다.확장이 유휴 상태일 경우 Service Worker를 제거할 수 있으므로 캘린더 이벤트만 Service Worker에 선언된 변수에 저장할 수 없습니다.
이벤트 및 이벤트 제목, 시간, 게스트 등을 내선 작업 팝업 창에 표시합니다.
또한 chrome.notifications API를 사용하여 이벤트가 발생하기 몇 분 전에 사용자에게 메시지를 표시할 수도 있습니다.
이 프로젝트에 대해 알아야 할 사항은 다음과 같습니다.

chrome.storage API

chrome.alarms API

chrome.action API

chrome.notifications API

Service Workers

4. 데일리 커피

사용자에게 매일 시도할 수 있도록 무작위 커피 레시피를 보여준다.
이 경우 외부 API를 호출할 필요가 없습니다(적어도 먼저).확장 중인 JSON 그룹에 가장 좋아하는 메뉴 목록을 저장하고 Math.random() 매일 그룹에서 무작위로 항목을 가져옵니다.
조작 팝업 창에 정교한 그림이 담긴 커피 레시피를 보여 줍니다.
이를 더욱 견고하게 하기 위해 chrome.storage에 표시된 마지막 커피 레시피와 날짜를 저장하여 두 가지를 확보할 수 있습니다.

매일 커피 레시피를 선보인다.

우리는 이틀 연속 같은 식단을 얻지 못했다.

이 프로젝트에 대해 알아야 할 사항은 다음과 같습니다.

chrome.action API

chrome.storage API(옵션)

5. 전자상거래 위시리스트

아마존, 이베이 등에서 온 제품을 소망 목록에 추가할 수 있습니다. 사용자가 관심 있는 제품을 찾을 때 키보드 단축키를 사용하거나 조작 팝업 창에서 소망 목록에 추가할 수 있습니다.
작업 팝업 창에는 이전에 추가한 항목도 표시되고 사용자가 삭제할 수 있습니다.
사용자는 구매를 방지하기 위해 모든 제품 페이지를 내비게이션할 수 있어야 한다.이를 위해서는 chrome.tabs.create을 사용해야 합니다.
각 제품의 링크, 이름 및 가격은 chrome.storage API를 사용하여 저장해야 합니다.
이 프로젝트에 대해 알아야 할 사항은 다음과 같습니다.

chrome.action API

chrome.storage API

chrome.tabs API - 특히 create method

나는 이 문장이 너에게 도움이 되고 다음 프로젝트를 위해 노력하도록 격려할 수 있기를 바란다.크롬 확장에 관심이 있다면, 내가 어디에서 간단한 크롬 확장을 만들었는지 확인하고, 점차적으로 개선하십시오.동시에 본고에서 언급한 아이디어를 구축하는 데 필요한 대부분chrome의 API와 개념을 탐색했다.
너도 나의 동영상을 보고 이 과정을 이해할 수 있다.
아이콘은 Smashicons와 Flaticon의 Freepik에서 만듭니다.일반 도메인 이름 형식