개발

[chrome plugin] 크롬 플러그인 샘플 코드 작성해보기 (feat. development-basics)

ttoance 2023. 9. 22. 07:00

chrome 공식 문서 >> 

https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/

 

Chrome Extension development basics - Chrome for Developers

What to expect during the development of a Chrome extension.

developer.chrome.com

 

Source Code

>> manifest.json 

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

 

>> hello.html

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

 

 

Loading an unpacked extension

1.&nbsp; chrome://extensions/ &nbsp;주소창에 입력
2. 상단의 개발자 모드 옵션 click
3. 압축해제된 확장 프로그램을 로드합니다. click
4. 샘플 소스 코드가 있는 코드를 가져온다.

 

Pinning the extensions 

확장 프로그램의 핀 버튼 click

 

Result

간단한 html과 json으로 설정 가능한 크롬 플러그인

반응형