브라우저 확장 - 브라우저 알림 추가
5648 단어 beginnershtmljavascriptwebdev
시작점으로 popup extension 을 사용하겠습니다.
따라하려면 다음GitHub repo을 사용하십시오.
이 문서의 결과는 다음과 같은 상호 작용입니다.
브라우저 확장에 브라우저 알림 추가
Browser notifications은 모바일 장치에서 익숙한 것처럼 알림을 추가하는 기본 브라우저입니다.
그러나 이 단계에서 이를 선택하는 사람은 많지 않습니다. 미래에 이것이 변화하기를 바랍니다.
이 기사에서는 팝업 확장을 사용하여 브라우저 알림을 트리거합니다.
가장 먼저 해야 할 일은 애플리케이션에 올바른 권한을 부여하는 것입니다.
manifest.json
파일을 열고 다음 권한을 추가하십시오.{
"permissions": [
"notifications"
]
}
이렇게 하면 기본 알림 계층에 액세스할 수 있습니다.
그런 다음
src/App.jsx
파일을 열 수 있습니다.렌더링 부분에 버튼을 추가해 봅시다.
export function App() {
return (
<div className='flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4'>
<button
className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded'
onClick={createNotification}
>
Surprise me 🎉
</button>
</div>
);
}
클릭 핸들러에서
createNotification
를 발견했을 수 있습니다. 해당 기능을 파일에 빠르게 추가해 보겠습니다.const createNotification = () => {
chrome.notifications.create({
type: 'basic',
iconUrl: 'icons/icon-48.png',
title: 'Hi there 👋',
message: 'Just a reminder that you rock!',
buttons: [{ title: 'I know ☺️' }],
priority: 0,
});
};
이 함수는 브라우저 알림 API를 호출하고 새 알림을 생성합니다.
알림이 즉시 호출됩니다.
예제에서는 제목, 메시지 및 사용자 정의 버튼을 설정합니다.
Note: You can find all options in the documentation
이제 앱을 빌드하고 어떤 일이 발생하는지 살펴보겠습니다.
guide here을 따라 앱을 빌드하십시오.
이제 알림이 발생하는 것을 볼 수 있습니다!
전체 소스 코드를 보려면 GitHub에서 호스팅했습니다.
읽어주셔서 감사합니다. 연결합시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(브라우저 확장 - 브라우저 알림 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/browser-extensions-adding-browser-notifications-57dk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)