Question

问题

当用户点击上下文菜单项（我通过扩展程序背景页创建）或用户点击浏览器操作图标时，我想在网页上显示弹出窗口或侧边栏窗口。这个侧边栏窗口将显示一些HTML标记，我将在我的扩展目录中的单独文件（sidebar.html）中，此sidebar.html将由sidebar.js管理（也是我目录中的文件）我的问题是什么是显示此sidebar.html的最佳方式吗？

我不希望它成为我的用户更好用户体验的模态或灯箱，我也知道不希望它成为浏览器操作弹出窗口，无论如何都无法以编程方式打开。

这是我正在寻找的GIF，

http://recordit.co/y2QdGrdzGa

到目前为止尝试

据我所知（我可能错了）我从那里读到了很多答案，但我没什么选择。

选项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

我从一个问题跳到另一个问题试图找到一个可靠的方法，但所有的答案都指向别的东西。希望有人可以给出一个非常简单的答案，例如＆＃34; Iframe是最好的方式，因为某某＆＃34;

Answer 1

您可以使用选项1b （使用sidebar.js作为content script）或选项2 （使用iframe）。< / p>

但我更喜欢选项2，因为：

如果您使用angularjs，则每次注入框架时都不需要引导角度应用程序。
iframe中的css文件不会与页面UI冲突。请参阅我的问题： Using bootstrap.css as content script distorts gmail UI?
您可以将整个应用程序代码放在iframe中，并使用内容脚本注入框架并仅侦听消息。您的代码很容易维护和调试。

Answer 2

默认弹出窗口仅在用户单击浏览器操作图标后显示。

如果您想使用上下文菜单项，则无法使用Chrome的默认弹出式窗口（https://bugs.chromium.org/p/chromium/issues/detail?id=30491）。这意味着您必须提出另一种解决方案，为当前网页中的用户界面注入HTML代码。一种合理的方法是注入iframe。通过使用iframe，您可以重新创建一个类似于您在gif中显示的界面。

在上下文菜单项上单击显示侧栏/弹出窗口的最佳方法是什么？

2 个答案: