javascript - 将动态参数传递给在 for 循环中使用 chrome.tabs.executeScript() 注入的内容脚本，并将参数值写入控制台

Question

过程：

我创建了一个 Google Chrome 扩展程序，并在此扩展程序的选项页面中放置了一个按钮。单击此按钮时，它应该执行写在options.js文件中的代码（参考函数loopTabsAndWriteToConsole），遍历所有打开的选项卡并将动态变量（迭代次数）发送到内容脚本。内容脚本然后将动态变量写入脚本当前正在访问的相应选项卡的控制台日志。

问题：

单击选项页面中的按钮时，它不会将预期值写入每个打开的选项卡中的控制台。

如何修复代码，以便在单击按钮时执行脚本options.js和函数loopTabsAndWriteToConsole，并将动态变量/迭代计数相对于执行的选项卡写入控制台？也就是说，应该将动态变量/迭代计数写入脚本正在访问的选项卡的控制台。

例如，当我在浏览器中有 5 个选项卡并单击按钮时，这是我所期望的：

1st Tab Console log: 0
2nd Tab Console log: 1
3rd Tab Console log: 2
4th Tab Console log: 3
5th Tab Console log: 4

在上面的代码中，值：0、1、2、3、4 指的是 for 循环的迭代次数（即当前在我的浏览器窗口中打开的选项卡）。

以下是我的 HTML 和 JS 代码：

HTML：

<button id="btnWrite" type="button" class="btn btn-primary btn-block btn-lg">ALL TABS: Write to Console</button>

选项.js：

document.getElementById('btnWrite').addEventListener('click', loopTabsAndWriteToConsole);

function loopTabsAndWriteToConsole() {
        chrome.tabs.query({}, function (tabs) {
            for (var i = 0; i < tabs.length; i++) {
                chrome.tabs.executeScript(tabs[i].id, {code: "var config = '" + (i) + "';"}, function () {
                    chrome.tabs.executeScript(tabs[i].id, {file: "scripts/my_script.js"});
                });
            }
        });
}

my_script.js：

function writeToConsole() {
    console.warn(config);
}
writeToConsole();

更新 1：

以下代码被执行，但我无法传递动态变量/迭代计数以将其记录到控制台：

chrome.tabs.query( {} ,function (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        chrome.tabs.executeScript(tabs[i].id, {file: "scripts/my_script.js"});
    }
});

解决方案：

我想出了解决这个问题的办法。以下是我正在使用的修改后的功能。

function loopTabsAndWriteToConsole() {
    chrome.tabs.query({}, function (tabs) {
        for (var i = 0; i < tabs.length; i++) {
            (function (i) {
                chrome.tabs.executeScript(tabs[i].id, {code: "var config = '" + (i) + "';"}, function () {
                    chrome.tabs.executeScript(tabs[i].id, {file: "scripts/my_script.js"});
                });
            })(i);
        }
    });
}

标签： javascriptjquerygoogle-chrome-extension