원클릭 Chrome 확장 프로그램: 스타일(또는 카오스)로 배경 변경-JS 튜토리얼-php.cn

원클릭 Chrome 확장 프로그램: 스타일(또는 카오스)로 배경 변경

Linda Hamilton

풀어 주다： 2025-01-05 14:27:40

원래의

1012명이 탐색했습니다.

One-Click Chrome Extension: Change Your Background with Style (or Chaos)

단 한 번의 클릭으로 브라우저를 멋지게 꾸미고 싶다면(한 번 이상 클릭할 시간이 있는 사람이 없겠죠?) 원클릭 Chrome 확장 프로그램이 바로 그것입니다. 당신이 필요합니다. 이러한 확장 프로그램은 버튼 하나만 클릭하면 뭔가 유용한(또는 웃기게도 무의미한) 작업을 수행하도록 설계되었습니다. 이 기사에서는 자신만의 원클릭 확장 프로그램을 즉시 구축하는 방법을 보여 드리겠습니다. 세상을 바꾸거나 웹페이지의 배경색을 바꿀 준비를 하세요. 우리는 판단하러 온 것이 아닙니다.

원클릭 Chrome 확장 프로그램이란 무엇입니까?

원클릭 Chrome 확장 프로그램을 브라우저의 마법 버튼이라고 생각하세요. 클릭하면 짜잔! 뭔가가 일어납니다. 배경색 변경, 영감을 주는 인용문 제공, 춤추는 고양이 애니메이션 실행(우리는 멈추지 않습니다) 등 세상이 바로 여러분의 굴입니다. 이 튜토리얼에서는 간단한 것부터 시작하겠습니다. 클릭 한 번으로 웹페이지의 배경을 차분한 연한 파란색으로 바꾸는 것입니다. 쉬운? 내기하세요.

1단계: 확장 폴더 만들기(일명 "Everything Is Gonna Be Fine" 폴더)

먼저 확장 파일을 저장할 폴더를 설정해야 합니다. 원클릭 확장이라고 부르거나 세상을 파란색으로 바꾸는 것과 같은 좀 더 극적인 이름으로 부르세요. 이 폴더 안에는 몇 가지 필수 파일이 필요합니다:

매니페스트.json(확장 프로그램의 두뇌)
background.js(커튼 뒤의 마법사입니다)
popup.html(사용자가 확장 프로그램 아이콘을 클릭하면 표시되는 내용)
popup.js(일을 수행하는 마법 스크립트)

폴더 구조:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

로그인 후 복사

2단계: 매니페스트 파일 생성(확장 프로그램의 브레인이라고도 함)

manifest.json은 확장 프로그램의 두뇌입니다. 확장 프로그램의 기능과 작동 방법을 Chrome에 알려줍니다. 그것이 없으면 확장 프로그램은 엔진이 없는 자동차와 같습니다. 보기에는 좋지만 전혀 쓸모가 없습니다.

다음은 Chrome에 확장 프로그램을 로드하도록 지시하는 샘플 매니페스트입니다.

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

로그인 후 복사

3단계: 팝업 UI 구축(일명 "Hey, Click Me!" 버튼)

팝업은 사용자가 확장 프로그램 아이콘을 클릭할 때 표시되는 것입니다. 우리의 경우에는 클릭하면 페이지의 배경색이 변경되는 버튼이 필요합니다. 아주 간단하죠? 마술 지팡이와 같지만 저주를 받을 위험은 없습니다.

popup.html은 다음과 같습니다.

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

로그인 후 복사

5단계: 배경 스크립트(일명 "Don't Touch Me, I'm Working" 파일)

background.js 파일이 백그라운드에서 실행됩니다. 보지 않을 때 확장 장치가 작동하는지 확인하는 등 모든 어려운 작업을 수행하는 것은 조용한 작업자입니다. 이 경우에는 많이 필요하지 않지만, 원한다면 여기에 더 복잡한 기능을 추가할 수 있습니다.

지금은 다음 기본 설정을 추가하세요.

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

로그인 후 복사