如何在 Chrome 扩展弹出窗口中显示 HTML 代码答案

【问题标题】：How to display a HTML code in Chrome Extension Popup如何在 Chrome 扩展弹出窗口中显示 HTML 代码
【发布时间】：2015-08-12 10:12:29
【问题描述】：

我想在 chrome 扩展的弹出部分中显示一个 Amazon Affiliate Widget 代码。

manifest.json 看起来像这样（复制自 Google 存储库）：

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

backgroung.js 是空白的。 Popup.html 如下所示：

<html>
    <head>
	<title>
	Amazon
	</title>
	</head>
  <body>
    <h1>Amazon Search</h1>
	<script charset="utf-8" type="text/javascript">
amzn_assoc_ad_type = "responsive_search_widget";
amzn_assoc_tracking_id = "smart0e-21";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "IN";
amzn_assoc_placement = "";
amzn_assoc_search_type = "search_widget";
amzn_assoc_width = "auto";
amzn_assoc_height = "auto";
amzn_assoc_default_search_category = "";
amzn_assoc_default_search_key = "";
amzn_assoc_theme = "light";
amzn_assoc_bg_color = "FFFFFF";
</script>
<script src="//z-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&MarketPlace=IN"></script>
	</body>
</html>

我是这个扩展开发的新手，也是 HTML 的新手。请帮助我，我想在弹出窗口中运行搜索小部件。这就是我单击扩展程序时发生的情况。 http://i.stack.imgur.com/V3gK2.png 谢谢。

【问题讨论】：

我是 html 新手，当我将它插入 popup.HTML 时没有任何反应，甚至我不知道代码应该去哪里！
跟随一个弹出示例。所以不要链接到外部js。

标签： google-chrome-extension google-chrome-app

【解决方案1】：

您不能链接到 popup.html 文件中的外部链接。相反，您应该在扩展程序的背景中添加一个单独的 javascript 文件并从那里调用小部件的脚本。

您的清单将如下所示（不要忘记添加 Content-Security-Policy 规则）：

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background" : {
    "scripts" : [ "background.js" ],
  },
  "content_security_policy" : "script-src 'self' 'unsafe-eval' http://z-in.amazon-adsystem.com; object-src 'self'",
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "http://z-in.amazon-adsystem.com/"
  ]
}

您的 background.js 文件可以在 iframe 中调用脚本：

 (function() {
    var widget = document.createElement('iframe');
    widget.src = "//z-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&MarketPlace=IN";
    widget.id = 'widget';
    document.body.appendChild(widget);

    //assign your widget variables
  })();

而你的 popup.html 可以只有一个脚本链接到你的背景文件：

<script type="text/javascript" src="../background.js"></script>

我没有对此进行测试，但它是如何在您的扩展程序中运行外部脚本的一般要点。

【讨论】：