Доступ к изображениям и видеоданным из расширения браузера (по сравнению с CORS)

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

// background.js
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = document.createElement('img');
image.onload = function() {
    context.drawImage(image, 0, 0);
    // Demo: Show image
    window.open(canvas.toDataURL('image/png'));
};
image.src = 'https://stackoverflow.com/favicon.ico';

Вот минимальный файл манифеста для этой конкретной демонстрации:

{
    "name": "Get image data",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "https://stackoverflow.com/favicon.ico",
        "http://cdn.sstatic.net/stackoverflow/img/favicon.ico"
    ]
}

Второе разрешение необходимо, потому что https://stackoverflow.com/favicon.ico перенаправляет на http://cdn.sstatic.net/stackoverflow/img/favicon.ico.

Обратите внимание, что этот код не работает в скриптах содержимого, поскольку DOM является общим, и Chrome не может предлагать неограниченный исходный доступ только к сценариям содержимого.

В зависимости от того, что вы действительно хотите, вы также можете просто попытаться получить данные изображения в необработанном виде, используя XMLHttpRequest, и обработать их любым способом. Этот метод также работает в сценариях контента, и их преимущество в том, что он более эффективен, а также сохраняет байты изображения (при методе холста изображение анализируется и обрабатывается браузером до того, как оно будет преобразовано в URL-адрес данных) .

var x = new XMLHttpRequest();
x.responseType = 'blob';
x.open('get', 'http://stackoverflow.com');
x.onload = function() {
    var fileReader = new FileReader();
    fileReader.onloadend = function() {
        // fileReader.result is a data-URL (string)
        window.open(fileReader.result);
    };
    // x.response is a Blob object
    fileReader.readAsDataURL(x.response);
};
x.send();

Чтобы решить эту проблему, используйте функцию Chrome desktopCapture. Обратите внимание, что это означает, что пользователь должен взаимодействовать со всплывающим окном, запрашивающим разрешение каждый раз, когда вы хотите записать (которое можно оставить на долгое время, но я думаю, что это не очень эффективно с точки зрения ресурсов).

Я помещаю код здесь, если это поможет.

background.js

var pending_request_id = null;

var video = document.createElement('video');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var theStream = null;

var CAPTURING = false;

/*
 * Setting up recording when the user clicks the extension icon
 */
chrome.browserAction.onClicked.addListener(function() {
  if (CAPTURING) {
    console.log('stop capturing');
    theStream.getVideoTracks()[0].stop();
    chrome.browserAction.setIcon({path: "icons/icon128.png"});
    CAPTURING = false;
  } else {
    pending_request_id = chrome.desktopCapture.chooseDesktopMedia(
      ["screen","tab"],
      onAccessApproved
    );
  }
});

function onAccessApproved(id) {
  console.log('onAccessApproved: ' +id)
  if (!id) {
    console.log("Access rejected.");
    return;
  }
  navigator.webkitGetUserMedia({
    audio:false,
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: id,
        maxWidth: 4000,
        maxHeight: 4000
      }
    }
  }, gotStream, getUserMediaError);
}

function getUserMediaError(error) {
  console.log("getUserMedia() failed:", error);
}

function gotStream(stream) {
  console.log("gotStream", stream);
  theStream = stream;
  video.src = URL.createObjectURL(theStream);
  video.play();
}

video.addEventListener('loadedmetadata',function(){
  console.log('loadedmetadata')
  chrome.browserAction.setIcon({path: "icons/icon128_recording.png"});
  CAPTURING = true;
}, false);


/*
 * You can trigger this when you want; I am doing it on every mouse move over the video (triggered by the content_script.js)
 */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (!CAPTURING) {
      console.log('User needs to activate the recording of the screen')
      return false; // no response
    }

    ctx.drawImage(video, 0, 0);
    var url = canvas.toDataURL('image/png');
    window.open(url);
  }
);