Web版PowerPointの印刷時に警告を出す

Web版PowerPointの罠

PowerPointのWeb版から印刷して紙をよく無駄にするので対策を考えてみた

スタイル崩壊

PC版PowerPointで印刷した時とスタイルが変わってしまい、思っていたデザインにならず、無駄な紙が量産されてしまう

Officeにログインしようとするとエラーを出す共有PCを使う機会が多いため、Web版を使うが、印刷の時だけはPC版を利用しないといけないのをよく忘れる

どうせまたやらかすので拡張機能で対策することにした

方法と結果

1. Buttonで発火
2. ポップアップで発火
3. ダウンロードしたら実行

1.Buttonで発火

印刷ボタンのidをイベントリスナーで監視する

上手くいかない
Web版Officeのページが動的すぎるため？
（単純に技術不足）

2.ポップアップで発火

印刷時に出てくるポップアップのclassの出現を監視する

上手くいかない
Buttonで発火と同じ理由？

3.ダウンロードしたら実行

印刷するPDFデータをダウンロードしているか監視する

通信を監視し続けて、
https://jpc-powerpoint.officeapps.live.com/pods/printhandler.ashx
から始まるアドレスからGETしたら実行させたら上手くいった

ここからコードを拝借

印刷時に警告を出してみる

content.js

window.alert();

なぜかWeb版Officeのページだけalertが出ない
開発者ツールを見るとエラーが出ていたので別の方法にする

デスクトップ通知

background.js

chrome.notifications.create(Notification, {
		"type": "basic",
		"title": "タイトル",
		"iconUrl": "128.png",
		"message": "メッセージ"
	});

上手く動いたのでOK

最終形態

folder
├ manifest.json
├ background.js
└ images
   ├ pptx16.png
   ├ pptx48.png
   └ pptx128.png

manifest.json

{
  "manifest_version": 3,
  "name": "PawapoPrintStopper",
  "version": "1.0.0",
  "description": "ブラウザ版パワポで印刷するときに通知を送信します",
  "icons": {
    "16": "images/pptx16.png",
    "48": "images/pptx48.png",
    "128": "images/pptx128.png"
  },
  "permissions": [
    "webRequest",
    "tabs",
    "notifications"
  ],
  "host_permissions": [
    "https://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
     "default_icon": "images/pptx16.png"
  }
}

background.js

var Notification = "notification"

chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    var string  = details.url;
    var pattern = 'https://jpc-powerpoint.officeapps.live.com/pods/printhandler.ashx';
    if(string.indexOf(pattern) === 0){
	chrome.notifications.create(Notification, {
		"type": "basic",
		"title": "印刷はちょっと待って！",
		"iconUrl": "images/pptx128.png",
		"message": "ブラウザ版で印刷するとスタイルが崩れるよ！ダウンロードしてからPC版で開こう！"
	});

    }
  },
  {urls: ['<all_urls>']},
  []
);

アイコン素材を拝借　ありがとうございます
https://icooon-mono.com/12063-pptx（パワーポイント）アイコン/

まとめ

とりあえず動く拡張機能を作ることができた
ところで共有PCのchromeって拡張機能保持してくれるのか？

最後に

沢山の記事を参考にさせていただきました
chromeの拡張機能を作るのは初めてだったのですが、参考にさせてもらったページが分かりやすく、二日で完成させることが出来ました！

ありがとうございました！

参考文献