Chrome 扩展开发者 - 如何匹配来自用户指定网站的内容脚本 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 文件，但这不起作用，因为当你打包扩展名时，它会变成 that.crx 文件或其他东西，对吧？

我试着搜索这个案例，但找不到任何人问这个问题。 抱歉，如果我遗漏了什么，我的英语不是那么好。

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>"
],