【发布时间】：2016-08-23 21:40:56
【问题描述】：
问题
当用户单击上下文菜单项（我通过扩展程序背景页面创建）或用户单击浏览器操作图标时，我想在网页上显示弹出窗口或侧边栏窗口。这个侧边栏窗口将显示一些 HTML 标记，我将在我的扩展目录中的一个单独的文件（sidebar.html）中拥有这些标记，并且这个 sidebar.html 将由 sidebar.js 管理（也是我目录中的一个文件）我的问题是什么显示此 sidebar.html 的最佳方式是什么？
我不希望它成为模式或灯箱，以便为我的用户提供更好的用户体验，我也知道不希望它成为浏览器操作弹出窗口，无论如何都无法以编程方式打开。
这是我正在寻找的确切内容的 gif，
目前的尝试
据我了解（我可能是错的），从我读到的很多答案中，我几乎没有选择。
选项 1 - 注入 HTML 使用内容脚本注入 sidebar.html，该脚本中有一个侦听器，用于侦听来自后台脚本的消息以进行上下文菜单单击或浏览器操作单击。收到消息后，将运行以下内容脚本（contentscript.js），
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if ( request.action == "openSideBar" ) {
$.get(chrome.extension.getURL('../sidebar.html'),
function(data) {
$(data).appendTo('body');
});
}});
这是我的 sidebar.html
<!DOCTYPE html>
<html><head>
<title>I am Sidebar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="sidebar.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
</head><body>
<p>Hello World!</p>
</body></html>
选项 1a - 在页面中注入 sidebar.js 作为注入脚本（不推荐） 选项 1b - 使用 Sidebar.js 作为内容脚本与 sidebar.html 进行通信。因为我在 sidebar.js 中使用 Angular，所以我在这里遇到了一些复杂性，但如果这是我采取的路线，我可以解决这个问题。
选项 2 - 使用 iframe -
从那里阅读了很多答案，听起来大多数人都想在页面上显示一个窗口，使用 iframe 之类的东西
var iFrame = document.createElement ("iframe");
iFrame.src = chrome.extension.getURL ("sidebar.html");
document.body.insertBefore (iFrame, document.body.firstChild);
选项 3 - Shadow DOM
我什至不知道该怎么做。我什么也找不到。我确实找到的几个答案听起来与选项 1 相似。
到目前为止阅读的答案
Injecting chrome extension UI using shadow DOM
Injecting content script in dynamically created iframe
Chrome Extension - Injected Iframe not accessing Chrome browserAction or chrome.tabs or AngularJS
How to show a modal popup from the context menu?
Chrome extension inject sidebar into page
我一直在从一个问题跳到另一个问题，试图找到一种可靠的方法，但所有答案都指向其他问题。希望有人可以给出一个非常简单的答案，例如“Iframe 是最好的解决方法，因为某某”
【问题讨论】：
标签： javascript angularjs google-chrome google-chrome-extension