Question

我目前正在将我的Google Chrome扩展程序移植到firefox。我的css文件有链接到css使用的某些图片。但是，那些没有加载到firefox插件中。如何使我的css文件具有正确的资产路径？

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

所以我现在就在这一点

我的chrome.manifest文件为

 skin   firefox     fancybox     chrome/skin

我的文件结构如下

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

有了这个，我的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://网址来引用您的扩展程序中的内容。它们通常看起来像：

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

或者如果您为扩展程序定义了外观：

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

您可以定义chrome://文件chrome.manifest文件general info，specific specification）中的含义。

以下是一些CSS代码示例，它们从Firefox版本中提取图像。它们引用用户当前定义的皮肤中包含的图像。

第一个定义具有toolbar-close-button类的元素的图像。

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

这定义了用于悸动者（忙碌指示符）的图像，可以通过添加或删除busy=true属性来打开任何图像：

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;
}

为了完整性，这里有一个JavaScript可以打开和关闭throbber（我做了一些快速更改，将其置于更通用的格式，这些更改仍需要测试）：

var Throbber = {
   /**
    * Original source/idea from the Firefox release.
    * Modifications copyright 2014 by Makyen.
    * Released under the MPL 2.0. http://mozilla.org/MPL/2.0/.
    **/

    /**
     * Tobggle throbber.
     * @param  id
     *         The DOM ID of the throbber element
     */
    toggleThrobber : function(id) {
        let throbberEl = document.getElementById(id);
        if(typeof throbberEl == "object") {
            if (throbberEl.hasAttribute("busy") ) {
                // Turn the throbber off.
                Throbber.throbberOff(id);
            } else {
                // Turn the throbber on.
                Throbber.throbberOn(id);
            }
        }
    },

    /**
     * Turn throbber off.
     * @param  id
     *         The DOM ID of the throbber element
     */
    throbberOff : function(id) {
        let throbberEl = document.getElementById(id);
        if(typeof throbberEl === "object") {
            if (throbberEl.hasAttribute("busy") ) {
                // Turn the throbber off.
                throbberEl.removeAttribute("busy");
            }
        }
    },

    /**
     * Turn throbber on.
     * @param  id
     *         The DOM ID of the throbber element
     */
    throbberOn : function(id) {
        let throbberEl = document.getElementById(id);
        if(typeof throbberEl == "object") {
            // Turn the throbber on.
            throbberEl.setAttribute("busy", "true");
        }
    }
}

示例最小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＆amp;＆amp;！{，则除{：1}}之外的目录名称没有什么特别之处{3}}＆amp;＆amp;！bootstrapped））：

./chrome/icons/default

firefox插件：如何在css中获取url链接

1 个答案: