firefox addon : CSS에서 URL 링크를 얻는 방법

Question

현재 Google 크롬 확장 프로그램을 파이어 폭스로 이식하고 있습니다. 내 CSS 파일에는 CSS에서 사용하는 특정 그림에 대한 링크가 있습니다. 그러나, 그 firefox addon에로드되지 않습니다. 어떻게하면 내 CSS 파일이 올바른 자산에 대한 올바른 경로를 가지게 할 수 있습니까?

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    display: none; 
    z-index: 8; 
    background: url('popup/source/overlay.png'); 
} 

그래서 나는 또한 다음

./chrome/ 
./chrome/skin/icon/{all the .png/.gif} 
./chrome.manifest 
./data/ 
./lib/ 
./package.json 
./test/ 

처럼 내 파일 구조를 가지고

skin firefox  fancybox  chrome/skin 

이 시점 지금

내의 chrome.manifest 파일이에서 오전 그, 내 CSS 파일은 여전히 ​​다음 코드와 함께로드되지 않습니다.

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    display: none; 
    z-index: 8; 
    background: url('chrome://firefox/skin/icon/overlay.png'); 
} 

내가 뭘 잘못하고 있니?

Answer 1

일반적으로 내선 번호 내의 내용을 참조하려면 chrome:// URL을 사용합니다. 그들은 일반적으로 보일 것 같은 :

`chrome://myExtensionName/content/...` 

또는 확장을 위해 피부를 정의한 경우 :

`chrome://myExtensionName/skin/...` 

당신은 chrome:// URL이 당신의 chrome.manifest 파일 (general info, specific specification)에 무엇을 의미하는지 정의합니다.

다음은 Firefox 릴리스 내에서 이미지를 가져 오는 CSS 코드의 몇 가지 예입니다. 사용자가 현재 정의한 스킨에 포함 된 이미지를 참조합니다.

첫 번째 이미지는 toolbar-close-button 클래스의 이미지를 정의합니다.

CSS :

/** 
* Original source/idea from the Firefox release. 
* Modifications copyright 2014 by Makyen. 
* Released under the MPL 2.0. http://mozilla.org/MPL/2.0/. 
**/ 
/* ::::: throbber ::::: */ 
.c4w-throbber[busy="true"] { 
    background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; 
    width: 16px; 
    height: 16px; 
    margin: 0 3px; 
} 

.c4w-throbber { 
    background: url("chrome://global/skin/icons/notloading_16.png") center no-repeat; 
    width: 16px; 
    height: 16px; 
    margin: 0 3px; 
} 

완전성

.toolbar-close-button { 
    list-style-image: url("chrome://global/skin/icons/Close.gif"); 
} 

이

는 busy=true 속성을 추가하거나 제거하여 온 오프 할 수있는 색인기 (비지 표시)에 사용되는 이미지를 정의 여기에 throbber를 켜고 끄는 JavaScript가 있습니다. (좀 더 일반적인 형식으로 바꾸려면 몇 가지 빠른 변경을했는데 변경 사항은 아직 테스트가 필요합니다)

,278,706,773,210

예 최소한의 chrome.manifest 파일

content  myExtensionName          chrome/content/ 

예 디렉토리 구조 :

./chrome 
./chrome/content 

더 복잡한의 chrome.manifest 예 :

content  myExtensionName          chrome/content/ 
locale  myExtensionName   en-US      chrome/locale/en-US/ 
skin   myExtensionName   classic/1.0    chrome/skin/ 
content  myExtensionNameModules        modules/ 

콘텐츠 및 JavaScript 모듈의 분리 단지 조직을위한 것이며 필수는 아닙니다.

디렉토리 구조의 예 (제외 디렉토리 이름에 대한 특별한 아무것도! 확장이 기본이 아닌 창 아이콘을 사용하고 (unpacked & & 경우 ./chrome/icons/defaultbootstrapped & & Add-on SDK)!) :

./chrome 
./chrome/content 
./chrome/icons 
./chrome/icons/default 
./chrome/locale 
./chrome/locale/en-US 
./chrome/skin 
./defaults 
./defaults/preferences 
./modules