Question

我正在构建我的第一个Chrome扩展程序。到目前为止，我的代码采用了网页的元素并创建了HTML标记（在Javascript中以字符串形式加载）。

我的分机通过按钮

$(".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只允许我加载一个没有换行符和标签的字符串。

Answer 1

以下是我编写的利用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");

使用chrome扩展名创建/下载.html文件

1 个答案: