0

I'm working on a Chrome extension that'll need to display some messages to the users, be them instructions or errors. Right now the former are completely missing and errors are displayed in alert boxes.

We came up with this

  • alert(message); Not great, especially for instructions. Currently used.
  • chrome.notifications are not meant to be used this way: they appear off-center and disappear before the user may be done reading.
  • appending html content to the current tab, which we see as a last resort since we don't want to risk conflicts

Is there a better way to inform the user?

fregante
  • 29,050
  • 14
  • 119
  • 159

2 Answers2

2

There is some other ways to do that, although none of them can be what you are looking for. Anyway, I'll share my solutions

1) Customizing default popup

You can append customized content to your popup window and let your users informed by setting the badge text:

chrome.browserAction.setBadgeText({text: "error"})

See https://developer.chrome.com/extensions/browserAction#method-setBadgeText

I think this is the best solution to show errors because your user won't be annoyed

2) Creating a new tab

To show instructions most extensions I used creates a new tab

chrome.tabs.create({url: "instructions.html"});

See https://developer.chrome.com/extensions/tabs#method-create

This occurs usually after the user installs the extension.

Filipe Arruda
  • 628
  • 1
  • 5
  • 13
  • 1) The problem with the popup solution is that we're already using that button as an on/off button, so we can't also have a popup. If we enable the popup it will open on every click. – fregante Jul 08 '14 at 16:43
  • 2) Showing instructions in a new tab could be good for the first usage, but I'd rather show any possible message in-context, without moving the user's focus away – fregante Jul 08 '14 at 16:44
0

We ended up using humane.js to show messages on the page since it only required two small files, both of which have been "isolated" to avoid any possible CSS class clash with the existing content.

Still not ideal since I'd rather not having to add any elements/CSS to the page, but that's the best we got now.

fregante
  • 29,050
  • 14
  • 119
  • 159
  • You should look into [Shadow DOM](http://stackoverflow.com/questions/20897395/how-to-reset-all-styles-of-a-div-and-decedents-back-to-chrome-defaults/20901571#20901571) to provide isolation you need. – Xan Jul 08 '14 at 13:41
  • Doesn't that still need an element to fill the shadow DOM with? – fregante Jul 08 '14 at 13:44
  • 1
    It's still less intrusive than a whole UI, and no chance of a style clash. In theory, at least. – Xan Jul 08 '14 at 13:46