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

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

어떤 이유로 든 확장 프로그램에 포함되어 있어도 로컬 이미지를 사용할 수없는 것 같습니다.

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

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

이미지 URL은 다음과 같아야합니다. chrome-extension://<EXTENSION_ID>/image.jpg

자바 스크립트를 통해 CSS를 대체하는 것이 좋습니다. 에서 문서 :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

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

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

이 질문에 대한 오래된 답변과 해결책이 많이 있습니다.

2015 년 8 월 (Chrome 45 및 Manifest 버전 2 사용) 현재 Chrome 확장 프로그램 내에서 로컬 이미지에 연결하기위한 '모범 사례' 는 다음 접근 방식입니다.

1) 확장 프로그램의 이미지 폴더에 대한 상대 경로 를 사용하여 CSS의 자산에 연결 합니다.

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) 확장의 manifest.json 파일 의 web_accessible_resources 섹션에 개별 자산을 추가 합니다.

"web_accessible_resources": [
  "images/file.png"
]

참고 :이 방법은 일부 파일에 적합하지만 많은 파일로 확장되지 않습니다.

대신, 더 나은 방법은 일치 패턴 에 대한 Chrome의 지원을 활용 하여 주어진 디렉토리 내의 모든 파일을 허용 목록에 추가하는 것입니다.

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

이 접근 방식을 사용하면 기본적으로 지원되는 방법을 사용하여 Chrome 확장 프로그램의 CSS 파일에서 이미지를 빠르고 쉽게 사용할 수 있습니다.

한 가지 옵션은 이미지를 base64 로 변환하는 것입니다.

그런 다음 데이터를 다음과 같이 CSS에 바로 넣으십시오.

body { background-image: url(data:image/png;base64,iVB...); }

이 방법은 웹 페이지를 정기적으로 개발할 때 사용하고 싶지 않은 접근 방식 이 아닐 수 있지만 Chrome 확장 프로그램을 구축하는 데 따른 제약으로 인해 훌륭한 옵션입니다.

내 솔루션.

Menifest v2 web_accessible_resources에서는 파일 에 추가 한 다음 chrome-extension://__MSG_@@extension_id__/images/pattern.pngcss 파일에서 URL 로 사용해야 합니다.

CSS :

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

Manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

추신 당신의 manifest.json은 이것과 다를 수 있습니다.

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

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

@extensionId : ~"__MSG_@@extension_id__";

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

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

한 가지 언급 할 사항은 web_accessible_resources에서 와일드 카드를 사용할 수 있다는 것입니다. 그래서 대신

"images / pattern.png"

당신이 사용할 수있는

"이미지 / *"

명확히하기 위해 문서 에 따르면 확장의 모든 파일은 다음과 같은 절대 URL로도 액세스 할 수 있습니다.

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

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

...

CSS에서 배경 이미지 변경 :

#id{배경 이미지 : url ( " chrome-extension://<extensionID>/<pathToFile>"); }

JavaScript를 통해 CSS의 배경 이미지 변경 :

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

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

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