flottant popup.html div

Question

J'ai remarqué que le Buffer app pour le chrome fait les choses un peu différemment avec un div flottant lorsque l'icône de l'extension est cliquée. Comment cela est-il réalisé?

Je ne crois pas qu'ils le fassent dans une nouvelle fenêtre, car je ne vois pas de fenêtre d'addition créée.

Fondamentalement, ce dont j'ai besoin est une boîte d'épaisseur à afficher lorsque l'icône est cliquée.

Tout aperçu sur la façon dont cela est fait serait apprécié.

Answer 1

Ils utilisent une API de cette page d'arrière-plan, pour écouter l'événement de clic lorsque le bouton d'action du navigateur est cliqué.

Voici un lien vers cette page API:

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){}) 
}); 

createPopup.js

Vous n'êtes html sera dans une chaîne. Personnellement, je recommande d'écrire cela comme ceci:

var widgetHtml = 
    '<div id="main">    '+ 
    ' <p>some stuff goes here</p>'+ 
    '</div>'; 

Alors que votre html grandit, vous pouvez faire une modification de la colonne de la citation de début et de fin '+

Ok, maintenant ce que vous voulez faire est de mettre votre code HTML dans un iframe, mais sans définir de propriété src. Comme ceci:

var iframe = document.createElement('iframe'); 
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2 
iframe.contentDocument.body.innerHTML = widgetHtml; 

POURQUOI? Ainsi, votre contenu ne prend pas en compte les styles du reste de la page. Um, puis vous pouvez faire une translationX ou une transition gauche/droite pour glisser l'élément dans la page.