如何獲取 iframe 的幀 ID 以在 executeScript chrome 擴展 mv3 中使用？

Question

我學習 chrome 擴展MV3而不是MV2

我想通過 frame id tag(string) 來獲取 frame id(integer)，而不是all_frames: True to use at chrome.scripting.executeScript

因為如果 iframe 很多，代碼可以應用到我不打算應用的地方。

例如，我只想在這個站點www.naver.com的da_iframe_time 的iframe 中注入 javascript 代碼

我根據參考寫了下面的代碼，但我不知道如何使用 id 標簽找到框架 id。

background.js（服務工作者）

chrome.webNavigation.onCommitted.addListener(function(tab) {
    chrome.webNavigation.getAllFrames({tabId: tab.tabId}, function(res){
        // I want to use the id tag here to find the frame id I want.
        for(let idx=0; idx<res.length; idx++){
            console.log(res[idx].frameId);
        }
        chrome.scripting.executeScript({
            target: {tabId: tab.tabId, frameIds: [""]},
            files: ['injectCode.js']
        });
    })
});

Answer 1

路是兩條。
如果您知道要注入的幀 URL，則可以掃描 trought 幀，直到找到所需的幀。
如果您不知道 url，您應該注入所有框架並編寫一個內容腳本，該腳本在所有框架中休眠但在您想要的框架中工作。
這可以通過檢查您知道在所有幀中是唯一的特定 DOM 節點來實現。

Answer 2

我只是稍微修改了這兩個文件。
如您所見，我已將外部偵聽器轉換為“chrome.tabs.onUpdated”，並且在填充框架數組的塊中添加了進一步的條件（只是為了避免主框架 #0）。

在handleExtension.js 中，我將“sendMessage”移動到storage.local.set 回調函數，因為在設置存儲項之前，您可能會冒險發送。

//in background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status == 'complete') {
        let includeStr = "cafe";
        let notIncludeStr = "ArticleList";
        let file_name = "";
        chrome.storage.local.get(['eraseCheckBox'], async function(data) {
            var res = await chrome.webNavigation.getAllFrames({'tabId': tabId});
            var frames = [];
            for (let idx = 0; idx < res.length; idx++) {
                file_name = data.eraseCheckBox ? "eraseDealer" : "recoverDealer" + ".js";
                if (res[idx].url.includes(includeStr) && !res[idx].url.includes(notIncludeStr) && res[idx].frameId != 0) {
                    console.log(res[idx].url);
                    console.log("Do and Id: " + res[idx].frameId);
                    frames.push(res[idx].frameId);
                }
            }

            if (frames && file_name !== "") {
                chrome.scripting.executeScript({
                    target: {'tabId': tabId, frameIds: frames},
                    files: [file_name]
                });
            }       
        });
    }
});

//in handleExtension.js
document.getElementById('eraseButton').addEventListener("change", function() {
    chrome.storage.local.set({
        'eraseCheckBox': this.checked
    }, _ => {
        chrome.runtime.sendMessage({ msg: "recoverDo"})
    }); 
})