Awesome Screenshot Minus でキャプチャできないのを直す
- カテゴリ:
- ソフトウェア/ツール/OSS
- コメント数:
- Comments: 0
◆ Chrome の仕様変更に対応できてないので動くように修正
◆ scroll 関係を body じゃなく html 要素から取得するように変更
◆ scroll 関係を body じゃなく html 要素から取得するように変更
最近 Awesome Screenshot Minus でスクリーンショットが撮れなくなってました
表示中のものは撮れるのに ページ全体を撮ろうと Capture entrire page を押すとプレビューが空になっています
本来はスクロールして一番下までいくはずなのにスクロールすらしていません
この現象はちょっと前から起きてましたが その時はそこまでスクリーンショットが必要でもなく撮れないならまぁいいか ってくらいでした
ですが今日はどうしても全体のスクリーンショットが撮りたかったんです
なのに相変わらず修正されてません
発生時期とスクロールされていないということでだいたい原因は予想できたので直してみました
javascripts\content_script.js
を修正します
フルパスはこんな感じになりますが 人によっては多少違うかもしれません
やることは
これ
を
これ
に置換します
あとは拡張機能の管理画面で再起動(有効のチェックをいったんはずしてもう一回つける)するとちゃんと全体がスクリーンショットされます
これまでは webkit と blink は body 要素で
を読み書きすればよく
他の Firefox や IE などは html 要素で
を読み書きすれば良かったのですが 最近 Chrome は Firefox などと同じ html タグに変更されました
そのせいで ブラウザごとにどっちの要素を見るか指定してる実装のライブラリやアプリは全滅しました
ちゃんと実際にどっちが使われてるかチェックしたり とりあえず両方動かせばいいやって実装してる場合は回避できてます
今回は Chrome の拡張機能なので document.body が固定でコードに書かれていました
なので それを document.documentElement に置換すれば直ります
ただし body ならではの appendChild などのメソッドやプロパティを参照してるコードも含まれるので 置換対象は document.body.scroll にしています
ところで Edge は Chrome にあわせるために IE の頃とは変更して body を使うようになっていたのですが Chrome が IE と同じにしてしまって置いてけぼりのちょっとかわいそうな状態になってます
次のアップデートくらいで Chrome に合わせて変更されそうな予感がします
こういうことがあるのでブラウザごとにどっちと決めてしまうのではなくて使われてる方を動的に検出するのが賢い方法ですね
Edge が Chrome に合わせたり Chrome がやっぱりもとに戻すようなことがあるたびに動かなくなって修正必要なのはどうかと思いますから
……まぁ一時的な対処である今回の修正はそこまでしてませんけど
表示中のものは撮れるのに ページ全体を撮ろうと Capture entrire page を押すとプレビューが空になっています
本来はスクロールして一番下までいくはずなのにスクロールすらしていません
この現象はちょっと前から起きてましたが その時はそこまでスクリーンショットが必要でもなく撮れないならまぁいいか ってくらいでした
ですが今日はどうしても全体のスクリーンショットが撮りたかったんです
なのに相変わらず修正されてません
発生時期とスクロールされていないということでだいたい原因は予想できたので直してみました
修正する内容
先に直し方ですが 拡張機能のフォルダの中のjavascripts\content_script.js
を修正します
フルパスはこんな感じになりますが 人によっては多少違うかもしれません
C:\Users\nexpr\AppData\Local\Google\Chrome\User Data\Default\Extensions\bnophbnknjcjnbadhhkciahanapffepm\4.0.1.0_0\javascripts\content_script.js
やることは
これ
document.body.scroll
を
これ
document.documentElement.scroll
に置換します
あとは拡張機能の管理画面で再起動(有効のチェックをいったんはずしてもう一回つける)するとちゃんと全体がスクリーンショットされます
どうして直るの
ページ全体のスクロールを制御する要素はブラウザによって違いますこれまでは webkit と blink は body 要素で
document.body.scrollTop
を読み書きすればよく
他の Firefox や IE などは html 要素で
document.documentElement.scrollTop
を読み書きすれば良かったのですが 最近 Chrome は Firefox などと同じ html タグに変更されました
そのせいで ブラウザごとにどっちの要素を見るか指定してる実装のライブラリやアプリは全滅しました
ちゃんと実際にどっちが使われてるかチェックしたり とりあえず両方動かせばいいやって実装してる場合は回避できてます
今回は Chrome の拡張機能なので document.body が固定でコードに書かれていました
なので それを document.documentElement に置換すれば直ります
ただし body ならではの appendChild などのメソッドやプロパティを参照してるコードも含まれるので 置換対象は document.body.scroll にしています
ところで Edge は Chrome にあわせるために IE の頃とは変更して body を使うようになっていたのですが Chrome が IE と同じにしてしまって置いてけぼりのちょっとかわいそうな状態になってます
次のアップデートくらいで Chrome に合わせて変更されそうな予感がします
こういうことがあるのでブラウザごとにどっちと決めてしまうのではなくて使われてる方を動的に検出するのが賢い方法ですね
Edge が Chrome に合わせたり Chrome がやっぱりもとに戻すようなことがあるたびに動かなくなって修正必要なのはどうかと思いますから
……まぁ一時的な対処である今回の修正はそこまでしてませんけど