什么是显示在上下文菜单项侧边栏/弹出窗口点击的最好方法？ [英] What is the best way to show a sidebar/popup window on a context menu item click?
问题描述
问题
我想，当用户点击一个上下文菜单项（这是我通过我的扩展背景页创建），或在浏览器上的操作图标，用户点击显示在网页上的弹出窗口或者侧边栏中的窗口。该边栏窗口将在我的扩展目录中显示一些HTML标记，我将有一个单独的文件（sidebar.html），这sidebar.html将sidebar.js（也是我的目录中的文件），我的问题是什么来管理为表示本sidebar.html的最佳方式？
I want to show a popup window or a sidebar window on webpages when the user clicks on a Context Menu item(which I create through my extension background page) or when the user clicks on the browser action icon. This sidebar window will display some HTML markup, which I will have in a separate file(sidebar.html) in my extension directory and this sidebar.html will be managed by sidebar.js(also a file in my directory) My question is what is the best way to show this sidebar.html?
我不希望它是一个模式或更好的UX我的用户灯箱，我也知道不希望它成为一个浏览器操作弹出，不能被编程反正打开。
I do not want it to be a modal or a lightbox for better UX for my users and I also know do not want it to be a Browser Action Pop Up, which cannot be opened programmatically anyways.
下面是一个GIF什么，我期待了整整
Here is a gif of what I am looking for exactly,
尝试至今
据我了解（我可能是错的），从很多答案我读出来，我有几个选择。
As far as I understand(I may be wrong) from a lot of answers I read out there, I have few options.
的选项1 的-Inject HTML
注射sidebar.html使用内容脚本，其中有一个监听器它来听从上下文菜单中点击或浏览器操作点击后台脚本消息。当接收到消息时，下面的内容的脚本（contentscript.js）运行时，
Option 1 -Inject HTML Inject sidebar.html using a content script, which has a listener in it to listen to messages from background script for context menu clicks or browser action clicks. When a message is received, following content script(contentscript.js) is run,
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
Here is my 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角，但我能说出来，如果这是我走的路线。
Option 1a - Inject sidebar.js in the page as an injected script(not recommended) Options 1b - Use Sidebar.js as a content script to communicate with sidebar.html. I had some complexities here since I am using Angular in sidebar.js, but I can sort that out if this is the route I take.
的选项2 的 - 使用iframe -
Option 2 - Using Iframe -
从阅读很多答案在那里，这听起来像谁想显示一个页面上的一个窗口，使用iframe大多数人来说，这样的事情
From reading a lot of answers out there, it sounds like most people who want to show a window on a page, use iframe, something like this
var iFrame = document.createElement ("iframe");
iFrame.src = chrome.extension.getURL ("sidebar.html");
document.body.insertBefore (iFrame, document.body.firstChild);
选项3 - 暗影DOM
Option 3 - Shadow DOM
我甚至不知道如何去这件事。我找不到任何东西。答案我发现听起来像它的夫妇是类似的选项1。
I don't even know how to go about this. I could not find anything. Couple of answers I did find sounded like it is similar to option 1.
阅读答案迄今
<一个href=\"http://stackoverflow.com/questions/28809381/injecting-chrome-extension-ui-using-shadow-dom\">Injecting使用影子DOM
<一个href=\"http://stackoverflow.com/questions/23939547/injecting-content-script-in-dynamically-created-iframe?rq=1\">Injecting在动态创建的iframe 内容脚本
<一个href=\"http://stackoverflow.com/questions/26558280/chrome-extension-injected-iframe-not-accessing-chrome-browseraction-or-chrome\">Chrome扩展 - 注入的iframe不访问Chrome的browserAction或chrome.tabs或AngularJS
<一个href=\"http://stackoverflow.com/questions/33736233/how-to-show-a-modal-popup-from-the-context-menu?answertab=active#tab-top\">How从上下文菜单显示模式弹出？
我已经从一个问题跳到另一个试图找到一种可靠的方法，但所有的答案指向别的东西。希望有人可以只举一个非常简单的答案，如iframe是去它的最好方式，因为某某
I have been jumping from one question to another trying to find a solid way, but all answers point to something else. Hoping someone can just give a very simple answer like "Iframe is the best way to go about it because so and so"
推荐答案
您可以使用选项1B （使用 sidebar.js 为内容脚本）或选项2 （使用 IFRAME ）。
You can either use option 1b (using sidebar.js as content script) or option 2(using iframe).
不过，我想preFER选项2，因为：
But I would prefer option 2 because :
- 您不会在每次如果你正在使用angularjs注入你的帧的时间来引导你的角度应用程序。
- 您的css文件：
<一href=\"http://stackoverflow.com/questions/33142655/using-bootstrap-css-as-content-script-distorts-gmail-ui\">Using bootstrap.css为内容脚本扭曲了Gmail的用户界面？ - 您可以把你的整个应用程序code里面的iframe和使用内容脚本注入框架和监听仅消息。您code很容易维护和调试。
在页面的UI。看到我的问题的iframe不会冲突
这篇关于什么是显示在上下文菜单项侧边栏/弹出窗口点击的最好方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
