动态注入内容脚本 - Chrome 扩展

Question

我正在尝试制作一个 chrome 扩展，它从后端接收 javascript 代码并将其保存在 localStorage（作为 base64）中，以便稍后在加载正确的页面时将其作为内容脚本注入，它确实可以在大多数情况下工作除了有几个问题之外的时间......第一个问题（不是那么重要）是我无法访问 Chrome API（如 chrome.storage 或 chrome.runtime.sendMessage），第二个问题是它没有注入正确的代码到子 iframe... 因为 location.href 返回顶部网页的 URL，我找不到在 iframe 本身内访问 iframe 当前 URL 的方法。

这是我目前的代码：

manifest.json

//....
"content_scripts": [{
    "run_at": "document_end",
    "all_frames": true,
    "matches": [
        "<all_urls>"
    ],
    "js": [
        "src/inject/InjectManager.js"
    ]
}],
//...

InjectManager.js：

// Some functions were not included for brevity
chrome.runtime.sendMessage({ action: "get_supported_urls" }, function(supported_urls) {
    let current_url = window.location.href;

    // Check if we support current_url
    let js_code_to_inject = isWebsiteSupported(supported_urls, current_url); // this function returns string that is javascript code.
    if(js_code_to_inject){
        // Append the code to the body
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.innerHTML = js_code_to_inject;

        document.body.appendChild(script);
    }
});

如您所见，我正在尝试重新创建 chrome 在 manifest.json 的“content_script”部分中已经完成的功能，因为我的 javascript 代码是动态的。

注意：我知道这在 chrome 商店中是不允许的，因此此扩展程序不得与任何人共享。

感谢阅读。 任何帮助将不胜感激。

Answer 1

我无法访问 Chrome API（如 chrome.storage 或 chrome.runtime.sendMessage）

您的代码当前生成的是page script，而不是内容脚本。对于后者，您需要在后台脚本中使用chrome.tabs.executeScript（另见content script documentation）。

location.href 返回顶部网页的 URL，但我找不到在 iframe 本身中访问 iframe 当前 URL 的方法。

不，您所描述的根本不可能发生，这将是对 URL 源安全性的世界末日级违规，因此正在发生其他事情。例如，您的 manifest.json 没有 match_about_blank 意味着 InjectManager.js 根本不处理动态添加的 about:blank 帧。

---

manifest.json：

"content_scripts": [{
  "match_about_blank": true,
  .....................

InjectManager.js：

chrome.runtime.sendMessage({ action: 'inject', data: location.href });

后台脚本：

chrome.runtime.onMessage.addListener(({ action, data }, sender, sendResponse) => {
  if (action === 'inject') {
    chrome.tabs.executeScript(sender.tab.id, {
      code: getInjectionCode(data),
      frameId: sender.frameId,
    });
  }
});

请注意，像 javascript: 或 srcdoc: 这样的一些 iframe 根本不会在 Chrome 中运行内容脚本，因此您必须直接在 InjectManager.js 中处理它们，因为它们无法通过 executeScript() 注入。例如，您可以使用 document.querySelectorAll('iframe') 查找所有 iframe 并像当前一样在内部创建 DOM script 元素，但您将使用 frameElement.contentDocument 而不是 document，当然您会检查 iframe 的真实 URL（ frameElement.contentWindow.location.href) 不以http 开头，因为可以在内部导航框架而无需更改其外部的src 属性。在 try/catch 中进行检查，因为从不同的来源访问 iframe 会抛出异常。