什么是开发购物的最佳方式提供铬延伸？

Question

我有一个开发铬的扩展，将显示最新的优惠和优惠券，如果我访问任何附属商店，如亚马逊，aliexpress，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。我试着让window.localtion.host在offers.js注射到offers.html，但我得到了chrome://extension。

有人能建议我如何在offers.js中获取主机名吗?或者有什么方法可以在offers.html中添加来自myscripts.js的数据？在哪里调用API以及如何将结果附加到iframe体内？

Answer 1

有人能建议我如何在offers.js中获取主机名吗?或者有什么方法可以在offers.html中添加来自myscripts.js的数据？

作为一种快速解决方案，如果您只需要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。这是你的用户的隐私受到威胁。
• 您可以通过使用消息传递将API调用委托给后台页面来解决这个问题。背景页没有此限制。
• ..you仍然应该使用HTTPS。当您的扩展被审查时，这可能是拒绝的一个原因。