Chrome 扩展创建一个选项卡并将内容注入其中答案

【问题标题】：Chrome Extension Create a Tab and inject content into itChrome 扩展创建一个选项卡并将内容注入其中
【发布时间】：2022-01-17 17:42:25
【问题描述】：

您好，我正在尝试在我的后台脚本中创建一个新选项卡，并注入一个脚本（目前它只是检查代码的常规警报），但我无法做到这一点，因为如果我尝试，CSP 会被阻止内联脚本和内容脚本不能注入到 chrome-extensions:// 方案中。

我的清单：

{
    "manifest_version": 3,
    "name": "OSINTisizer",
    "description": "OSINT any IP or URL",
    "version": "1.20",
    "icons": {
        "48": "images/logo_48.png",
        "128": "images/logo_128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "contextMenus",
        "background",
        "scripting",
        "tabs",
        "storage",
        "activeTab"
    ],
    "host_permissions": [
        "*://*/*"
    ]
}

我的 background.js 代码 sn-p 相关：

chrome.tabs.create({ url: 'report.html' });
    });

我希望将 report.js 代码注入到以下新创建的选项卡中：

chrome-extensions://foobar/report.html

更新：尝试在新创建的选项卡上使用 chrome.scripting.executeScript 执行此任务，但仍无法正常工作

chrome.tabs.create({ url: "report.html" }, function (createdTab) {
            chrome.scripting.executeScript({
              target: { tabId: createdTab },
              files: ["report.js"],
            });
          });

【问题讨论】：

标签： javascript google-chrome

【解决方案1】：

解决了！！由于某种原因，CSP 在我上次尝试这样做时阻止了我，但有效的代码是：

chrome.storage.local.set({ info: uniqeEmails }, function () {});
          chrome.tabs.create({ url: "report.html" },{

<!DOCTYPE html>
<html>
<head>
    <script src="report.js"></script>
</head>
<body>
</body>

</html>

【讨论】：