用鉻擴展名創建/下載.html文件

我正在構建我的第一個Chrome擴展。到目前爲止，我的代碼需要一個網頁元素並創建HTML標記（在JavaScript中以字符串加載）。用鉻擴展名創建/下載.html文件

我的擴展的按鈕導致

$(".column1").prepend('<div class="actions" style="margin-bottom: 1rem;"><button id="edmMaker">Make an EDM!</a></div>') 
$('#edmMaker').click(function(){ 
    var html = "<body><section><h1>Here is some HTML text</h1></section><div><p>Here's some more</p></div></body>" 
    // create a .html file and download it to the user's desktop 
});

在Node.js的，我只想寫一個.html文件到本地磁盤，但我不能完全弄清楚如何工作的Chrome擴展的世界。

我該怎麼做？

子問題：有沒有什麼辦法來標記輸出的HTML？我輸出的實際代碼是一個HTML電子郵件模板，而Javascript只會讓我加載一個沒有換行符和製表符的字符串。

來源

2015-02-07 Jascination

這裏是我寫了一個方法，它利用HTML5's download attribute下載文件：

var saveHTML = function(fileName, html){ 
    // Escape HTML 

    var el = document.createElement("dummy"); 
    el.innerText = html; 

    var escapedHTML = el.innerHTML; 

    // Use dummy <a /> tag to save 

    var link = document.createElement("a"); 
    link.download = fileName; 
    link.href = "data:text/plain,"+escapedHTML; 

    link.click(); // trigger click/download 
}; 

saveHTML("myHTML.html", "<html></html>");

檢查它在行動here。

如果你不想保存文件，你可以使用storage。

編輯：

正如下面@Xan指出的，chrome.downloads API存在以及其可以是一些使用的，特別是chrome.downloads.download()方法。

至於有標籤/空間/換行符多串，有3種方式：

1）手動，使用換行符（\n）和標籤（\t）

"<body>\n\t<section>\n\t\t<h1>Here is some HTML text</h1>\n\t</section>\n\t<div>\n\t\t<p>Here's some more</p>\n\t</div>\n</body>"

其中出現：

<body> 
    <section> 
     <h1>Here is some HTML text</h1> 
    </section> 
    <div> 
     <p>Here's some more</p> 
    </div> 
</body>

2）使用JavaScript的多行字符串的支持，這需要你在一行的末尾插入一個反斜槓：

var html = "<body>\ 
    <section>\ 
     <h1>Here is some HTML text</h1>\ 
    </section>\ 
    <div>\ 
     <p>Here's some more</p>\ 
    </div>\ 
</body>";

3）Array.join：

var html = [ 
    "<body>", 
    " <section>", 
    "  <h1>Here is some HTML text</h1>", 
    " </section>", 
    " <div>", 
    "  <p>Here's some more</p>", 
    " </div>", 
    "</body>" 
].join("\n");

來源

2015-02-07 05:37:53 mattsven

\ *。咳咳\ * ['chrome.downloads']（https://developer.chrome.com/extensions/downloads）\ *咳嗽\ * – Xan 2015-02-07 15:35:43

@Xan *編輯狂怒* – mattsven 2015-02-07 15:56:28

@Xan其實，它看起來像'chrome.downloads。下載「的功能與我上面的功能非常相似。無論如何我都會收錄它。我也不能告訴它它會接受一個數據URI（可能） – mattsven 2015-02-07 15:59:27

用鉻擴展名創建/下載.html文件

回答

相關問題