Dom 内容未在 Chrome 扩展清单版本 3 中加载

Question

我正在尝试在清单版本 3 中创建 Chrome 扩展程序， 我想从 Chrome 扩展中的 Dom 中抓取数据。当我加载 chrome 扩展 Dom 时，未加载，因此无法进行爬行，在我重新加载 Dom 页面后，Chrome 扩展爬行即可工作。第一次打开Extension时如何加载Dom？

popup_script.js

chrome.runtime.sendMessage({ 
message: "get_name"
}, response => {
if (response.message === 'success') {
    document.querySelector('div').innerHTML = `Hello ${response.payload}`;
}
});

background_script.js

chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.local.set({
        name: "Jack"
    });
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: ["./foreground_styles.css"]
        })
            .then(() => {
                chrome.scripting.executeScript({
                    target: { tabId: tabId },
                    files: ["./foreground.js"]
                })
                    .then(() => {
                        console.log("INJECTED THE FOREGROUND SCRIPT.");
                    });
            })
            .catch(err => console.log(err));
    }
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log("backgroun")
    if (request.message === 'get_name') {
        chrome.storage.local.get('name', data => {
            if (chrome.runtime.lastError) {
                sendResponse({
                    message: 'fail'
                });
                return;
            }
            sendResponse({
                message: 'success',
                payload: data.name
            });
        });
        return true;
    }
});

Crawling_script.js

const ce_main_container = document.createElement('DIV');
const ce_name = document.createElement('DIV');
const ce_input = document.createElement('INPUT');
const ce_button = document.createElement('DIV');

ce_main_container.classList.add('ce_main');
ce_name.id = 'ce_name';
ce_input.id = 'ce_input';
ce_button.id = 'ce_button';

ce_name.innerHTML = `Hello NAME`;
ce_button.innerHTML = `Change name.`;

ce_main_container.appendChild(ce_name);
ce_main_container.appendChild(ce_input);
ce_main_container.appendChild(ce_button);
chrome.storage.local.set({
    name: document.getElementsByClassName('profile-photo-edit__edit-btn')[0].outerHTML
}, () => {
    if (chrome.runtime.lastError) {
        sendResponse({ message: 'fail' });
        return;
    }

    sendResponse({ message: 'success' });
})
chrome.runtime.sendMessage({ 
    message: "get_name"
}, response => {
    if (response.message === 'success') {
        ce_name.innerHTML = document.getElementsByClassName('profile-photo-edit__edit-btn')[0].outerHTML;
    }
});

Answer 1

我已经解决了我的疑问。请查看我的 chrome-extension-v3 的 GitHub 存储库。

请参阅以下链接。

https://github.com/manishparmar1208/Chrome-Extension-V3