在 Chrome 扩展中将变量从页面传递到内容脚本

Question

我正在开发一个 Chrome 扩展，它需要我从 YouTube 视频中获取字幕文件，然后进行一些处理。我已经设置了所有逻辑来执行此操作，但字幕的链接存储在页面上的全局变量 (ytInitialPlayerResponse) 中，无法从我的内容脚本的上下文中访问。

因此，我只需要将 window.postMessage 调用注入到 youtube 页面中，并将变量传递到我的内容脚本（根据 docs）。

let script = document.createElement('script');
script.type = 'text/javascript'
let code = `
    let sendBaseUrl = () => {
        window.postMessage({type : "FROM_PAGE", text : "Hello from the webpage!"}, "*");
    }
`
script.appendChild(document.createTextNode(code))
document.body.appendChild(script)

但是，由于针对执行内联脚本的内容安全策略，我无法这样做。

每次加载视频时都需要获取字幕，除了通过此变量之外，我还没有看到以编程方式检索字幕文件的 url 的方法。 Youtube 的 API 确实有类似的功能，但据我所知，请求需要您作为视频发布者进行身份验证。

我不太确定现阶段该做什么。我显然无法控制内容安全策略，而且这是我第一次编写 chrome 扩展，所以我以前没有遇到过这种情况。

如有任何帮助，我们将不胜感激。

Answer 1

抱歉重复，我真的试图寻找答案，但我所能找到的只是扩展所有者控制页面上下文和内容脚本的情况。

我找到了一个关于解决这个问题的所有可能方法的漂亮解释这里，感谢 Rob W.

总之，我创建了另一个js文件，纯粹是为了保存我想要注入的脚本。

get_subs.js

let sendBaseUrl = () => {
        let baseUrl = ytInitialPlayerResponse.captions.playerCaptionsTracklistRenderer.captionTracks.find(x => x.languageCode.indexOf("ja") === 0)?.baseUrl
        window.postMessage({type : "YOMI_GET_SUBS", subUrl : baseUrl}, "*");
}

sendBaseUrl()

并将以下条目添加到我的manifest.json中，以允许其他页面访问它
清单.json

"web_accessible_resources": [{
        "resources": ["scripts/get_subs.js"],
        "matches": ["https://www.youtube.com/*"]
    }],

最后将脚本注入到页面中 内容.js

var s = document.createElement('script');
s.src = chrome.runtime.getURL('scripts/get_subs.js');
s.onload = function() { this.remove(); };
// see also "Dynamic values in the injected code" section in this answer
(document.head || document.documentElement).appendChild(s);