Microsoft Edge | 表示サイト上でカスタムCSSとJavaScriptを実行する拡張機能「User JavaScript and CSS」の使い方
![Microsoft Edge | 表示サイト上でカスタムCSSとJavaScriptを実行する拡張機能「User JavaScript and CSS」の使い方](https://1-notes.com/wp-content/uploads/2023/02/Microsoft-edge.png)
Microsoft Edgeで、表示サイト上でカスタムCSSとJavaScriptを実行する拡張機能「User JavaScript and CSS」の使い方を紹介しています。
Windows11 22H2
Microsoft Edge バージョン 112.0.1722.58
User JavaScript and CSSについて
「User JavaScript and CSS」は、ブラウザで表示しているサイトまたはページにて、独自に作成したカスタムCSSとJavaScriptを実行する事ができるようになる拡張機能です。
User JavaScript and CSS – Chrome ウェブストア
用途は様々ありますが、CSSやJavaScriptを使った開発などに役に立ちます。
User JavaScript and CSSの使い方
「User JavaScript and CSS」をブラウザにインストール後、拡張機能アイコンをツールバーに配置します。
カスタムしたCSSとJavaScriptを実行したいサイト・ページ上で拡張機能アイコンをクリックすると、メニューが表示されますので、最初はサイトURLの部分を選択しエディターを開きます。
![拡張機能アイコンをクリックしてURLを選択する](https://1-notes.com/wp-content/uploads/2023/05/拡張機能アイコンをクリックしてURLを選択する.png)
![拡張機能アイコンをクリックしてURLを選択する](https://1-notes.com/wp-content/uploads/2023/05/拡張機能アイコンをクリックしてURLを選択する.png)
エディターではサイト単位でカスタムしたCSS(右)、JavaScript(左)を編集できるようになっています。
※ キャプチャ画像はダークモードになっています。
![エディターではJavaScriptとCSSが編集できる](https://1-notes.com/wp-content/uploads/2023/05/エディターではJavaScriptとCSSが編集できる-1024x431.png)
![エディターではJavaScriptとCSSが編集できる](https://1-notes.com/wp-content/uploads/2023/05/エディターではJavaScriptとCSSが編集できる-1024x431.png)
CSSとJavaScriptを編集したら再び、拡張機能アイコンを開いて、サイト単位で有効に切り替えます。
![有効にするとCSSとJavaScriptが実行される](https://1-notes.com/wp-content/uploads/2023/05/有効にするとCSSとJavaScriptが実行される.png)
![有効にするとCSSとJavaScriptが実行される](https://1-notes.com/wp-content/uploads/2023/05/有効にするとCSSとJavaScriptが実行される.png)
有効にするとカスタムしたCSSとJavaScriptがサイト上で実行されるようになります。
※ 要、再読み込み
「User JavaScript and CSS」はWEBサイトのカスタマイズの仮テストや、WEBツールに独自機能を実装して強化したりと、利用する機会があります。
ディスカッション
コメント一覧
まだ、コメントがありません