何？
ウィンドウが複数のタブを持つとき、
ひとつのタブをドラッグして新しい単独のウィンドウに分離することができる。
この場合、もとのウィンドウが最大化されていれば最大化される。
最大化されていなければ、もとのウィンドウのサイズを引き継ぐ。
Firefoxのタブをマウス操作だけで別ウィンドウに開く - Qiita
言葉にするとややこしいが、↑の新しいウィンドウを常に最大化したい。
対象
- Firefox 57
コード
メインはこれだけ
const OFF = false;
const ON = true;
var state = ON;
browser.browserAction.onClicked.addListener(tab => {
state = !state;
if (state) {
browser.browserAction.setTitle({title: 'Maximize Detached Tab : ON'});
browser.browserAction.setIcon({path: 'icon/switch.svg'});
} else {
browser.browserAction.setTitle({title: 'Maximize Detached Tab : OFF'});
browser.browserAction.setIcon({path: 'icon/switch-off.svg'});
}
});
chrome.tabs.onDetached.addListener(tabId => {
if (!state) {
return
}
(async () => {
const parentWindowId = (await browser.tabs.get(tabId)).windowId;
// tabs.query({active:true, index:0}) のtabs.find tab.id == tabIdを対象にしていたが、index0への結合に対応していなかったので、分離後ウィンドウのtab数が1の場合のみを最大化トリガーに変更
if ((await browser.windows.get(parentWindowId, {populate:true})).tabs.length != 1) {
return;
}
chrome.windows.update(parentWindowId, {
state: 'maximized'
});
})();
});
// chromeがmanifestでのsvg設定に対応していないため初期化(Firefoxには不要)
browser.browserAction.setIcon({path: 'icon/switch.svg'});
onDetachedでタブの切り離しを検知できるので、そこから操作する。
発火タイミングはドラッグのホールドを離した後。
(見返してstate ON OFF まわりひどい)
ソースコード
.
├── background.js
├── browser-polyfill.js
├── icon
│ ├── switch-off.svg
│ └── switch.svg
├── LICENSE
├── manifest.json
└── README.md
バックグラウンドのみ。
khsk/webextension-MaximizeDetachedTab: 分離したタブウィンドウを最大化するwebextension
すこしは技術的なふにゃふにゃと参考資料
browser-polyfill.jsはChromeでも動けるようにしたかったので設置したが、現在はFirefox専用なので不要。
ちょいちょいChrome用の記述が残っている。
付随して、chromeとbrowserの違いがまだわかっていない。
署名するつもりがないので、使うときはファイルを落として一時的なアドオンとして読み込むか、
Developer Editionならzipをxpiに変えれば未署名でも使えるそうな。
xpiを上げるためにGitHubを久しぶりに使ったが、拡張子がNGなので結局zipリリース。
WebExtensionをさわりだけ触るなら、というか自分は
初めての拡張機能 - Mozilla | MDN
を動かしてみて、
2 つめの拡張機能 - Mozilla | MDN
を眺めたあと、
JavaScript API 群 - Mozilla | MDN
とにらめっこする。した。
などと低説を垂れ流すよりは高説を列挙した方がよかろうもん。
- ツリー型タブのWebExtensionsへの移行のおはなし - Qiita
- 自作FirefoxアドオンをWebExtensionsに書き直したのでポエム書く - Qiita
- Firefox WebExtension & Chrome Extensionの開発メモ - Qiita
- chrome extensionとfirefox addonで同じコードを動かす - Qiita
- Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
やはりMDNが丁寧なので、他の記事は副読本のように楽しく読める。
やりたいこと(最大化)に関しては、100%他人のコードを使ったことを書いておく。ねば。
アドオンの設定画面をインスペクタで調査1→GitHubで検索
の流れでコードが見れるのは、こんなに簡単で良いのだろうかと思った。
OSSバンザイ。
技術的でないふにゃふにゃ
ブラウザを複数の固定レイアウトで使っていて、大きく見たいときはタブを分離して最大化していたのでその手間が減るかなと思った。
小さいものを作るときに肝要なのは、検索しすぎないこと(既に目的のものが作られていると凹む)だと思う。
しかしアドオン界隈は目的のアドオンを探すことが難しい気がする。検索力が足りないだけか。
最初はコンテントスクリプトとバックグラウンドスクリプトの違いがわからず、動かないと混乱してました。流し読みの弊害。
Chromeは一時的なアドオンでも読み込んだままなので、(数日かけて)両方で動かしたいならChromeで開発の方がいいかも。
APIを眺めていても、単体で簡単にぱっと作れそうなものはあまり思いつかない。
過去のカオスとセキュアを目指した話を聞いた後なので、だいぶガチガチかなという印象。
console.logもjsエラーもコンソールに出力されるので、旧グリモンより作りやすい印象。
Stylish→Greasemonkey→WebExtension
とやれることが増えてきた印象だが、オンオフを自作したりいちアドオンいちボタンになるので、増殖しそう。
Greasemonkeyパネルに収まりオンオフ編集が楽な利点があるので(あと署名)無条件にこっちが良いという上位互換ではなさそう。
初っ端からChromeと動作が違うという問題にぶち当たったので、WebExtensionならFirefoxでもChromeでも(Edgeでも)(簡単に)動かせるという希望は砕かれた感。
やはり色々苦労はありそう。
そもそもポリフィル提供されている時点で既に苦労しているような気がする。
-
最大化のジェスチャーのformのname ↩