Question

我正在尝试使用后台脚本开发chrome扩展程序。我正在注入脚本，所有这些脚本都正确加载。我试图创建一个带有徽标和侧边栏div的侧边栏占据全高和300px的宽度。但边栏只是加载，而不是徽标。这是清单：

{
    "name": "My Ex-Tension",
    "manifest_version": 2,
    "description": "A content sharing extension for chrome browsers",
    "version": "1.0.0",
    "background": { "persistent": false, "scripts": [ "background.js" ] },
    "permissions": [ "tabs", "<all_urls>" ],
    "web_accessible_resources": [ "assets/css/style.css", "app/icon/*", "app/base/*" ]
}

所有脚本都是使用background.js注入的：

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    var scripts = [
        "pre-load.js", "assets/js/jquery.js", "assets/js/angular.js",
        "app/icon/icon.js", "app/base/base.js", "app/app.js"
    ];

    var injectOneByOne = function(scriptArr) {
        var script = scriptArr.splice(0, 1)[0];
        chrome.tabs.executeScript(tabId, {
            file: script
        }, injectOneByOne.bind(null, scriptArr));
    };

    injectOneByOne(scripts);
});

如您所见，我的app文件夹中有3个脚本。 app.js仍在引导应用程序。

(function() {
        var app = '<div class="extension-el"><div icon></div><div base></div></div>';
        var wrapper = '<div ng-non-bindable>' + app + '</div>';

        $('body').append(wrapper);
        angular.module('my-extension', ['columbus']);
        window.name = '';
        angular.bootstrap($('.extension-el')[0], ['my-extension']);
    }
})();

但是当我加载扩展时只有基本指令正在加载，图标不是。任何人都可以指出我做错了吗？

编辑：

icon.js（未加载）：

(function() {
    var columbus = angular.module('columbus', []);

    columbus.directive('icon', ['$sce', function(sce) {
        return {
            replace: true,
            templateUrl: sce.trustAsResourceUrl(chrome.extension.getURL('app/icon/icon.html')),
            link: function(scope, elem, attrs) {
                elem.css({
                    width: '50px', height: '50px', position: 'fixed',
                    top: '80px', right: '300px', backgroundColor: '#2B76FF', zIndex: 2147483647
                });
            }
        }
    }]);
})();

base.js（正确加载）：

(function() {
    var columbus = angular.module('columbus', []);

    columbus.directive('base', ['$sce', function(sce) {
        return {
            replace: true,
            templateUrl: sce.trustAsResourceUrl(chrome.extension.getURL('app/base/base.html')),
            link: function(scope, elem, attrs) {
                elem.css({
                    width: '300px', height: '100%', position: 'fixed',
                    top: '0px', right: '0px', backgroundColor: '#2B76FF', zIndex: 2147483647
                });
            }
        }
    }]);
})();

指令未在chrome扩展中添加

0 个答案: