0

Problem

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?

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.

Here is a gif of what I am looking for exactly,

http://recordit.co/y2QdGrdzGa

Attempts so far

As far as I understand(I may be wrong) from a lot of answers I read out there, I have few options.

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');
     });
   }});

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>

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.

Option 2 - Using 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);

Option 3 - Shadow DOM

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.

Answers read so far

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

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"

Community
  • 1
  • 1
manutdfan
  • 285
  • 4
  • 18

2 Answers2

3

You can either use option 1b (using sidebar.js as content script) or option 2(using iframe).

But I would prefer option 2 because :

  1. You wont have to bootstrap your angular app every time you inject your frame if you are using angularjs.
  2. Your css files in iframe wont conflict with page UI .See my question : Using bootstrap.css as content script distorts gmail UI?
  3. You can put your entire application code inside iframe and use content script to inject frame and listen for messages only. You code would be easy to maintain and debug.
Community
  • 1
  • 1
Siddharth
  • 6,966
  • 2
  • 19
  • 34
  • thanks. Just selected your answer. On the same lines would you know if some sites can give problems injecting this iframe(won't show this iframe) ..... like sites, which are loaded using HTTPS, because my iframe is communicating with a backend. – manutdfan May 02 '16 at 17:19
  • @ManUnitedFan Some sites could see iframe injection as malicious activity. I have injected iframe in mail.google.com successfully. Though I think its worth a new question. – Siddharth May 02 '16 at 17:56
  • Just added it here. http://stackoverflow.com/questions/36988752/why-is-my-content-script-not-adding-iframe-based-sidepanel-to-some-sites-especia – manutdfan May 02 '16 at 18:05
0

The default popup is only shown after the user clicked on the browser action icon.

If you like to use a context menu item you cannot use Chrome's default popup (https://bugs.chromium.org/p/chromium/issues/detail?id=30491). That means you have to come up with another solution to inject HTML code for the user interface in the current web page. One reasonable approach is to inject an iframe. By using an iframe you can recreate an interface like that one you show in the gif.

jengeb
  • 393
  • 1
  • 7
  • 21