Javascript Chrome Extension Developer-如何匹配用户指定网站的内容脚本URL？

正如标题所说，我将如何实现根据用户指定的网站注入内容脚本

现在我正在将用户指定的网站保存到存储中

我试图通过在创建/更新选项卡时注入内容脚本以编程的方式完成这项工作，但我遇到了跨源代码的问题，无法让它工作

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文件或其他文件，对吗

---

我试着搜索这个案子，但找不到任何人问这个问题。对不起，如果我遗漏了什么，我的英语不是很好。

事实上我自己找到了解决办法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>"
],

“权限”：[
“网络导航”，
""
],

实际上我自己找到了解决方案：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>"
],

“权限”：[
“网络导航”，
""
],

欢迎来到SO！我强烈建议您重新格式化您的答案，将这堵文字墙分成逻辑块，并添加相关程序代码。更新后，我实际找到了以前的内容@ITDesigns.euWelcome to SO！我强烈建议您重新格式化您的答案，将这堵文本墙分成逻辑块，并添加相关程序代码。更新后，我实际找到了以前的@ITDesigns.eu