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

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

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

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

ヒント(Tip)：独自の拡張機能がどれほど素晴らしいかを確認するには、これらの素晴らしいChrome拡張機能(these amazing Chrome extensions)を確認してください。

Chrome拡張機能を作成する方法

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

これが何をすべきかです：

  • 拡張子を構成するすべてのファイルを保持するフォルダーを作成します。
  • この拡張機能に必要なベースファイルを作成します：manifest.json、popup.html、background.html、styles.css。
  • テキストエディタでpopup.htmlを開き(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>

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

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

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

「manifest_version」：2、
「name」：「お気に入りのサイト」、( “name”: “Favorite Sites”,)
「description」：「すべてのお気に入りのウェブサイト」、( “description”: “All my favorite websites.”,)
「version」：「1.0」、
「icons」：{
「16」：「icon.png」、
「32」：「icon.png」、
「48」：「icon.png」、
「128」：「icon.png」
}、

   “ background”：{ 
        “ page”：” background.html”
}、

    「browser_action」：{
        「default_icon」：「icon.png」、
        「default_title」：「お気に入りのサイト」、(        “default_title” : “Favorite Sites”,)
        「default_popup」：「popup.html」
    }
}

このコードの食用領域には、name、description、およびdefault_titleが含まれます。

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

#myUL {
list-style-type：none;
   パディング：0; (   padding: 0;)
   マージン：0; (   margin: 0;)
   幅：300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  マージントップ：-1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  パディング：12px; (  padding: 12px;)
  テキスト装飾：なし; (  text-decoration: none;)
  フォントサイズ：18px; (  font-size: 18px;)
  色：黒; (  color: black;)
  表示ブロック; (  display: block;)
  font-family：'Noto Sans'、sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

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

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

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

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

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

  • Chromeメニューから、 [その他のツール(More tools )] >[拡張機能(Extensions)]に移動します。または、アドレスバーに「chrome://extensions/
  • まだ選択されていない場合は、開発者モード(Developer mode)の横にあるボタンを選択します。これにより、独自のChrome(Chrome)拡張機能をインポートできる特別なモードがオンになります。

  • そのページの上部にある[解凍済みのロード(Load unpacked )]ボタンを使用して、上記の手順1(Step 1)で作成したフォルダーを選択します。

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

Chrome拡張機能の編集

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

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

Webサイトがリストされている順序を切り替える、またはサイトを追加または削除するには、popup.htmlファイルを編集します。編集内容は、 URL(URL)と名前のみに留めてください。<li>や<html>などの他のすべての文字は必須であり、変更しないでください。W3SchoolsのHTMLチュートリアル(HTML Tutorial on W3Schools)は、その言語についてさらに学ぶのに適した場所です。



結衣 田中

About the author

私は、Excel や PowerPoint などの Microsoft Office ソフトウェアの使用経験があるコンピューターの専門家です。また、Google が所有するブラウザーである Chrome の使用経験もあります。私のスキルには、書面および口頭での優れたコミュニケーション、問題解決、批判的思考が含まれます。


Related posts