使用 Chrome 扩展程序，打开一个页面，执行一个操作，打开另一个页面，做同样的事情（重复直到所有页面完成）答案

【问题标题】：Using a Chrome extension, open a page, perform an action, open another page, do same (repeat until all pages done)使用 Chrome 扩展程序，打开一个页面，执行一个操作，打开另一个页面，做同样的事情（重复直到所有页面完成）
【发布时间】：2022-11-03 02:23:06
【问题描述】：

我正在尝试编写一个遍历网页列表的 Chrome 扩展程序（这些页面的 URL 可以硬编码到 .js 中的某个 JavaScript 数组中），执行以下操作...

截图
获取生成的屏幕截图并将其存储在本地或将其（图像数据）发送到 API
转到下一个 URL，冲洗并重复

我想在不为每个 URL 打开新选项卡的情况下执行此操作。

我使用调用扩展程序时执行的脚本尝试了各种方式。看来 window.open("some URL", "_self") 不起作用。正如预期的那样，使用 chrome.tab.create 每次都会打开一个新选项卡。我对此很好（目前），但是在回调函数中，尝试再次调用 chrome.tab.create 不起作用。然后我阅读了有关后台脚本（服务人员）的信息，但仍然没有运气。我希望在回调函数 (newTab) => {...} 中，我可以执行类似 newTab.open("https://blah", some_callback) 的操作，并使用新 URL 更新选项卡并另一个回调（可能使用 chrome.tabs.update）。

我正在使用清单版本 3

谢谢，

马修

更新：看起来缺少一些上下文信息。似乎后台 JS（服务工作者）似乎是 Node.js，当然，基于浏览器的 JS 不是。这意味着它们将有两个完全不同的命名空间，所以会好奇浏览器 JS 如何与服务工作者 JS 交互（就像我假设的任何其他服务器一样）

【问题讨论】：

我认为你应该使用 Puppeteer。本教程适用于 Chromebook，但对其他操作系统也有帮助。 How to Automate Browser on Chromebook Linux
@norio-yamamoto 谢谢，我一定会的
嗨@lastfreedom，欢迎来到stackoverflow，感谢您提出问题。我想使用 Chrome 扩展程序很难做到这一点。这可以使用许多工具来实现。我刚刚阅读了您的更新，这正是我所要达到的 :) 祝您旅途愉快
如果你真的想要一个 chrome 扩展，你可以使用 chrome.tabs.update 来改变同一个标签的 URL。一旦你真正了解了架构，它应该很容易。注意 service worker 与 node.js 没有关系，它只是一个单独的 JS 环境，但没有window 或 DOM。
如果您可以检测到屏幕截图过程何时完成，则可以迭代到数组中的下一个值并使用 window.location.href = url_arr[i] 更改您所在的同一选项卡的 URL - 就像提到的 @wOxxOm

标签： google-chrome-extension

【解决方案1】：

看来我想通了。首先是清单（第 3 版）...

{
    "name": "Screenshots from List",
    "version": "0.0.1",
    "description": "Take screenshots based on a list of URLs",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "desktopCapture",
        "downloads",
        "tabs",
        "activeTab"
    ],
    "host_permissions": ["<all_urls>"],
    "action": {
        "default_title": "Take Screenshots"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"]
        }
    ]
}

content_script.js 文件是空的，但似乎是必需的，因此扩展菜单包含一个可点击的条目（鉴于我目前对 Chrome 扩展的理解有限，而且无疑是有限的）

background.js（在重置选项卡的 URL 后暂停，因为在我的用例中，JavaScript 在 chrome.tabs.onUpdated 事件触发后继续呈现选项卡...

var m_Clicked = false;
var m_Index = 0;
var m_UrlList = ["URL1", "URL2"];

chrome.action.onClicked.addListener(function (tab) {
    console.log("Clicked");
    m_Clicked = true;
    chrome.tabs.update({"url": m_UrlList[m_Index]});

});

chrome.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {

    console.log("Clicked : " + m_Clicked);
    console.log(changeInfo.status);

    if (m_Clicked) {
        if (changeInfo.status == 'complete') {
            await new Promise(r => setTimeout(r, 2000));
            chrome.tabs.captureVisibleTab(null, {
                format: "png",
                quality: 100
            }, function (data) {

                chrome.downloads.download({
                        url: data,
                        filename: "pic_" + m_Index + ".png"
                    },
                    () => {
                        if (m_Index < m_UrlList.length) {
                            m_Index++;
                            chrome.tabs.update({"url": m_UrlList[m_Index]});
                        }
                    }
                );
            });
        }
    }
});

【讨论】：