■目次
ブラウザ操作開発者ツールChrome設定Chrome拡張機能Chrome拡張機能の作成ChromeRecoderプッシュ通知IE
■ブラウザ操作
■初期設定 「Windows.txt」の「初期設定メモ」も参照 ■キャッシュ 【Chrome】ブラウザの頑固なキャッシュを完全に削除するスーパーキャッシュクリア方法 | CMSマニュアルサイト http://cms.aiosl.jp/manual/kowaza/1077/ Google Chromeで素早くキャッシュをクリアしてページを正しく表示させる:Google Chrome完全ガイド - @IT https://www.atmarkit.co.jp/ait/articles/1811/14/news038.html
■開発者ツール
■Chrome シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita https://qiita.com/baby-degu/items/6f367b61d245d5bc217b 開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools - Speaker Deck https://speakerdeck.com/cybozuinsideout/chrome-developer-tools Chrome DevTools の知っておくと便利かも機能 - Qiita https://qiita.com/gen_abe/items/185445cc0f9f326eee72 ■Safari MacOSでSafariの場合、メニューの 「開発 → レスポンシブ・デザイン・モードにする」 を選択することで、色々な端末のサイズで表示できる Simulate responsive web content on Apple devices - Apple サポート https://support.apple.com/ja-jp/guide/safari-developer/dev84bd42758/mac
■Chrome設定
■セーフブラウジング 設定 → プライバシーとセキュリティ → セキュリティ → セーフブラウジング 「標準保護機能」を「保護強化機能」に変更 ■カーソルブラウジング F7キーを押すことで切り替えられる 【Chrome】点滅するカーソルの正体と解除方法を解明! | マイペース革命 https://wariichi.com/what-is-this-flashing-cursor/ ■リモートデスクトップ 「Google.txt」の「Chromeリモートデスクトップ」も参照
■Chrome拡張機能
■画面のスクリーンショットを撮る GoFullPage - Full Page Screen Capture - Chrome ウェブストア https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl... この拡張で撮影できた 長いページでも、一つの画像として保存してくれる ■画面の操作内容を録画する Google Chrome用スクリーンレコーダー - Chrome ウェブストア https://chrome.google.com/webstore/detail/screen-recorder-for-googl/eclbecdgdoahkliaijlpkigldlkojjdn... この拡張で録画できた (似たような拡張は、他にもあるみたい) 1. 拡張をインストールすると、拡張の中に「Google Chrome用スクリーンレコーダー」が追加されるのでクリック 2. 「キャプチャ画面」をクリックする 3. 「画面を共有する」ダイアログが開くので、「Chromeタブ」から録画したい対象のタブを選択 4. 「共有」をクリック 5. 対象のタブが開き、録画が開始される 6. 任意の操作を行い、完了したら元のタブで「キャプチャの停止」ボタンをクリック 7. 画面下部に「コンピュータにダウンロードする」が表示されているので、ここからダウンロードする で操作内容を保存できた また、保存したファイルをChromeにドラッグ&ドロップすると再生された 上記はChrome想定になるので、もし「こういう環境でこういう操作をしたい」をいただければ、引き続き調査いたします。
■Chrome拡張機能の作成
■拡張機能の作成 Chrome拡張機能の作り方。誰でもかんたんに開発できる! https://original-game.com/how-to-make-chrome-extensions/ Google Chrome Extensionの作り方 第1回 〜Hello World編〜 | Risaiku リサイク https://risaiku.net/archives/1653/ Chromeの拡張機能を自作する - 虎の穴開発室ブログ https://toranoana-lab.hatenablog.com/entry/2020/04/23/174421 Getting started - Chrome Developers https://developer.chrome.com/docs/extensions/mv3/getstarted/ Chrome拡張作ったら異世界転生した件 - Qiita https://qiita.com/zakuroishikuro/items/5275f783a2d8b37db212 ボタンをクリックすると、アラートが表示されるだけの拡張を作成する manifest.json
{ "name": "Hello World", "description": "クリックするとアラートを表示します。", "version": "1.0.0", "manifest_version": 3, "permissions": ["activeTab","scripting"], "background": { "service_worker": "background.js" }, "action": { "default_icon": { "16": "img/icon_16.png", "24": "img/icon_24.png", "32": "img/icon_32.png" }, "default_title": "アラートを表示" } }
background.js
chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target: {tabId: tab.id}, function: () => { alert('ハロー!ワールド'); } }); });
また、以下にアイコン画像を配置する icon_16.png icon_24.png icon_32.png Chromeで「chrome://extensions/」を開き、右上のスイッチで拡張機能を有効にする 「パッケージ化されていない拡張機能を読み込む」から、上の手順で作成した拡張機能を読み込む アイコンをクリックすることで実行できるが、「chrome://extensions/」のページで実行すると 「Uncaught (in promise) Error: Cannot access a chrome:// URL」 というエラーになるので注意 通常の http や https から始まるページを開いた状態で実行する必要がある ■タブを参照 Chrome拡張機能でタブの情報を取得する方法 - Qiita https://qiita.com/plumfield56/items/99f5cfc1bf5fd03e8040 ChromeのアクティブなタブのURLを取得する | e-JOINT.jp https://e-joint.jp/1041/ ■公開 自作したChrome拡張を公開する方法!【画像付き解説】 | すずきライフ https://belltree.life/chrome-extension-release/ Google Chrome Extensionの作り方 番外編 〜ストアへの公開編〜 | Risaiku リサイク https://risaiku.net/archives/2162/ manifest.json が入った CloseRightTabs フォルダをZIP形式で圧縮する 以下から公開作業を行う デベロッパー ダッシュボード https://chrome.google.com/webstore/devconsole 公開しようとすると、以下のエラーになった ・詳細な説明が短すぎるか、指定されていません。25 文字以上で指定してください。 ・アイテムを公開する前に、連絡先メールアドレスを指定する必要があります。[アカウント] タブで連絡先メールアドレスを入力してください。 ・少なくとも 1 つのスクリーンショットまたは動画が必要です。 ・アイテムを公開するには、データの使用が Google のデベロッパー プログラム ポリシーに準拠していることを表明していただく必要があります。この表明は、アイテム編集ページの [プライバシーへの取り組み] タブで行うことができます。 それぞれ以下のように対応した ・「ストアの掲載情報 → 商品の詳細 → 説明」を充実させた ・「ハンバーガーメニュー → アカウント → 連絡先メールアドレス」を登録した ・「ストアの掲載情報 → 画像アセット → スクリーンショット」を登録した ・「プライバシーへの取り組み → データ使用」で「私は以下の開示が正しいものであることを表明します。」の各回答にチェックを入れた 審査に提出できたが、以下の理由で承認されなかった 違反の参照 ID: Purple Potassium 違反事項: アイテムに実装されている方法 / プロパティでは、次の権限をリクエストする必要がない。 tabs 修正方法: 上記の権限を削除します。アイテムで使用するプロパティは、これらの権限をリクエストしなくても引き続き機能します。 不要な権限を削除して再度申請すると公開できた 以下に公開された https://chrome.google.com/webstore/detail/close-right-tabs/ahdnifnjcpeklloobmgkkidkaedkodii?hl=ja …が、ブラウザに導入してしばらくすると、強制的に無効化される? 拡張機能一覧を確認すると、 「この拡張機能は Chrome ウェブストアのポリシーに違反しています。」 と警告が表示されている キャッシュの問題なのか、承認されて公開もされたのに何か違反があるのか ブラウザを再起動すると警告は非表示になる 引き続き確認する また、インストール時も 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 のように警告が表示され、導入後も同メッセージが表示されている ポリシー違反と関係があるかは不明だが、引き続き確認したい 「Google Chrome」の「保護強化機能」を有効化して鉄壁のセキュリティに - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1329712.html 数日経つと、いつの間にか 「この拡張機能は Chrome ウェブストアのポリシーに違反しています。」 の警告は表示されなくなっていた いったん違反状態になると、キャッシュの影響でしばらく同状態が続く…という仕様なのか 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 の警告は表示されたままなので、これは引き続き確認したい 拡張機能をインストールして管理する - Chrome ウェブストア ヘルプ https://support.google.com/chrome_webstore/answer/2664769 「セーフ ブラウジング保護強化機能を利用したインストール」 の項目にて 「Chrome でセーフ ブラウジング保護強化機能を有効にした場合、インストールする拡張機能が信頼できない場合に警告が表示されます。」 「拡張機能は、Chrome ウェブストアのデベロッパー プログラム ポリシーを遵守するデベロッパーによって作成されている場合に信頼できると判断されます。」 「新しいデベロッパーの場合、通常は信頼できると判断されるまでに数か月かかります。」 のように紹介されている いったんはストアの掲載内容を充実させるくらいか まずはブラウザの拡張機能一覧にアイコンを表示させたい 一週間ほど経つと、何もしていなくても 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 が表示されなくなっていた …が、環境によっては表示されたままだった。謎
■ChromeRecoder
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ https://toranoana-lab.hatenablog.com/entry/2021/11/18/121835
■プッシュ通知
未検証 Web Pushでブラウザにプッシュ通知を送ってみる - Qiita https://qiita.com/tomoyukilabs/items/217915676603fda73b0a [改訂版] Web Pushでブラウザにプッシュ通知を送ってみる - Qiita https://qiita.com/tomoyukilabs/items/2ae4a0f708a1af75f13e Webブラウザのプッシュ通知を簡単に実装!「Push.js」の使い方を徹底解説|ferret https://ferret-plus.com/6035 意外とカンタン!流行のWebプッシュ通知はJavaScriptでサクッと実装できる - WPJ https://www.webprofessional.jp/browser-notification-api/ ブラウザでプッシュ通知を実装してみた | キャスレーコンサルティング株式会社 https://www.casleyconsulting.co.jp/blog/engineer/293/ ServiceWorker を使ってプッシュ通知実装 - Qiita https://qiita.com/OMOIKANESAN/items/3fa9c84b6d388b06e02e
■IE
IE11のサポートは、2022年6月15日に終了する いよいよ完全終了へ。Internet Explorer(IE)サポート終了スケジュール:Tech TIPS - @IT https://atmarkit.itmedia.co.jp/ait/articles/1503/11/news134.html 【朗報】IE があと 5か月で廃止、Windows Update で自動的に起動不能へ。→「大混乱起きそう」「役所とか大丈夫なんですかね」「弊社…」 - Togetter https://togetter.com/li/1833525