javascript - tamaño - la isla de plastico documental

Pase una gran mancha o archivo desde la extensión de cromo

Question

Intento escribir una extensión en el caché de algunos archivos multimedia grandes que se usan en mi sitio web para que pueda almacenar en caché localmente esos archivos cuando se instala la extensión:

1. Paso las URL a través de chrome.runtime.sendMessage a la extensión (funciona)
2. buscar el archivo multimedia a través de XMLHttpRequest en la página de fondo (trabajos)
3. almacena el archivo usando FileSystem API (funciona)
4. obtener un objeto File y convertirlo a una URL usando URL.createObjectURL (works)
5. devolver la URL a la página web (error)

Lamentablemente, la URL no se puede usar en la página web. Obtuve el siguiente error:

No se permite cargar el recurso local: blob: chrome-extension% 3A // hlcoamoijhlmhjjxxxbl / e66a4ebc-1787-47e9-aaaa-f4236b710bda

¿Cuál es la mejor manera de pasar un objeto de archivo grande desde una extensión a la página web?

Answer 1

Dos posibilidades que puedo pensar

1) Emplear externally_connectable conectable.

Este método se describe en los documentos aquí .

La esencia de esto: puedes declarar que tal y tal página web puede pasar mensajes a tu extensión, y luego chrome.runtime.connect y chrome.runtime.sendMessage serán expuestos a la página web.

Entonces, es probable que pueda hacer que la página web abra un puerto a su extensión y la use para datos. Tenga en cuenta que solo la página web puede iniciar la conexión.

2) Use window.PostMessage .

El método se menciona en los documentos (tenga en cuenta la mención obsoleta de window.webkitPostMessage ) y se describe con más detalle aquí .

Puede, por lo que puedo decir de la documentación del método (de varios lugares), pasar cualquier objeto con él, incluidos blobs.

Answer 2

Ya casi estás ahí.

Después de crear el blob: -URL en la página de fondo y pasándolo al script de contenido, no lo reenvíe a la página web. En su lugar, recupere el blob usando XMLHttpRequest, cree un nuevo blob: -URL, luego envíelo a la página web.

// assuming that you''ve got a valid blob:chrome-extension-URL...
var blobchromeextensionurlhere = ''blob:chrome-extension....'';
var x = new XMLHttpRequest();
x.open(''GET'', blobchromeextensionurlhere);
x.responseType = ''blob'';
x.onload = function() {
    var url = URL.createObjectURL(x.response);
    // Example: blob:http%3A//example.com/17e9d36c-f5cd-48e6-b6b9-589890de1d23
    // Now pass url to the page, e.g. using postMessage
};
x.send();

Si su configuración actual no usa scripts de contenido, pero por ejemplo, la API webRequest para redirigir la solicitud al resultado en caché, entonces otra opción es usar URI de datos (un archivo o Blob se puede convertir a un URI de datos usando <FileReader>.readAsDataURL . Los URI de datos no se pueden leer utilizando XMLHttpRequest, pero esto será posible en futuras versiones de Chrome ( http://crbug.com/308768 ).