Надим

$.ajax({
  url: 'send.php',
  type: 'post',
  data: {},
  success: function(result) {
    location.href = 'https://qna.habr.com';
  }
});

Неожиданно много человек подписалось) Распишу результаты экспериментов. Код предложенный Владлен Хеллсайт у меня не сработал, хрен знает в чем дело, но глубоко копать не стал, так как мне на глаза попался вот такой jQuery-плагин как раз добавляющий нужный функционал. Для использования подключаем jq-ajax-progress.js у себя на сайте, а дальше используем его функционал следующим образом:

jQuery.ajax({
	type: 'POST',
	url: '/',
	data: { get : 'table' },
	cache: false,
	success: function(result) {
		console.log(result);
	},
	error: function(result) {
		console.log('Ошибка!');
	},
	progress: function(e) {
		procent = (e.loaded * 100 / e.total).toFixed();
		console.log(procent); // Процент приема файла
	}
});

Думаю всем понятно, что в e.loaded лежит кол-во загруженных байт, а e.total размер файла.

Если вдруг у вас не работает, гляньте значение e.total - хоть это и размер файла, но лично у меня он почему был равен нулю, в итоге расчеты процента загрузки были неверными, даже пробовал в php-скрипте (что отдает файл) прописать заголовок header с размером файла в байтах, но не помогло. Пришлось делать обходной манер: сначала отдельным запросом запрашивать с сервера размер файла, а потом загружать сам файл и уже зная его размер вычислять процент, по мере загрузки.

Удалось реализовать ленивую отрисовку высоты textarea - элементы идут в обработку по мере прокрутки страницы и входа в область видимости (с запасом, сверху на 100% и снизу на 300%). Решение следующее:

observer = new IntersectionObserver(onView, { threshold: [0], rootMargin: '100% 0px 300% 0px' });

textarea = document.querySelectorAll('textarea');

for (l = 0; l < tarrr.length; l++) {
	observer.observe(textarea[l]);
}

function onView(massiv) {
    
    for (j = 0; j < massiv.length; j++) {
        
        if (massiv[j].isIntersecting === true) {
            
            autosize(massiv[j].target);
            
        }
        
    }
    
}

Спасибо Алексей Тен за наводку =)

Все, я разобрался. Оказалось, что для передачи сообщения в content-скрипт нужно использовать другой метод:

chrome.tabs.query({}, function(tabs) {
    for (var i=0; i<tabs.length; i++) {
        chrome.tabs.sendMessage(tabs[i].id, "наше сообщение");
    }
});

Прием сообщения через chrome.extension.onMessage.addListener() корректно работает.

Напрямую получить доступ к содержимому чужого фрейма нельзя, но если вы будете подгружать фрейм со своего родного домена, то тогда без проблем. Как вариант, вы можете написать php-прокси который загружал и отдавал бы фреймы с вашего домена.

Нашел решение. Оказывается, существует событие paste, которое происходит, когда мы вставляем что-то в блок. Соответственно, можно повесить обработчик на него, отменить действие по умолчанию, а затем перехваченный текст обработать как душе угодно:

document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
});

Я нащупал два решения для этой проблемы.

Первый способ позволяет вставить произвольный Blob в поле <input type="file"> и для обработчиков на целевом сайте все будет выглядеть, будто в поле реально присутствуют файлы, хотя это конечно будет не так.

Итак, функция для вставки:

// Пример функции для вставки Blob в поле input:

function pasteBlobToInput(blob, input) {
	
	// Конвертируем Blob в File:
	var file = new File([blob], blob.name);
	
	// Создаем коллекцию файлов для последующий вставки:
	var file_list = {0: file, length: 1, '__proto__': input['files']['__proto__']};
	
	// Сохраняем прототип поля:
	var proto = input['__proto__'];
	
	// Подменяем прототип для разблокировки св-ства files на запись:
	input['__proto__'] = document.createElement('div')['__proto__'];
	
	// Записываем коллекцию файлов:
	input['files'] = file_list;
	
	// Возвращаем прототип на место:
	input['__proto__'] = proto;
	
	// Выводим уведомление:
	console.log('Коллекция успешно вставлена:');
	console.dir(file_list);
	
	// Заставляем сработать обработчики на поле выбра файлов:
	input.dispatchEvent(new InputEvent('change', { bubbles: true }));
	
}

Первым параметром функции передаем Blob, а вторым элемент input куда нужно его вставить. Обратите внимание, что Blob должен иметь имя в свойстве name. Если у вас Blob без названия, то добавьте его. К сожалению, коллекция файлов способом выше создается неполноценная, но даже этой неполноценной коллекции достаточно чтобы обмануть обработчики. Я писал это решение для WhatsApp-бота и там у меня реально все работает)

Второй вариант позволяет получать полноценные коллекции файлов и далее их вставлять и использовать их где угодно. Для начала нам нужно подключить библиотеку localforage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.js"></script>

Далее, мы можем выбрать файлы для коллекции и сохранить их в памяти браузера:

var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', 'multiple');
input.addEventListener('change', async function() {
	var files = await localforage.setItem('files', this.files);
	console.log('Коллекция файлов успешно сохранена:');
	console.dir(files);
});
input.click();

Сохраненную коллекцию мы позднее сможем использовать даже после перезагрузки страницы или закрытия / открытия браузера. Для извлечения сохраненной коллекции достаточно выполнить:

var files = await localforage.getItem('files');
console.log('Коллекция файлов успешно извлечена:');
console.dir(files);

Эта коллекция полноценная и мы легко можем ее прицепить в любое поле:

var files = await localforage.getItem('files');
document.querySelector('input[type="file"]').files = files;

При этом файлы в поле будут выглядеть точно так же, будто выбраны с компа, никаких отличий.