Google 크롬 확장 - CSS로 로컬 이미지를로드 할 수 없습니다.



Answers

Chrome은 CSS에서 확장 프로그램을 참조 할 수있는 기능을 제공하는 i18n을 지원 합니다. 내 이미지를 확장 프로그램의 이미지 폴더에 보관하므로 CSS의 참조 애셋은 다음과 같습니다.

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

콘텐츠 스크립트 기능을 사용하여 웹 사이트를 수정하는 간단한 Chrome 확장 프로그램이 있습니다. 보다 구체적으로, 상기 웹 사이트의 background-image .

어떤 이유로 든 로컬 이미지를 사용할 수없는 것처럼 보입니다. 확장자로 묶여 있더라도 말이죠.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

그게 가장 간단한 CSS이지만 ... 작동하지 않습니다. 브라우저가 이미지를로드하지 않습니다.




이 CSS 버전은 content_scripts CSS 파일 뿐 아니라 확장 환경 (앱 페이지, 팝업 페이지, 배경 페이지, 옵션 페이지) 에서만 작동 합니다.

.less 파일에서 나는 항상 처음에 변수를 설정합니다.

@extensionId : ~"__MSG_@@extension_id__";

그런 다음 이미지와 같은 확장 로컬 리소스를 참조하려면 다음을 사용하십시오.

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}






문서 에 따르면 확장 프로그램의 모든 파일에 다음과 같은 절대 URL로 액세스 할 수 있습니다.

chrome-extension : // <extensionID> / <pathToFile>

<extensionID> 는 각 확장에 대해 확장 시스템이 생성하는 고유 식별자입니다. URL chrome : // extensions 로 이동하여로드 된 모든 확장에 대한 ID를 볼 수 있습니다. <pathToFile> 은 확장 프로그램의 최상위 폴더 아래에있는 파일의 위치입니다. 상대 URL과 동일합니다.

...

CSS에서 배경 이미지 변경하기 :

#id {background-image : url ( " chrome-extension://<extensionID>/<pathToFile> "); }


자바 스크립트를 통해 CSS에서 배경 이미지 변경하기 :

document.getElementById ( ' id ') .style.backgroundImage = "url ( 'chrome-extension : // <extensionID> / <pathToFile> ')");


jQuery를 통해 CSS의 배경 이미지 변경하기 :

$ ( "# #id ") .css ( "background-image", "url ( 'chrome-extension : // <extensionID> / <pathToFile> ')");




Related