开发购物优惠扩展功能的最佳方法是什么？

Question

I have a requirement of developing chrome extension which will display latest offers and coupons if I visit any affiliate store like amazon, aliexpress, flipkart, myntra etc. 我需要开发chrome扩展程序，如果我访问亚马逊，速卖通，flipkart，myntra等任何附属商店，它将显示最新优惠和优惠券。

When I visit their website and if my extension is installed then that website will should be injected with popup having offers and coupons of that website. 当我访问他们的网站并且安装了我的扩展程序时，该网站将被弹出并带有该网站的优惠和优惠券。 (I have a webservice from where i will fetch offers and coupons). （我有一个Web服务，可从那里获取优惠和优惠券）。

It will be something like shown in below image. 如下图所示。

I have tried something similar this way but i'm not sure it's the right way to do. 我已经尝试过类似的方法，但是我不确定这是正确的方法。

From Manifest.json 来自Manifest.json

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

myscript.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 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>

Using This I got something like this in every page I visit: 使用this，我访问的每个页面都有类似的内容：

That iframe is actually offers page and to get offers data I need host name from url. 该iframe实际上是商品页面，要获取商品数据，我需要来自url的主机名。 I tried getting window.localtion.host in offers.js injected in offers.html but I get chrome://extension . 我尝试在offers.html中注入的offers.js中获取window.localtion.host ，但我得到了chrome://extension 。

Can anyone suggest me how to get host name in offers.js or is there any way I can append data in offers.html from myscripts.js? 谁能建议我如何在offers.js中获取主机名，或者有什么办法可以从myscripts.js中将数据附加到offers.html中？ and where to call the API and how to append result in to iframe body? 以及在何处调用API以及如何将结果附加到iframe主体？

Answer 1

Can anyone suggest me how to get host name in offers.js or is there any way I can append data in offers.html from myscripts.js? 谁能建议我如何在offers.js中获取主机名，或者有什么办法可以从myscripts.js中将数据附加到offers.html中？

As a quick solution, if you only need the URL, you can pass it as a query parameter: 作为快速解决方案，如果只需要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');

If you do need to extract more information from the page, you can use postMessage for communication with the embedded window. 如果确实需要从页面中提取更多信息，则可以使用postMessage与嵌入式窗口进行通信。

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

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

This can be made bi-directional as well, though this is outside the question's scope. 尽管这不在问题范围之内，但也可以设为双向。

where to call the API and how to append result in to iframe body? 在哪里调用API以及如何将结果附加到iframe主体？

Well, in offers.js , and then modify the DOM of that page. 好吧，在offers.js ，然后修改该页面的DOM。

Edit: Apparently, this is problematic as security policies from the page leak into the iframe, blocking a call to HTTP endpoint. 编辑：显然，这是有问题的，因为安全策略从页面泄漏到iframe中，从而阻止了对HTTP端点的调用。

You should use HTTPS to begin with. 首先应使用HTTPS。 It's the privacy of your users that is at stake. 危及用户隐私。
You can work around it by delegating the API call to a background page using Messaging . 您可以通过使用Messaging将API调用委派给后台页面来解决。 A background page does not have this restriction. 后台页面没有此限制。
..you still should be using HTTPS. ..您仍然应该使用HTTPS。 This can be a reason for rejection when your extension is reviewed. 这可能是在审查您的扩展程序时拒绝的原因 。

开发购物优惠扩展功能的最佳方法是什么？

问题描述

1 个解决方案

解决方案1
1 2017-08-29 10:23:52

开发购物优惠扩展功能的最佳方法是什么？

问题描述

1 个解决方案

解决方案1 1 2017-08-29 10:23:52

解决方案1
1 2017-08-29 10:23:52