google-chrome - 如何(破解和)将 Google Docs 绘图窗口最大化到全屏？

Question

互联网的 friend 们，

Google 文档的 Intert Drawing 工具有效，除了它浪费了所有 16:9 屏幕的一半这一事实，因为它打开了一个不可调整大小的强制方形窗口，削弱了所有用于景观和/或肖像格式的绘图!想想所有标准格式，如 A4、A3、16:9 显示器。

我一直在向 super 用户询问这个问题，但无济于事。似乎没有人知道答案!我正在求助于熟练的程序员来解决这个问题，并计划在此问题可用时立即打开值(value) 500 的赏金!这是 Google Docs 中被忽视的重要但被忽视的潜在部分。

使这项工作在 Google 自己的浏览器 Chrome 中工作的任何和所有解决方案都将是:

获得 500 悬赏分

接受为答案

Answer 1

我认为最简单的方法是制作一个 Chrome 扩展插件来解决这个问题。我举了一个你应该如何工作的例子，当然，这是一个基本的例子，但为了这个目的是可以的。查一下 on github (下载 zip，解压，转到 chrome 扩展和 =>“加载解压”，享受 :D)。对于更复杂的解决方案，您需要使用 google 文档 api。

代码示例

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]);
            });

        });
    };

如果你愿意，你也可以调整绘图 Canvas 的大小，但如果你这样做，它会产生一些错误(如@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%';

在行动