我需要开发 chrome 扩展程序，如果我访问亚马逊、速卖通、flipkart、myntra 等任何附属商店，该扩展程序将显示最新优惠和优惠券。
当我访问他们的网站时，如果安装了我的扩展程序，那么该网站将被注入(inject)包含该网站的优惠和优惠券的弹出窗口。 (我有一个网络服务，我可以从中获取优惠和优惠券)。
它将如下图所示。
我已经尝试过类似的方法，但我不确定这是正确的方法。
来自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);
}
offer.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.js 中的 window.localtion.host 注入(inject)到 Offers.html 中，但我得到了 chrome://extension。
任何人都可以建议我如何在 Offers.js 中获取主机名，或者有什么方法可以从 myscripts.js 将数据附加到 Offers.html 中？在哪里调用 API 以及如何将结果附加到 iframe 主体？
最佳答案
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?
作为一种快速解决方案，如果您只需要 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;
/* ... */
});
这也可以是双向的，尽管这超出了问题的范围。
where to call the API and how to append result in to iframe body?
好吧，在offers.js中，然后修改该页面的DOM。
编辑:显然，这是有问题的，因为页面的安全策略泄漏到 iframe 中，从而阻止对 HTTP 端点的调用。
您应该首先使用 HTTPS。您的用户的隐私受到威胁。
您可以通过使用Messaging将API调用委托(delegate)给后台页面来解决这个问题。 。后台页面没有此限制。
..您仍然应该使用 HTTPS。当您的扩展程序被审核时，这可能成为拒绝的原因。
关于javascript - 开发购物优惠 chrome 扩展的最佳方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45935313/