1

I have a variable full of css attributes that I would like to use to create a CSS file and save it to the apps file directory. How would I go about this in a chrome packaged app?

4

2 回答 2

5

你不会喜欢这个答案的。你不能这样做，如果你想出了办法做到这一点，这将被视为 Chrome 团队将关闭的安全漏洞。

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

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

您的 JavaScript 无法设置 DOM 元素的样式属性是否有原因？这应该为您提供所需的灵活性，而不会违反平台安全模型的边界。

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

于 2013-04-18T21:59:57.830 回答
3

虽然@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
    });
});

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

于 2013-06-28T17:06:10.730 回答