代码每个事件执行多次：多次下载 [英] Code is executing multiple times per event: Multiple downloads

问题描述

我想从内容脚本中下载一个JSON对象。首先，当我请求下载时，它下载一个文件，但在第二个请求下载它下载两个文件;在第三个请求中，下载了三个文件等。

I want to download a JSON object from within the content script. At first, when I request the download, it downloads one file, but at the second request, it downloads two files; at the third request, three files are downloaded, etc.

chrome.browserAction.onClicked.addListener(function (tab) {
    download();
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        //Alert the message
        console.log(request);
        chrome.downloads.download({
            url: request.method,
            filename: request.name
        }, function (downloadId) {

        });
        //You have to choose which part of the response you want to display 
        //  ie. request.method
        //alert('The message from the content script: ' + request.method);
        //Construct & send a response
        sendResponse({
            response: "Message received"
        });
    });
});

function download() {
    chrome.tabs.executeScript(null, {
        file: "jquery.js"
    }, function () {
        chrome.tabs.executeScript(null, {
            file: "content_script.js"
        });
    });
}

内容脚本

Content Script

function sendMessage(url, filename) {
    //Construct & send message
    chrome.runtime.sendMessage({
        method: url,
        name: filename
    }, function (response) {
        //Alert the message
        //You have to choose which part of the response you want to display 
        //  ie.  response.response

        //alert("The response from the background page: " + response.response);
    });
}
var json = JSON.stringify(ticket);
var blob = new Blob([json], {
    type: "application/json"
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = "backup.json";
a.href = url;
a.textContent = "Download backup.json";
var container = document.getElementById('ticketDetail');
//container.appendChild(a);
var fName = ticket.date.replace(".", "_")
sendMessage(url, fName.replace(".", "_") + ".json");

推荐答案

通常情况下，这种问题模式，问题是您正在向事件添加多个匿名侦听器。具体来说，每次点击 action_button 时，您还要添加另一个 chrome.runtime.onMessage 监听器。您只需添加一次监听器。

As is usually the case with this pattern of problem, the issue is that you are adding multiple anonymous listeners to an event. Specifically, you are adding yet another chrome.runtime.onMessage listener each time the action_button is clicked. You need to add the listener only once.

这个简单的解决方案是添加 chrome.runtime.onMessage 一次：

The simple solution to this is to just add the chrome.runtime.onMessage once:

chrome.browserAction.onClicked.addListener(function (tab) {
    download();
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    //Alert the message
    console.log(request);
    chrome.downloads.download({
        url: request.method,
        filename: request.name
    }, function (downloadId) {
    });
    //You have to choose which part of the response you want to display 
    //  ie. request.method
    //alert('The message from the content script: ' + request.method);
    //Construct & send a response
    sendResponse({
        response: "Message received"
    });
});

function download() {
    chrome.tabs.executeScript(null, {
        file: "jquery.js"
    }, function () {
        chrome.tabs.executeScript(null, {
            file: "content_script.js"
        });
    });
}

这篇关于代码每个事件执行多次：多次下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！