从iframe中的远程站点检测代码是否作为Chrome扩展运行

Detect that code is running as a Chrome extension, from a remote site, within iframe

本文关键字：是否 代码 检测 运行 扩展 Chrome 站点 iframe 程站点      更新时间：2023-09-26

问题：是否可以检测远程站点上运行的js代码是否从Chrome扩展中的iframe中调用？我有一个远程网站，当被调用为Chrome扩展时，我想覆盖一些行为，而是使用Chrome.runtime.sendMessage和Chrome.runtime.onMessageExternal将命令发送回扩展。

在我的popup.html中，我有这样的：

<iframe src="http://localhost" width="100%" height="100%" frameborder="0"></iframe>

在远程站点（用于测试的localhost）上的js中，我有以下内容：

$(document).ready(function () {
    if (someHowCheckIfIAmBeingCalledFromAChromeExtension == true) { //what do I put here?
    {
        // The ID of the extension we want to talk to.
        var extensionId = "abc";
        // Make a simple request:
        chrome.runtime.sendMessage(extensionId, { message: "connected!" },
          function (response) {
              if (!response.success)
                  handleError(message);
          });
    }
}
});

在我的popup.js中，我有：

chrome.runtime.onMessageExternal.addListener(
  function (request, sender, sendResponse) {
     //do something with request.message
});

这有可能吗？我看了很多其他的文章和问题，这些文章和问题都在谈论我想做什么，但并没有让我走上正确的道路。

谢谢！

我通过以下方式解决了这个问题：

  1. 将popup.html中的iframe指向localhost/index？延伸=铬

  2. 将以下jquery添加到远程/本地主机站点的索引中：

    $(document).ready(function () {
//check if query string is present
if (getParameterByName('extension') == 'chrome')
    {
        var extensionId = "abc";
        //append the query string of each link on the page to make sure the site stays in "extension mode"
    $('a').each(function () {
       var _href = $(this).attr('href');
       var _newHref;
       if (_href.indexOf('?') >= 0) {
          _newHref = _href + '&extension=chrome';
       } else {
           _newHref = _href + '?extension=chrome';
    }
    $(this).attr("href", _newHref);
});
//after this line I catch/change/override any behavior I want to change when the site is used form within the extension
//Then, I use chrome.runtime.sendMessage to send any custom commands to the extension
}
});

  3. 然后，在popup.js中，我必须执行以下操作：

    chrome.runtime.onMessageExternal.addListener(
    function (request, sender, sendResponse) {
        //do something with the caught behavior
});
//If you want to make the website snap out of "extension mode",
//clean all urls with this function when forwarding urls/opening tabs from the extension.
//The website will then function as usual, stripped of all the extension specific behaviour.
function cleanChromeExtensionQueryString(url)
{
    var cleaned;
    if (url.indexOf('?extension=chrome') >= 0) {
        cleaned = url.replace('?extension=chrome', '');
 }
 else if (url.indexOf('&extension=chrome') >= 0) {
     cleaned = url.replace('&extension=chrome', '');
 };
 return cleaned;
 }

这种方法允许我将响应式网站重新用作Chrome扩展，同时仍然可以修改某些行为，使其变得更"扩展式"：-）。

当然，这种总体方法并不适用于所有场景，但它恰好适用于我当前的项目。在其他情况下，您最好从头开始创建扩展。

相关文章：