开发购物产品的最佳方式是提供镀铬扩展？

我开发的Chrome扩展程序，如果我访问任何附属商店像亚马逊，全球速卖通，flipkart，myntra等，这些将显示最新报价和优惠券的要求开发购物产品的最佳方式是提供镀铬扩展？

当我访问他们的网站，如果我的分机安装那么网站将被注入弹出有该网站的优惠券和优惠券。（我有一个web服务，我将从中获取优惠和优惠券）。

它将如下图所示。

我试过类似的这种方式，但我不知道这是正确的做法。

从的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>

并用T他我在每一页我访问是这样的：

该iframe实际上是提供了网页，并得到我需要从URL主机名提供数据。我尝试在offers.html注入的offers.js中获得window.localtion.host，但我获得了chrome://extension。

任何人都可以建议我如何获得主机名在offers.js或有任何方法我可以在myscripts.js的offers.html附加数据？以及在哪里调用API以及如何将结果附加到iframe正文？

来源

2017-08-29 ravi

我不明白你的_actual question_在这里是什么。你已经显示了工作代码，那么问题是什么？ – Xan

嗨，感谢您的回复，这实际上不是工作代码。该iframe实际上是提供页面，并获得提供的数据，我需要从URL的主机名。我尝试了在offers.HTML中注入的offers.js中的window.localtion.host，但是我得到了chrome：// extension。我需要提供网页的url名称，因为从url我会提取数据。 – ravi

另外，用iframe或其他东西显示div的最好方法是更好吗？ – ravi

任何人都可以建议我如何获取主机名在offers.js或有任何方式我可以在myscripts.js的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。 可能是您审核扩展程序时拒收的原因。

来源

2017-08-29 10:23:52 Xan

感谢您的解决方案，我会尽快尝试。 :) – ravi

我在使用ajax获取数据时出现了这个错误。 jquery.js：4混合内容：'https://www.flipkart.com/'页面通过HTTPS加载，但请求不安全的XMLHttpRequest端点'http：// API URL'。此请求已被阻止;内容必须通过HTTPS提供。 – ravi

看起来我不能请求从HTTPS到HTTP的ajax调用。对？那么有没有其他的选择，或者我将不得不从HTTPS调用API？ – ravi

开发购物产品的最佳方式是提供镀铬扩展？

回答

相关问题