3

拡張機能アイコンをクリックすると、Chrome用のBufferアプリの動作がフローティングdivとは少し異なることに気付きました。これはどのように達成されますか？

追加ウィンドウが生成されていないので、新しいウィンドウでこれを行うとは思わない。

基本的に必要なのは、アイコンがクリックされたときに表示されるシックボックスです。

これがどのように行われるかについての洞察をいただければ幸いです。

4

1 に答える 1

0

バックグラウンド ページの API を使用して、ブラウザのアクション ボタンがクリックされたときのクリック イベントをリッスンします。

その API ページへのリンクは次のとおりです。

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

createPopup.js

あなたのhtmlは文字列になります。個人的には以下のように書くことをお勧めします。

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

次に、HTML が大きくなるにつれて、最初の引用と最後の列の編集を行うことができます'+

さて、ここでやりたいことは、src プロパティを設定せずに、html を iframe に配置することです。このような：

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;

なぜ？したがって、あなたのものはページの残りのスタイルを取りません。

次に、 translateX またはトランジションの左/右位置を実行して、要素をページにスライドさせることができます。

于 2012-04-11T05:38:27.567 に答える