シンプルなChrome拡張機能を作成する方法

Chrome拡張機能の作成は、かなり簡単なプロセスです。完了すると、コンピューターでそれを使用して、ブラウザーの動作を強化できるようになります。

拡張機能が完全に機能する前にブラウザが必要とするいくつかの基本的なコンポーネントがあります。カスタム拡張機能をアップロードしたり、他のユーザーと共有したりせずにChromeで機能させる方法など、以下ですべてを説明します。

複雑なChrome拡張機能の構築は、以下に表示されるものよりもはるかに詳細なプロセスですが、一般的なプロセスは同じです。今日から使い始めることができるChrome拡張機能の作成方法については、読み続けてください。

ヒント ：自分の拡張機能がどれほど素晴らしいかを確認するには、これらの素晴らしいChrome拡張機能をチェックしてください。

Chrome拡張機能の作成方法

このガイドを使用して、お気に入りのウェブサイトのいくつかを一覧表示するシンプルなChrome拡張機能を作成します。完全にカスタマイズ可能で、更新も非常に簡単です。

対処方法：

拡張子を構成するすべてのファイルを保持するフォルダーを作成します。
この拡張子に必要なベースファイルを作成します：manifest.json 、 popup.html 、 background.html 、 styles.css 。
popup.htmlを開きますテキストエディタで次のすべてを貼り付け、終了したら必ず保存してください。

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

リンクとリンクテキストを自由に編集するか、Chrome拡張機能をそのままにしたい場合は、すべてを同じにしてください。

manifest.jsonを開きますテキストエディタで、以下をコピーして貼り付けます。

{
「update_url」：「https://clients2.google.com/service/update2/crx」、

「manifest_version」：2、
「名前」：「お気に入りのサイト」、
「説明」：「私のお気に入りのすべてのウェブサイト」、
「バージョン」：「1.0」、
「アイコン」：{
「16」：「icon.png」、
「32」：「icon.png」、
「48」：「icon.png」、
「128」：「icon.png」
}、

「背景」：{
「page」：「background.html」
}、

「browser_action」：{
「default_icon」：「icon.png」、
「default_title」：「お気に入りのサイト」、
「default_popup」：「popup.html」
}
}

このコードの食用領域には、名前が含まれます、説明、および default_title 。

styles.cssを開きます次のコードを貼り付けます。これは、ポップアップメニューを装飾して、見やすく、さらに使いやすくするためのものです。

#myUL {
list-style-type：none;
パディング：0;
マージン：0;
幅：300px;
}

#myUL li a {
境界線：1px solid #ddd;
margin-top：-1px;
背景色：＃f6f6f6;
パディング：12px;
text-decoration：none;
font-size：18px;
色：黒;
表示：ブロック;
font-family：「NotoSans」、sans-serif;
}

#myUL li a：hover：not（.header）{
背景色：#eee;
}

CSSファイルで変更できることはたくさんあります。 Chrome拡張機能を作成した後、これらのオプションを試して、好みに合わせてカスタマイズしてください。

拡張機能のアイコンを作成し、 icon.pngという名前を付けます。 Chrome拡張機能フォルダに配置します。上記のコードでわかるように、16×16ピクセル、32×32などのサイズに個別のアイコンを作成できます。

ヒント： Googleには、Chrome拡張機能の作成に関する詳細情報があります。ここに示した簡単な手順を超える他の例と高度なオプションがあります。

Chromeにカスタム拡張機能を追加する方法

Chrome拡張機能を作成したので、次にブラウザに追加して、作成したすべてのファイルを実際に使用できるようにします。カスタム拡張機能のインストールには、通常のChrome拡張機能のインストール方法とは異なる手順が含まれます。

Chromeメニューから、その他のツールに移動します>拡張機能 。または、 chrome：// extends /と入力しますアドレスバーに表示されます。
開発者モードの横にあるボタンを選択しますまだ選択されていない場合。これにより、独自のChrome拡張機能をインポートできる特別なモードがオンになります。

開梱したものをロードを使用しますそのページの上部にあるボタンをクリックして、上記の手順1で作成したフォルダを選択します。

プロンプトが表示された場合は、それを受け入れます。それ以外の場合は、カスタムビルドのChrome拡張機能が、ブラウザの右上隅にある他の拡張機能と一緒に表示されます。

Chrome拡張機能の編集

Chrome拡張機能が使用できるようになったので、変更を加えて独自の拡張機能にすることができます。

styles.cssファイルは拡張子の表示方法を制御するため、リスト全体のスタイルを調整したり、フォントの色や種類を変更したりできます。 W3Schoolsは、CSSでできるさまざまなことすべてについて学ぶのに最適なリソースの1つです。

Webサイトがリストされている順序を切り替える、またはサイトを追加または削除するには、popup.htmlファイルを編集します。編集内容は、URLと名前のみに留めてください。

などの他のすべての文字および、必須であり、変更しないでください。 W3SchoolsのHTMLチュートリアルは、その言語についてさらに学ぶのに適した場所です。

デジタルツールを使用して古い写真や破損した写真を復元する方法

ダイナミックディスクをベーシックディスクに変換する方法

iCloud パスワード Chrome 拡張機能:使い方
PC で Google Chrome を使用していて、iPhone と Mac では Safari を使用している場合は、両方のブラウザーでパスワードを探し回って再挿入しなければならないことにうんざりしているでしょう。しかし、それはもうそれほど面倒なことではありません。 Apple が iCloud for Windows バージョン 12 とともにリリースした iCloud パスワード Chrome 拡張機能により、iCloud キーチェーンから Windows 上の Chrome にパスワードを自動入力できるようになりました。さらに、iCloud パスワードを使用すると、Chr
Google Chrome を高速化する 5 つの簡単な方法
選択によるものであれ、デフォルトの反射によるものであれ、Google Chrome は、私たちがインターネットをサーフィンするために愛用しているブラウザのようなものです。高速で信頼性が高く、安全であるため、Web ブラウザーを選択する際の最初の選択肢となっています。デスクトップ、Android、iOS のいずれで Chrome を使用していても、すべてのプラットフォームで非常にうまく機能します。 Google Chrome には適切な最小限のインターフェイスが付属しており、Web の閲覧中に必要なすべての適切なツールセットが強力に詰め込まれています。しかし、多くの時間を Chrome