OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Error thrown when trying to open file for Chrome Extension - User gesture required

  • Thread starter Thread starter Sam
  • Start date Start date
S

Sam

Guest
I'm developing a Chrome extension using manifest V3. The extension allows the user to download a file onto their default directory. The user is then presented with a button to click on to open the downloaded file. However, when the button is clicked I get the following error Uncaught (in promise) Error: User gesture required. I have an event listener bound to the button click within content_script.js and I send a chrome.runtime.sendMessage({ action: "open-clicked" }); to the service_worker.js which has the logic for opening the file: chrome.downloads.open(result.lastDownloadId);.

Why is the user gesture error being thrown when the user has indeed clicked the button to open it?

content_script.js

Code:
let actionButtons = document.querySelectorAll('[data-myapp-chrome]');

actionButtons.forEach(function(button){
    button.addEventListener('click', function(){
        let action = this.getAttribute('data-myapp-chrome');
        if(action === 'download-button') {
            chrome.runtime.sendMessage({
                action: "download-clicked"
            });
        } else if(action === 'open-button') {
            chrome.runtime.sendMessage({
                action: "open-clicked"
            });
        }
    });
});

service_worker.js

Code:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.action === "download-clicked") {
        downloadClickedAction();
    } else if(request.action === "open-clicked") {
        openClickedAction();
    }
});

function openClickedAction() {
    // open the downloaded file
    try {
        chrome.storage.sync.get(["lastDownloadId"], function (result) {
            chrome.downloads.search({id: result.lastDownloadId}, function(searchResult) {
                // discontinue if file does not exist
                if (!searchResult || searchResult.length < 1 || !searchResult[0].exists) {
                    throw EXTENSION_STATUS_OPEN_FAILED;
                }
                chrome.downloads.open(result.lastDownloadId);
                catchApiError(EXTENSION_STATUS_OPEN_FAILED);
            });
        });
    } catch(e) {
        sendMessage({status: EXTENSION_STATUS_OPEN_FAILED});
    }
}

manifest.json

Code:
{
  "name": "MyApp",
  "version": "1.3.0",
  "description": "My App description",
  "permissions": [
    "downloads",
    "downloads.open",
    "notifications",
    "storage"
  ],
  "host_permissions": [
    "file://*"
  ],
  "background": {
    "service_worker": "service_worker.js"
  },
  "content_scripts": [
    {
      "matches": ["http://localhost/*",
                  "https://localhost/*"],
      "js": ["content_script.js"]
    }
  ],
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "manifest_version": 3
}

<p>I'm developing a Chrome extension using manifest V3. The extension allows the user to download a file onto their default directory. The user is then presented with a button to click on to open the downloaded file. However, when the button is clicked I get the following error <code>Uncaught (in promise) Error: User gesture required</code>. I have an event listener bound to the button click within <code>content_script.js</code> and I send a <code>chrome.runtime.sendMessage({ action: "open-clicked" });</code> to the <code>service_worker.js</code> which has the logic for opening the file: <code>chrome.downloads.open(result.lastDownloadId);</code>.</p>
<p>Why is the user gesture error being thrown when the user has indeed clicked the button to open it?</p>
<p><strong>content_script.js</strong></p>
<pre class="lang-js prettyprint-override"><code>let actionButtons = document.querySelectorAll('[data-myapp-chrome]');

actionButtons.forEach(function(button){
button.addEventListener('click', function(){
let action = this.getAttribute('data-myapp-chrome');
if(action === 'download-button') {
chrome.runtime.sendMessage({
action: "download-clicked"
});
} else if(action === 'open-button') {
chrome.runtime.sendMessage({
action: "open-clicked"
});
}
});
});
</code></pre>
<p><strong>service_worker.js</strong></p>
<pre class="lang-js prettyprint-override"><code>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.action === "download-clicked") {
downloadClickedAction();
} else if(request.action === "open-clicked") {
openClickedAction();
}
});

function openClickedAction() {
// open the downloaded file
try {
chrome.storage.sync.get(["lastDownloadId"], function (result) {
chrome.downloads.search({id: result.lastDownloadId}, function(searchResult) {
// discontinue if file does not exist
if (!searchResult || searchResult.length < 1 || !searchResult[0].exists) {
throw EXTENSION_STATUS_OPEN_FAILED;
}
chrome.downloads.open(result.lastDownloadId);
catchApiError(EXTENSION_STATUS_OPEN_FAILED);
});
});
} catch(e) {
sendMessage({status: EXTENSION_STATUS_OPEN_FAILED});
}
}
</code></pre>
<p><strong>manifest.json</strong></p>
<pre class="lang-js prettyprint-override"><code>{
"name": "MyApp",
"version": "1.3.0",
"description": "My App description",
"permissions": [
"downloads",
"downloads.open",
"notifications",
"storage"
],
"host_permissions": [
"file://*"
],
"background": {
"service_worker": "service_worker.js"
},
"content_scripts": [
{
"matches": ["http://localhost/*",
"https://localhost/*"],
"js": ["content_script.js"]
}
],
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"manifest_version": 3
}
</code></pre>
 

Latest posts

Top