Question

如果我访问亚马逊，速卖通，flipkart，myntra等任何联属商店，我需要开发镀铬扩展，以显示最新优惠和优惠券。

当我访问他们的网站并且我的扩展程序已安装时，该网站将注入弹出窗口，其中包含该网站的优惠和优惠券。（我有一个网络服务，我将从哪里获取优惠和优惠券）。

它将如下图所示。

我尝试过类似的方式，但我不确定这是正确的做法。

来自 Manifest.json

    "content_scripts": [
        {
          "matches": ["*://*/*"],
          "js": ["jquery.js","myscript.js"],
          "css":["offers.css"]
        }
    ],
    "web_accessible_resources":[
        "offers.html",
        "offers.js"
    ]

myscript.js

var url = chrome.extension.getURL('offers.html');
var iframe = "<iframe src='"+url+"' id='IframeID'></iframe>";
var host = window.location.host;
var splittedHost = host.split('.');
var title = $(document).find("title").text();
if(title != ''){
    $('body').append(iframe);
}

offers.html

<html>
<head>
    <meta charset="UTF-8">
    <title>test| Latest Offers</title>
    <script src="jquery.js"></script>
    <script src="offers.js"></script>
</head>
<body id="bodyText">
    <h1>
        Welcome
    </h1>
    ...
</body>
</html>

使用这个我在我访问的每个页面都有这样的东西：

iframe实际上是提供页面并获取商品数据我需要来自url的主机名。我尝试在offers.html中注入的offers.js中获取window.localtion.host，但我得到chrome://extension。

任何人都可以建议我如何在offers.js中获取主机名，或者有什么方法可以从discovercripts.js在offers.html中附加数据？以及如何调用API以及如何将结果附加到iframe主体？

Answer 1

有人可以建议我如何在offers.js中获取主机名，或者有什么方法可以从offers ::.提供者在offers.html中附加数据？

作为一种快速解决方案，如果您只需要URL，则可以将其作为查询参数传递：

// myscript.js
var url = chrome.extension.getURL('offers.html?url=' + window.location.host);

// offers.js
// Using https://developer.mozilla.org/en-US/docs/Web/API/URL
var host = new URL(location.href).searchParams.get('url');

如果您确实需要从页面中提取更多信息，可以使用postMessage与嵌入式窗口进行通信。

// myscript.js
iframe.contentWindow.postMessage(message, chrome.runtime.getURL(""));

// offers.js
window.addEventListener("message", function(event) {
  var message = event.data;
  /* ... */
});

这也可以是双向的，但这不在问题的范围内。

在哪里调用API以及如何将结果附加到iframe主体？

好吧，在offers.js中，然后修改该页面的DOM。

编辑：显然，这是有问题的，因为来自页面的安全策略泄漏到iframe，阻止了对HTTP端点的调用。

您应使用HTTPS开始。这是您的用户隐私的利害关系。
您可以使用Messaging将API调用委托给后台页面来解决此问题。背景页面没有此限制。
..你仍然应该使用HTTPS。在审核您的扩展程序时，此可能是拒绝的理由。

开发购物提供Chrome扩展的最佳方式是什么？

1 个答案: