What is the best way to show a sidebar/popup window on a context menu item click?

Question

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 ba

Answer 1

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.

Answer 2

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.