javascriptgoogle-chromegoogle-chrome-extensionscreenshotvivaldi

captureVisibleTab fails on Chrome yet succeeds in Vivaldi


Simplest version of an extension to capture a screenshot as follows:

manifest.json

{
  "manifest_version": 2,
  "name": "Screenshot",
  "version": "20200507.1",
  "permissions":[
    "activeTab"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<body>
<button id="capture">Capture</button>
<script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById("capture").addEventListener('click', event => {
    chrome.tabs.captureVisibleTab(dataURI => {
        chrome.tabs.create({url: dataURI});
    });
    window.close();
});

Loaded as an unpacked extension into Vivaldi browser it works without complaint. Opens a tab with a screenshot of whichever tab is active. However, the same extension loaded into Chrome does absolutely nothing and yet throws no errors. What's missing here? The only difference I can find between this code and their sample code is that this is a popup rather than a background script.


Solution

  • captureVisibleTab() returns a Promise. As such window.close() potentially closes the window before the Promise has returned as pointed out by wOxxOm. Including revised code for manifest version 3 as manifest version 2 will be phased out in 2023.

    manifest.json

    {
        "manifest_version": 3,
        "name": "Screenshot",
        "version": "20220828.1",
        "permissions":[
            "activeTab"
        ],
        "action": {
            "default_popup": "popup.html"
        }
    }
    

    popup.html

    <!DOCTYPE html>
    <html>
    <body>
    <button id="capture">Capture</button>
    <script src="popup.js"></script>
    </body>
    </html>
    

    popup.js

    document.getElementById("capture").addEventListener('click', event => 
        chrome.tabs.captureVisibleTab().then(dataURI => 
            chrome.tabs.create({url: dataURI}).then(() => 
                window.close()
            )
        )
    );