Chrome Extension Developer - как сопоставить URL-адреса сценариев содержимого с указанных пользователем веб-сайтов?

Question

Как сказано в заголовке, как я могу реализовать, чтобы сценарий содержимого вводился в соответствии с указанными пользователем веб-сайтами?

Прямо сейчас я сохраняю указанные пользователем веб-сайты в хранилище.

Я попытался сделать это программно, вставив скрипт содержимого при создании / обновлении вкладки, но у меня были проблемы с материалом перекрестного происхождения, и я не мог заставить его работать.

const injectContentScripts = function(sites)
{
    // if not provided, use default.
    if (!sites)
        sites = 'website.com'

    const urls = sites.split('\n').map(url => `*://${url}/*`)

    chrome.tabs.query({ url:urls, status:'complete' }, function(tabs) {

        for (const tab of tabs)
        {
            chrome.tabs.executeScript(tab.id, { file:'ext/jquery.min.js', allFrames:true, runAt:'document_end' }, function(){

                chrome.tabs.executeScript(tab.id, { file:'content.js', allFrames:true, runAt:'document_end' })

            })
        }

    })
}

У меня также была идея, что я могу просто отформатировать manifest. json файл после обновления пользователем, какие веб-сайты пользователь хотел бы добавить, но это не сработает, так как когда вы упаковываете расширение, оно становится этим файлом .crx или чем-то еще, не так ли?

Я пробовал искать об этом случае, но не нашел никого, кто бы об этом спросил Извините, если я что-то упустил, я не так хорош в английском sh.

Answer 1

Собственно решение нашел сам. : D

Ну раз кому то и нужно. У меня он работает с этим,

chrome.webNavigation.onDOMContentLoaded.addListener(async (e) => {

    const saved = await chrome.storage.sync.get(['sites'])

    // if not provided, use default.
    if (!saved.sites)
        saved.sites = 'website.com'    

    const split = e.url.split('://')
    const splitUrl = split[1] ? split[1].split('/')[0] : false

    // if not url or frame is not main frame return.
    if (!splitUrl || e.frameId != 0)
        return

    for (const url of saved.sites.split('\n'))
    {
        if (splitUrl.match(url))
        {
            injectContentScripts(e.tabId)
            break;
        }
    }

})

const injectContentScripts = async function(tabId)
{
    if (tabId == undefined)
        return

    try {
        // i'm using this npm library, whichh allows async await https://www.npmjs.com/package/chrome-extension-async
        await chrome.tabs.executeScript(tabId, { file:'ext/jquery.min.js', allFrames:true, runAt:'document_end' })
        await chrome.tabs.executeScript(tabId, { file:'content.js', allFrames:true, runAt:'document_end' })
    } catch(e) {
        console.error(e)
    }
}

Есть встроенный сопоставитель URL-адресов, но я не был уверен, как я могу получить доступ к этим функциям. В любом случае это работает нормально, более чистый способ был бы с RegExp, но он работает, так что я думаю, все в порядке. : D

Чтобы это работало, вы должны указать эти разрешения в файле манифеста.

"permissions": [
    "webNavigation",
    "<all_urls>"
],