Может ли расширение firefox изменить DOM HTML-документа, а затем сохранить его как HTML?

Итак, я предполагаю, что у вас есть доступ к странице DOM. Что вам нужно сделать, в основном внесите изменения в dom, а затем получите весь код dom и сохраните его в виде файла. Вот как вы можете загрузить html-код страницы. Это создаст тег a, по которому пользователь должен щелкнуть, чтобы файл загрузился.

var a = document.createElement('a'), code = document.querySelectorAll('html')[0].innerHTML;
a.setAttribute('download', 'filename.html');
a.setAttribute('href', 'data:text/html,' + code);

Теперь вы можете вставить этот тег в любом месте DOM, и файл будет загружен, когда пользователь щелкнет по нему.

Примечание. Это своего рода хак, он вставляет весь html файла в тег a, теоретически он должен работать в любом up текущий браузер (кроме, неожиданно, IE). Есть более стабильные и менее хакерские способы сделать это, например, сохранить его в файле API файловой системы, а затем вместо этого загрузить этот файл.

Изменить. Строка document.querySelectorAll обращается к DOM страницы. Чтобы это работало, document должен быть доступен. Вы говорите, что модифицируете DOM, так что он уже должен быть там. Убедитесь, что вы добавляете код на страницу, а не код расширения. Этот код будет находиться в том же месте, что и ваш код модификации DOM, а не ваши страницы расширения, которые не могут получить доступ к DOM.

А что касается тега a, то он будет вставлен на страницу. Я пропустил шаги, так как предположил, что вы уже знаете, как манипулировать DOM, а также потому, что я не знаю, куда вы хотели бы добавить ссылку. И вы также можете пропустить действие пользователя по переходу по ссылке, но это хак и работает только в современных браузерах. Вы можете вставить тег a где-нибудь на исходной странице, где пользователь его не увидит, а затем вызвать функцию a.click() для имитации события клика по ссылке. Но это незаконный способ, и я лично использую его только в своих практических проектах для вызова прослушивателей событий кликов.

Я могу проверить это только на хроме, а не на FF, но попробуйте этот код, для этого вам даже не потребуется добавлять ссылку в DOM. Вам нужно добавить это рядом с кодом манипулирования DOM. Это сработает, если удача будет на вашей стороне :)

var a = document.createElement('a'), code = document.querySelectorAll('html')[0].innerHTML;
a.setAttribute('download', 'filename.html');
a.setAttribute('href', 'data:text/html,' + code);
a.click();

Нет простого способа сделать это только с помощью веб-API, по крайней мере, когда вам нужен результат, который не пропускает такие вещи, как тип документа или комментарии. Вы все еще можете сами написать сериализатор, который проходит через document.childNodes и сериализуется в соответствии с типом узла (Element.outerHTML, Comment.data и т. д.).

К счастью, вы пишете надстройку для Firefox, так что у вас есть доступ к гораздо большему (мощному) материалу.

Хотя все еще не на 100 % идеальный, nsIDocumentEncoder реализации будут давать довольно приличные результаты, которые должны отличаться не более чем некоторыми пробелами и явным объявлением кодировки (все остальное - ошибка). Вот пример того, как можно использовать этот компонент:

function serializeDocument(document) {
    const {
        classes: Cc,
        interfaces: Ci,
        utils: Cu
    } = Components;
    let encoder = Cc['@mozilla.org/layout/documentEncoder;1?type=text/html'].createInstance(Ci.nsIDocumentEncoder);
    encoder.init(document, 'text/html', Ci.nsIDocumentEncoder.OutputLFLineBreak | Ci.nsIDocumentEncoder.OutputRaw);
    encoder.setCharset("utf-8");
    return encoder.encodeToString();
}

Если вы пишете надстройку SDK, все становится сложнее, поскольку SDK абстрагирует некоторые важные вещи. Вам нужно пройти через chrome модуль, а также сами разберитесь с активным окном и вкладкой. Что-то вроде Services.wm.getMostRecentWindow("navigator:browser").content.document (Services.jsm) должно выполнять обманывать.

В оверлейных надстройках XUL content.document должно быть достаточно, чтобы получить документ текущей активной вкладки, а у вас уже есть Components доступ.

Тем не менее, вам нужно позволить пользователю выбрать место назначения файла, обычно через nsIFilePicker а затем на самом деле запишите файл, используя что-то вроде файлового потока. или полностью асинхронный API OS.File.

Похоже, я сам отвечу на свой вопрос благодаря кому-то из mozilla #extdev IRC.

Я был полностью сфальсифицирован "просмотреть источник". Когда я не видел своих изменений в окне, отображаемом «просмотр исходного кода», я предположил, что браузер не предоставит информацию.

Однако угадайте, что? Когда я "файл" ===>> "сохранить страницу как...", затем просмотрите содержимое страницы с помощью обычного текстового редактора... конечно же, он содержал изменения, сделанные моим расширением firefox! Сюрприз!

Браузер не имеет прямого доступа для записи к локальной файловой системе. Единственный доступ для чтения, который у него есть, — это явное указание URL-адреса file:// (см. примечание 1 ниже).

В вашем случае мы явно говорим о javascript, который может читать и записывать файлы cookie и локальное хранилище. Он также может отправлять данные обратно на сервер и извлекать их, например. используя АЯКС.

Материалы, которые вы помещаете в локальное хранилище/файлы cookie, фактически недоступны для других программ (например, почтовых клиентов).

Можно создавать очень длинные URL-адреса mailto: (см. примечание 2), но они обрабатывают только встроенный контент в электронной почте, и вы столкнетесь со всеми видами проблем с кодировкой, с которыми вы не готовы иметь дело.

Следовательно, я бы рекомендовал использовать сервер хранения через AJAX - и посмотреть на локальное хранилище, как только вы отсортируете / заработаете.

Примечание 1: это не совсем так. надежный, подписанный javascript имеет доступ к дополнительным функциям, которые могут включать прямой доступ к файлам.

Примечание 2: (ограничение зависит от браузера и почтового клиента - Lotus Notes довольно сильно обрезает содержимое)