使用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 
    }); 
}); 

請注意，此代碼不包含任何錯誤處理。