CSS를 사용하여 Chrome 확장 프로그램에서 로컬 이미지를 어떻게 로드할 수 있나요?

CSS를 사용하여 Chrome 확장 프로그램에서 로컬 이미지 로드

Chrome 확장 프로그램에서 웹사이트 요소를 수정하려면 콘텐츠 스크립트 기능을 통해 CSS를 사용하는 경우가 많습니다. 그러나 CSS로 로컬 이미지를 로드하는 것은 어려울 수 있습니다. 이 문서에서는 구체적인 예와 해결 방법을 통해 이 문제를 다룹니다.

문제: 로컬 이미지 로드 실패

CSS를 사용하여 배경 이미지를 설정하려고 할 때 문제가 발생하지만 로컬 이미지가 표시되지 않습니다. . 이는 이미지가 확장 프로그램 내에 압축되어 있음에도 불구하고 발생합니다.

해결책: Chrome 확장 프로그램 i18n 지원

Chrome의 i18n 지원은 CSS에서 확장 프로그램의 로컬 파일을 참조하는 방법을 제공합니다. 이를 수행하려면:

1. 이미지를 폴더에 보관: 확장 프로그램 내의 전용 폴더에 이미지를 저장하세요.
2. chrome-extension 프로토콜을 사용하세요. : 다음을 사용하여 CSS의 이미지를 참조하세요. 형식:

background-image: url('chrome-extension://__MSG_@@extension_id__/images/main.png');

1. 매니페스트에 포함: 사용하려는 이미지가 Manifest.json 파일의 web_accessible_resources 섹션에 나열되어 있는지 확인하세요.

이 방법을 사용하면 Chrome은 배경 이미지 확장 프로그램 내에서 로컬 이미지를 올바르게 로드할 수 있습니다. 다른 CSS 속성.

위 내용은 CSS를 사용하여 Chrome 확장 프로그램에서 로컬 이미지를 어떻게 로드할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!