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

Question

我有一个完整的CSS属性的变量，我想用它来创建CSS文件并将其保存到应用程序文件目录中。我将如何在一个Chrome打包的应用程序中解决这个问题？

Answer 1

你不打算喜欢这个答案。你无法做到这一点，如果你想出了一个办法，那么Chrome团队将被视为一个安全漏洞。

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

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

您的JavaScript无法设置您的DOM元素的样式属性是否有原因？这应该给你灵活性，而不会碰到平台安全模型的边界。

编辑：刚看到your other question，这看起来很像这个。你在建立一个CSS编辑器吗？还是你想修改你自己的应用程序的CSS？我上面的答案假设了第二种情况。如果我误解了你的问题，然后澄清，我会尝试改进答案。

Answer 2

虽然@潮虫的答案是技术上纠正，你不能改变你的应用程序打包内容，在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 
    }); 
}); 

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