브라우저 확장 프로그램의 작동 방식과 첫 번째 크롬 확장 프로그램을 빌드하는 방법에 관심이 있다면 올바른 위치에 있습니다 .?
이 기사에서는 새로운 크롬 확장 프로그램을 만들어 보겠습니다.
https://dev.to/ganeshjaiwal/build-your-first-chrome-extension-458g
시작하기 전에 몇 가지 중요한 용어를 살펴 보겠습니다.
확장이란 무엇입니까? ?
"Extension" 이름 자체가 많은 것을 설명합니다.
무언가 ¹의 기능을 향상 시키거나 "확장"하는 것 ²입니다.
우리의 경우 첫 번째는 브라우저 확장이라는 단일 엔티티를 만들기 위해 함께 번들로 제공되는 여러 파일 세트로 구성된 패키지입니다.
둘째, 기능을 향상 시키거나 웹 브라우저의 기능을 말하고자 하는 것입니다.
웹 브라우저는 무엇입니까?
웹 브라우저는 오늘날 모든 사람의 삶에서 가장 중요한 부분입니다.
소프트웨어 개발자로서 웹 브라우저 ??? (우리는 그것을 많이 사용합니다) 없이는 내 삶을 상상조차 할 수 없습니다.
Wikipedia에 따르면 웹 브라우저 (일반적으로 브라우저라고 함)는 World Wide Web의 정보에 액세스하기 위한 소프트웨어 응용 프로그램입니다.
사용자가 특정 웹 사이트에서 웹 페이지를 요청하면 웹 브라우저는 웹 서버에서 필요한 콘텐츠를 검색 한 다음 해당 페이지를 화면에 표시합니다.
확장 프로그램이 웹 브라우저 (Google Chrome에 집중)에 어떻게 도움이 되나요?
확장 기능은 브라우저에서 매우 중요한 부분이라고 생각합니다. 제 생각에는 삶을 더 쉽고 생산적으로 만들어주는 확장 프로그램을 사용하는 것을 좋아합니다.
제가 많이 사용하는 확장은 LastPass입니다. 이 확장 프로그램은 나를 대신하여 자격 증명을 기억하고 복잡한 암호를 기억하는 대신 두뇌가 더 중요한 일에 집중할 수 있도록 합니다 ? 처음 로그인 할 때만 자격 증명을 저장해야 합니다.
짧은 시간에 모든 제품과 가격 목록을 얻고 자하는 한 사례 연구를 고려하십시오.
일반 웹 브라우저를 사용하는 경우 수동으로 수행해야 합니다. 제대로 작동하는 것 같나요? 그러나 한 번 확장을 만들어 브라우저에 설치하면 어떨까요? 한 번만 클릭하면 모든 목록이 확장 프로그램에 의해 올바른 형식으로 완료됩니다.
글쎄, 당신은 브라우저 확장을 구축하는 방법을 알아야 합니다. 그럼 확인해 보겠습니다.
크롬 확장 프로그램 빌드를 시작하기 전에 기본 사항에 대해 자세히 알아보세요.
첨부 된 이미지는 확장의 모든 중요한 부분을 보여줍니다.
확장 기능 없이는 구축 할 수 없는 몇 가지 중요한 부분이 있습니다. 그럼 먼저 확인해 보겠습니다.
Manifest File
이것은 브라우저 확장을 만드는 동안 가장 중요하고 필요한 파일입니다.
매니페스트 파일은 확장에 대한 모든 기본 정보를 포함하는 확장 메타 데이터의 JSON 개체입니다.
Manifest 파일의 샘플을 확인하십시오.
{
"name": "My First Extension",
"short_name": "First App",
"description": "App for demo.",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
}
}Background Script
백그라운드 스크립트는 브라우저 이벤트를 처리하기 위해 백그라운드에서 실행되는 JavaScript 파일입니다.
확장 프로그램의 이벤트 핸들러 페이지라고도 합니다. 북마크 생성, 페이지 로드 완료 등과 같은 브라우저의 이벤트를 처리합니다.
/* Create background.js and add this code into it */
chrome.runtime.onInstalled.addListener((details) => {
console.log('previousVersion', details.previousVersion)
});
console.log('Event Page for Page Action');/* Add this to manifest file to use our backgroud script */
"background": {
"scripts": ["scripts/background.js"]
}Extension Popup
팝업은 사용자가 도구 모음 아이콘을 클릭 할 때 특수 창에 표시되는 HTML 파일입니다. 웹 페이지에 비해 매우 유사한 방식으로 작동합니다. 스타일 시트 및 스크립트 태그에 대한 링크를 포함 할 수 있지만 인라인 JavaScript는 허용하지 않습니다.
여기에서 확장 팝업 코드를 확인하세요.
/*
Add this to manifest file so user can see popup on browser action click.
*/
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "My First Extension",
"default_popup": "pages/popup/popup.html"
}
Content Script
이것은 웹 페이지의 세부 정보에 액세스하고, 페이지를 변경하고, 정보를 상위 확장에 전달하는 등의 작업을 수행하기 위해 웹 페이지에 삽입되는 JavaScript 파일입니다.
다음과 같은 옵션을 사용하여 매니페스트 파일을 구성 할 수 있습니다. run_at는 스크립트를 삽입하고 실행할 시기를 결정하는 데 사용됩니다. URL 패턴 일치를 기반으로 스크립트를 삽입 할 위치를 결정하는 역할을 합니다.
js 삽입 할 JS 파일 경로의 배열입니다. css 삽입 할 스타일 시트 파일 경로의 배열입니다.
페이지 상단의 콘텐츠 스크립트에 의해 div가 삽입되었음을 보여주는 아래 이미지를 확인하세요.
/*
Add this to manifest file to inject contentscript.js into web page.
*/
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": [
"styles/contentscript.css"
],
"js": [
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
]Options Page
사용자가 옵션 페이지를 제공하여 확장의 동작을 사용자 정의 할 수 있습니다.
사용자는 도구 모음에서 확장 아이콘을 마우스 오른쪽 단추로 클릭 한 다음 옵션을 선택하여 확장 옵션을 볼 수 있습니다. chrome://extensions의 확장 프로그램 관리 페이지로 이동 한 다음 원하는 확장에서 세부 정보를 선택하는 또 다른 방법입니다. 세부 정보 페이지에서 옵션 링크를 선택합니다.
여기에서 옵션 페이지 코드를 확인하세요.
/*
Specifying options page entry to manifest will allow you to use options in your extension.
*/
"options_page": "pages/options/options.html",
"options_ui": {
"page": "pages/options/options.html",
"chrome_style": true
}모든 것을 함께 유지하여 첫 번째 크롬 확장 프로그램을 만드십시오.
첫 번째 크롬 확장 프로그램을 만들었습니다. 이제 개발자 모드에서 확장 프로그램을 테스트 할 차례입니다 .?
chrome : // extensions를 방문하여 Chrome 브라우저에 확장 프로그램을 로드합니다.
빙고! ? 방금 첫 번째 크롬 확장 프로그램을 만들고 실행했습니다.
여기에서 방금 만든 확장에 대한 코드를 가져옵니다.
다음 기사에서는 수동 및 스크립트 기반의 두 가지 접근 방식을 사용하여 Chrome 웹 스토어에 자신의 확장 프로그램을 업로드하는 방법을 설명합니다.
등록된 댓글이 없습니다.
