Chrome 확장 프로그램 구축: 빠른 개요
- 王林원래의
- 2024-08-29 11:03:11708검색
모드—수정? 게임을 좋아하신다면 모드 게임만큼 좋은 게 없다는 걸 아실 겁니다. 여러분이 가장 좋아하는 게임이지만 추가 성능, 기능, 재미도 있습니다. 이제 귀하의 웹 브라우징 경험에도 동일한 즐거움을 선사한다고 상상해 보십시오. 이것이 바로 브라우저 확장 프로그램이 하는 일입니다. 마치 브라우저를 위한 모드와도 같아서 이전에는 불가능하다고 생각했던 방식으로 브라우저를 강화합니다.
Chrome 확장 프로그램을 사용하면 특정 URL을 차단하거나, 새로운 기능을 추가하거나, 완전히 새로운 모습을 제공하는 등 필요에 맞게 브라우저를 조정할 수 있습니다. 그리고 가장 좋은 점은? 이러한 확장을 직접 구축할 수 있습니다. 이 가이드에서는 나만의 Chrome 확장 프로그램을 만드는 단계별 과정을 안내해 드리겠습니다.
웹 확장 프로그램을 시작하는 것은 생각보다 쉽습니다! JavaScript를 알고 있다면 매우 쉽습니다. 새로운 API만 배우면 됩니다. 결국 핵심은 여전히 JavaScript입니다.
이 문서는 다음 항목에 대한 보충 자료입니다. Chrome 확장 프로그램 핸드북: 메모리 집약적부터 프로덕션 준비까지
목차
- 웹 확장 101
- 매니페스트 분석:
- 간단한 이미지 다운로더 구축
- 다운로드 기능:
- 확장 프로그램을 테스트할 준비가 되었습니다
- 확장 프로그램 로드 중
- 결론
웹 확장 101
웹 확장은 모드와 비슷하지만 브라우저용입니다. AdBlock처럼 브라우저가 작동하는 방식이나 Mozilla 테마처럼 보이는 방식을 완전히 사용자 정의할 수 있습니다.
시작하려면 새 폴더를 만드세요!
manifest.json만 있으면 됩니다. 주요 기능이지만 웹 확장용입니다. 브라우저가 찾는 첫 번째 파일입니다!
{
"manifest_version": 3,
"name": "img-downl",
"version": "1.0",
"description": "image ac?",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": [
"activeTab"
]
}
매니페스트에는 확장 프로그램에 대한 모든 메타데이터가 포함되어 있습니다. 브라우저가 확장 프로그램과 그 기능을 이해하는 방법입니다.
매니페스트 분석:
- "manifest_version": 3, 이는 사용할 API 버전을 브라우저에 알려줍니다. 버전 2가 이전 버전이고 버전 3(V3)이 최신 API입니다. 더욱 안전하고 성능이 뛰어나며 Chrome을 포함한 대부분의 브라우저는 버전 3으로만 전환되었습니다.
한 가지 주요 차이점은 영구 백그라운드 스크립트에서 서비스 워커로 전환된다는 것입니다. V2의 백그라운드 스크립트는 확장 프로그램의 전체 수명 동안(사용자가 탐색하는 동안) 실행되었으므로 "지속적"이라는 측면이 있습니다. V3에서는 필요할 때만 실행됩니다!
-
콘텐츠 스크립트:
콘텐츠 스크립트는 웹페이지 자체에 삽입됩니다. 우리의 작은 확장에서는 content.js가 "일치"와 일치하는 모든 URL(["
"])에 삽입됩니다. 따라서 URL을 탐색하거나 새 탭을 열면 content.js가 페이지에 삽입되어 실행됩니다.
컨텐츠 스크립트는 백그라운드 스크립트와 달리 DOM에 액세스할 수 있습니다.
이것은 간단한 플러그인의 기본 구조입니다. 더 많은 확장 프로젝트를 구축하면 권한 및 추가 기능에 대해 배우게 됩니다. 소개는 이 간단한 분석으로 충분합니다.
간단한 이미지 다운로더 구축
준비됐나요?
이 확장 프로그램은 제가 예전에 들었던 컴퓨터 비전 과정에서 영감을 받았습니다. Google 검색에서 이미지를 다운로드하는 도구를 구현해야 했습니다.
참고: 탐색할 때마다 이미지를 다운로드하려는 경우가 아니면 이 확장 프로그램을 항상 실행하지 않는 것이 좋습니다.
manifest.json과 동일한 폴더에 content.js를 생성하고 다음을 붙여넣습니다.
async function processAllImages() {
const images = document.querySelectorAll('img');
let count = 0;
for (const img of images) {
const url = img.src;
const filename = `image${count++}.png`; // Generate a filename for each image
try {
await downloadImage(url, filename);
console.log(`Downloaded ${filename}`);
} catch (error) {
console.error(`Error downloading image from ${url}:`, error);
}
}
}
// Run the function to process and download images
processAllImages();
콘텐츠 스크립트는 웹페이지에 삽입된다는 점을 기억하세요. 예를 들어 example.com으로 이동하면 processAllImages가 실행됩니다.
모든 이미지 요소를 가져와 다운로드 기능에 전달하는 것이 전부입니다.
const images = document.querySelectorAll('img');
다운로드 기능:
async function downloadImage(url, filename) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => {
if (!response.ok) throw new Error('Network response was not ok.');
return response.blob();
})
.then(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(a.href); // Clean up the object URL
document.body.removeChild(a);
resolve();
})
.catch(error => reject(error));
});
}
참고: 이는 정적 이미지에만 작동합니다. 동적 및 지연 로드 이미지가 손상될 수 있습니다. 이는 향후 반복에서 처리할 수 있는 문제입니다.
확장 기능을 테스트할 준비가 되었습니다
Chrome 기반의 Brave를 사용하고 있는데, 브라우저마다 프로세스가 비슷합니다.
테스트하려면 선택한 브라우저에서 개발자 모드를 활성화해야 합니다.
확장 로드
변경되지 않은 이 확장 프로그램은 Chrome 네임스페이스에 의존하지 않으므로 Mozilla에서도 작동합니다.
용감함:
주소 표시줄에 brave://extensions/를 입력하세요.
개발자 모드를 활성화합니다.
폴더를 선택하여 확장 프로그램을 로드하세요.
Chrome 및 Edge: Brave와 유사한 단계를 따르세요.
(chrome://extensions/ 또는 edge://extensions/)
결론
모드 - 수정은 재미있습니다! 이 확장은 간단할 수 있지만 시작하는 데 필요한 기본 사항을 보여줍니다. Mozilla의 MDN에는 웹 확장(일반 웹 확장 및 브라우저별)에 대한 지식을 넓힐 수 있는 완벽한 리소스가 있습니다.
기억: 원치 않는 다운로드를 방지하려면 작업이 완료된 후 확장 프로그램을 끄거나 제거하세요.
아직 아니면…
과제: 입력(힌트: 클릭, 아이콘, 배경 스크립트)을 받고 사용자가 버튼을 클릭할 때만 프로세스 이미지 기능을 실행하는 방법을 알아보세요.
위 내용은 Chrome 확장 프로그램 구축: 빠른 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!