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

단 한 번의 클릭으로 브라우저를 멋지게 꾸미고 싶다면(한 번 이상 클릭할 시간이 있는 사람이 없겠죠?) 원클릭 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"
  }
}

6단계: 아이콘 추가(선택 사항이지만 강력히 권장됨)

아이콘은 확장 프로그램의 옷장과 같아서 도구 모음에서 보기 좋게 만듭니다. 다양한 크기(예: 16x16.png, 48x48.png, 128x128.png)의 아이콘을 추가할 수 있습니다. 이는 Chrome에서 확장 프로그램을 표시해야 할 때마다 사용됩니다.

아이콘 폴더를 만들고 사용하고 싶은 아이콘을 추가하면 됩니다.

7단계: Chrome에 확장 프로그램 로드(일명 "진실의 순간")

당신의 걸작을 테스트할 시간입니다. Chrome에 확장 프로그램을 로드하는 방법은 다음과 같습니다.

1. Chrome을 열고 chrome://extensions/로 이동하세요.
2. '개발자 모드'를 활성화합니다(평생 치트 코드를 활성화하는 것과 같습니다).
3. '압축해제된 파일 로드'를 클릭하고 원클릭 확장 폴더를 선택하세요.
4. 이제 확장 프로그램 아이콘이 툴바에 표시됩니다. 보세요. 감탄해보세요. 클릭하세요.

8단계: 테스트(일명 "아, 작동합니다!" 순간)

확장 프로그램 아이콘을 클릭하세요. "배경 변경"이라는 버튼이 있는 팝업이 나타나야 합니다. 클릭하면 현재 웹페이지의 배경색이 날씨가 좋은 날 잔잔한 바다처럼 연한 파란색으로 변합니다.

결론(일명 "You Did It" 섹션)

축하합니다! 나만의 원클릭 Chrome 확장 프로그램을 만들었습니다. 이 간단한 도구는 페이지 색상 변경, 동기 부여 인용문 추가, 페이지에서 부드러운 재즈 연주 등 원하는 대로 확장할 수 있습니다. 가능성은 무한합니다.

이제 이 모든 것을 갖추셨으니 인터넷을 좀 더 재미있게 만들 준비가 되셨습니다. 가서 놀라운 것을 만들어 보세요. 적어도 친구들이 당신을 일종의 마법사라고 생각하게 만드는 것을 만들어 보세요. ✨

위 내용은 원클릭 Chrome 확장 프로그램: 스타일(또는 카오스)로 배경 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!