Я думаю, что самый простой способ - создать плагин расширения Chrome для решения этой проблемы.Я сделал пример того, как вы должны работать, конечно, в зачаточном состоянии, но для цели это нормально.Проверьте это на github (Загрузите zip, распакуйте, перейдите в chrome extensions и => «Загрузить распакованный», наслаждайтесь: D).Для более сложных решений вам нужно использовать API документа Google.
Пример кода
document.addEventListener('DOMContentLoaded', function () {
let fullScreenBtn = document.getElementById('fullScreenBtn');
fullScreenBtn.onclick = function (element) {
function modifyDOM() {
function setToFullScreen(iteration, drawer) {
drawer.style.left = '0';
drawer.style.top = '0';
drawer.style.borderRadius = '0';
drawer.style.width = '100%';
drawer.style.height = '100vh';
document.getElementsByClassName('modal-dialog-content')[iteration].style.height = '100vh';
var iframe = drawer.getElementsByTagName("IFRAME")[0]
iframe.width = '100%';
iframe.height = '100%';
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.borderLeft = 'solid 2px red';
canvas.style.borderRight = 'solid 2px red';
}
var drawers = document.getElementsByClassName('modal-dialog');
let drawerCount = drawers.length;
if (drawerCount) {
for (let i = 0; i < drawerCount; i++) {
setToFullScreen(i, drawers[i]);
}
} else {
alert('First off all open the drawer!')
}
return document.body.innerHTML;
}
chrome.tabs.query({ active: true }, function (tabs) {
var tab = tabs[0];
chrome.tabs.executeScript(tab.id, {
code: '(' + modifyDOM + ')();'
}, (results) => {
// console.log(results[0]);
});
});
};
Если вы хотите, вы также можете изменить размер холста, но еслиВы делаете, это делает некоторые ошибки (как сказал @Anthony Cregan) ... Вы можете сделать с изменением кода в этом разделе
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.left = '0';
//canvas.style.position = ''; // works but in resizing elemnts bug
canvas.style.minWidth = '100%';
В действии
