Question

我有一个充满css属性的变量，我想用它来创建一个CSS文件并将其保存到apps文件目录中。我将如何在Chrome打包应用程序中进行此操作？

Answer 1

你不会喜欢这个答案。你无法做到这一点，如果你找到了办法，那么Chrome团队就会将其视为一个安全漏洞。

打包应用程序的部分设计目标是使整个应用程序在上传到Web商店时可以进行静态分析。这意味着当用户决定是否从商店安装应用程序时，该决定是基于代码实际执行的操作（它包含这些脚本，此CSS和这些图像，并且它要求这些权限）而不是而不是你是否信任开发者或网站。 www.example.com今天可能看起来值得信赖，但明天它可能会被出售给新的所有者，或者被妥协。所以决定“我相信example.com吗？”很难。打包应用程序使决策更容易;在大多数情况下，您所信任的“事物”就在您面前，在您刚刚下载的CRX中。

如果您了解此设计目标，那么您就会理解为什么打包应用程序的设计不允许自我修改代码（这是您想要做的通用术语）。如果您的代码可以生成代码，那么静态分析就很难确定应用程序可以做什么（有意或者通过错误）。同样，内容安全策略对于打包的应用程序是相当严格的，并且不能设置为限制较少的策略，这就是eval（）在脚本中不起作用的原因。

您的JavaScript无法设置DOM元素的样式属性吗？这应该为您提供所需的灵活性，而不会遇到平台安全模型的界限。

编辑：刚看到your other question，这看起来与此非常相似。你在构建一个CSS编辑器吗？或者您是否正在尝试修改自己的应用程序的CSS？我上面的答案假设第二种情况。如果我误解了你的问题，那么请澄清，我会尝试改进答案。

Answer 2

虽然@ sowbug的回答技术上正确，因为您无法修改应用打包的内容，但OP仍然可以达到基本相同的效果。

保存css：

var someCSSCode = 'a { color:#de0 }';
webkitRequestFileSystem(PERSISTENT, 1024*1024, function(fileSystem) {
    fileSystem.root.getFile('my.css', {create:true}, function(file) {
        file.createWriter(function(writer) {
            this.onwriteend = function() {
                this.onwriteend = null;
                this.truncate(this.position); //in case a longer file was already here
            };
            writer.write(new Blob([someCSSCode], {type:'text/plain'}));
        });
    });
});

加载css：

webkitRequestFileSystem(PERSISTENT, 0, function(fileSystem) {
    fileSystem.root.getFile('my.css', {}, function(file) {
        var elem = document.createElement('link');
        elem.rel  = 'stylesheet';
        elem.type = 'text/css';
        elem.href = file.toURL();
        document.head.appendChild(elem); //or document.body
    });
});

请注意，此代码不包含任何错误处理。

使用chrome打包应用程序将文件保存到文件系统

2 个答案: