Chrome拡張機能を構築する方法
繰り返しの作業で立ち往生していて、プロセスを自動化できたらいいのにと思ったことはありませんか？
空の検索結果ページが表示されるだけで、適切な拡張子を検索するのに時間を費やすのにうんざりしていませんか？
幸い、Chromeユーザーの場合は、8つの簡単な手順でChrome拡張機能を作成できます。
どうやって知るの？キーワード調査システムを合理化するために、独自のUbersuggest GoogleChrome拡張機能を作成しました。
この投稿では、Chrome拡張機能を作成して、タスクを革新し、生産的な作業に戻る方法を紹介します。
Chrome拡張機能とは何ですか？
Google Chrome拡張機能は、Chromeブラウザにインストールして機能を変更できるプログラムです。
これらの拡張機能は、ブラウザの特定の機能を自動化し、既存の動作を変更し、ソフトウェアの利便性を向上させるのに役立ちます。 SEOを改善できるChrome拡張機能もあります。
Chrome拡張機能は、HTML、JavaScript、CSSスクリプトで構築されており、基本的にChromeストアにアップロードされる小さなウェブサイトです。
Chrome拡張機能と通常のウェブサイトの唯一の違いは、拡張機能にマニフェストファイルが含まれていることです。マニフェストファイルは、実行する特定の機能を提供します。
拡張機能について考えるもう1つの方法は、ブラウザーのエクスペリエンスを変更するコードの一部としてです。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
たとえば、Grammarly拡張機能を使用すると、作成時にコピーを編集および変更できます。 LastPass拡張機能を使用すると、パスワードマネージャーをブラウザー内に保持できます。
ここにあなたが検討するための私たちのお気に入りのGoogleChrome拡張機能の13があります。
Chrome拡張機能で何ができますか？
カスタムビルドの拡張機能は、単一のタスクを実行できます。このタスクを正しく機能させるには、このタスクを狭く定義し、理解しやすいものにする必要があります。
すべてが拡張機能を単一の目標に向けている限り、複数のコンポーネントまたは機能を含めることができます。
Chrome拡張機能は、ページアクションまたはブラウザアクションのいずれかを使用して機能します。
ページアクションは、特定のページに固有のアクションです。
ブラウザのアクションは、ブラウザのどこにいても関係があります。
また、ユーザーインターフェースは、ユーザーフレンドリーでわかりやすいものである必要があります。これらは、単一のアイコンからGmailアイコンのことまでさまざまですが、インターフェースのページ全体を上書きすることもできます。
最終的な成果物は、ユーザーがダウンロードしてインストールするzip形式の.crxパッケージになります。
Chrome拡張機能を作成する必要があるのはなぜですか？
Google Chromeは、世界で最も広く使用されているブラウジングソフトウェアです。 W3Counterによると、Chromeは総市場シェアの65.3パーセントを占めています。
ブラウザエクスペリエンスに簡単なアクションを追加する場合は、Chrome拡張機能も作成する必要があります。
Chrome拡張機能と通常のアプリケーションの利点は、多くの場合、構築と保守が簡単なことです。 Chrome拡張機能は単一の機能を中心に構築されているため、作成にかかる時間とスキルが少なくて済みます。
拡張機能の構築は、まったく新しいWebページの構築よりもはるかに短い時間で済むことがよくあります。
ブラウザを変更するためのシンプルで効果的な方法が必要な場合は、拡張機能を構築するのが最善の方法です。
Chrome拡張機能は、ウェブトラフィックを改善することもできます。詳細については、以下の動画をご覧ください。
Chrome拡張機能を成功させる理由は何ですか？
Google Chrome拡張機能が成功すると、タスクや機能が簡素化され、生産性が向上します。
あなたがeコマースのウェブビルダーであり、競合他社のショップを調査していると想像してみてください。 Koala Inspector拡張機能をインストールすると、Shopifyがアクセスしたウェブサイトを構築したかどうかを確認できます。また、使用されたテーマ、新しい更新が行われたかどうかを確認したり、製品の統計を表示したりすることもできます。
もう1つの例であるFacebook用ニュースフィード駆除ツールは、ニュースフィードをブロックしてタスクに集中できるようにすることで、生産性を向上させるのに役立ちます。これはシンプルですが効果的な機能であり、日常のワークフローを改善するのに役立ちます。
これらの拡張機能はどちらも、ユーザーエクスペリエンスを向上させるシンプルな機能を実行します。 Chrome拡張機能を構築するときは、シンプルさを念頭に置いてください。それが拡張を成功させる秘訣です。
Chrome拡張機能を作成するためのステップバイステップガイド
次に、Chrome拡張機能を構築します。
これはGoogleChromeで行う必要があることに注意してください。これは当たり前のように思えるかもしれませんが、すべての人がデフォルトのブラウザとしてChromeを使用しているわけではありません。
通常のChromeユーザーでない場合は、これらの手順を開始する前に必ずChromeをインストールしてください。
また、このプロセスを進めるときは、作業を頻繁に確認してください。終了した後よりも、すぐにコーディングエラーを修正する方がはるかに簡単です。
Chrome拡張機能を構築するステップ1：拡張機能に必要なものを決定する
Chrome拡張機能を構築するための最初のステップは、機能を決定することです。
それは何になりますか
o？それはどのように見えるでしょうか？
Google AdWordsキャンペーンの拡張機能を作成する場合は、それがどのように機能するかを決定するときです。
すべての拡張機能をGoogleChromeストアにアップロードするには、アイコンが必要です。始める前に、必ずアイコンを作成または外部委託してください。
拡張機能が何をするのか、そしてどのように見せたいのかがわかったら、それを構築し始めることができます。
以下では、現在のページの背景色を変更できる拡張機能を作成する方法を示します。
Chrome拡張機能を構築するステップ2：拡張機能のディレクトリを作成する
Chrome拡張機能の構築を開始するには、拡張機能のすべてのファイルを格納する新しいディレクトリを作成する必要があります。
Chromeがプラグインをロードするには、拡張ファイルを含むフォルダーを指す必要があるため、これは重要です。
拡張機能に必要なすべてのファイルをこのディレクトリに追加できます。
Chrome拡張機能を作成するステップ3：拡張機能のマニフェストファイルを作成する
次のステップは、拡張機能のマニフェストファイルを作成することです。
このファイルは、拡張機能を正しくロードする方法をChromeに指示します。
マニフェスト.jsonというファイルを作成し、ディレクトリに追加します。
次に、必要になる可能性のあるコードをマニフェストファイルに追加します。
私たちの目的では、コードは次のようになります。
{{
「name」：「GettingStartedExample」、
「説明」：「拡張機能を構築してください！」、
「バージョン」：「1.0」、
「manifest_version」：3
}
Chrome拡張機能を構築するステップ4：拡張機能をChromeにロードし、エラーを確認する
次に、拡張機能をテストして、Chromeで実行されることを確認します。
次の手順を実行します：
Google Chromeブラウザでchrome：// extensionsに移動します
右上隅にある[開発者モード]チェックボックスをオンにします
「アンパックをロード」をクリックして、ファイル選択ダイアログを表示します
拡張ディレクトリを選択します
グーグルクローム拡張機能のロード画面の例
拡張機能が有効な場合は、すぐに読み込まれるはずです。
無効な場合は、ページの上部にエラーメッセージが表示されます。この場合は、エラーを探して修正し、拡張機能の読み込みを再試行してください。
ここで人々が犯す最も一般的なエラーは構文エラーです。すべてのコンマと角かっこを再確認し、正しくフォーマットされていることを確認してください。
また、拡張機能の横にある[有効]ボックスがオンになっていることを確認して、ライブでのパフォーマンスを確認できるようにします。
Chrome拡張機能を構築するステップ5：バックグラウンドスクリプトを開発する
次に、拡張機能に何をすべきかを指示するためのバックグラウンドスクリプトを追加する必要があります。
まず、extensionsディレクトリ内にbackground.jsという名前のファイルを作成します。
次に、スクリプトを追加します。
{{
「name」：「GettingStartedExample」、
「説明」：「拡張機能を構築してください！」、
「バージョン」：「1.0」、
「manifest_version」：3、
"バックグラウンド"： {
「service_worker」：「background.js」
}
}
このファイルは、追加の手順をスキャンする必要があることをChromeに警告します。
構築している拡張機能には、バックグラウンドスクリプト内にruntime.onInstalledのリスニングイベントも必要です。
onInstallリスナー内で、拡張機能はストレージAPIを使用して値を設定します。これにより、複数の拡張コンポーネントを実行してその値を編集できます。
color = ‘＃3aa757’;
chrome.runtime.onInstalled.addListener（（）=> {
chrome.storage.sync.set（{color}）;
console.log（ ‘デフォルトの背景色は％cgreenに設定されています’、 `color：$ {color}`）;
}）;
ほとんどのAPIは、マニフェストの「権限」フィールドに登録する必要があります。このような：
{{
「name」：「GettingStartedExample」、
「説明」：「拡張機能を構築してください！」、
「バージョン」：「1.0」、
「manifest_version」：3、
"バックグラウンド"： {
「service_worker」：「background.js」
}、
「許可」：[「ストレージ」]
}
次に、拡張機能の管理ページに戻り、[再読み込み]をクリックします。
[ビューの検査]の新しいフィールドが表示されるはずです。背景ページを読む青いリンクも付随します。
Chrome拡張機能ビルダーインターフェースの例
リンクをクリックすると、「デフォルトの背景色が緑に設定されています」という背景スクリプトのコンソールログが表示されます。
コンテンツスクリプトを追加して、ページごとのスクリプトを実行することもできます。
コンテンツスクリプトは、マニフェストファイルに直接追加する必要があります。
Chrome拡張機能を構築するステップ6：ユーザーインターフェースを作成する
拡張機能には、ポップアップからツールチップなど、さまざまなユーザーインターフェイスを含めることができます。
インターフェイスの設計を開始するには、マニフェストにブラウザアクションを登録する必要があります。
この例では、ポップアップを使用します。コードは次のようになります。
<！DOCTYPE html>
<html>
<頭>
<link rel =” stylesheet” href =” button.css”>
</ head>
<本体>
<button id =” changeColor”> </ button>
</ body>
</ html>
マニフェストを機能させるには、マニフェスト内でこのコードを宣言する必要があります。
これを行うには、マニフェストにアクションを追加し、popup.htmlをアクションのdefault_popupとして設定します。
スクリプトは次のようになります。
{{
「name」：「GettingStartedExample」、
「説明」：「拡張機能を構築してください！」、
「バージョン」：「1.0」、
「manifest_version」：3、
"バックグラウンド"： {
「service_worker」：「background.js」
}、
「許可」：[「ストレージ」]、
"アクション"： {
「default_popup」：「popup.html」
}
}
この特定のポップアップはCSSスクリプトを参照しているため、ディレクトリに別のファイルを追加する必要があります。適切な名前を付け、次を追加します。
ボタン {
高さ：30px;
幅：30px;
概要：なし;
マージン：10px;
境界線：なし;
border-radius：2px;
}
button.current {
ボックスシャドウ：0 0 0 2px白、
0 0 04px黒;
}
この例では、ポップアップボタンにも色を追加する必要があります。後で、この色はページの背景にも使用されます。
次のコードを含むpopup.jsという名前のファイルを作成してディレクトリに追加します。
//ユーザーの好みの色でボタンを初期化します
changeColor = document.getElementById（“ changeColor”）;とします。
chrome.storage.sync.get（“ color”、（{color}）=> {
changeColor.style.backgroundColor = color;
}）;
これにより、popup.htmlからボタンが取得され、色の値が要求されます。次のように、popup.htmlのpopup.jsにスクリプトタグを含めます。
<！DOCTYPE html>
<html>
<頭>
<link rel =” stylesheet” href =” button.css”>
</ head>
<本体>
<button id =” changeColor”> </ button>
<script src =” popup.js”> </ script>
</ body>
</ html>
そこから、バッジを追加して拡張機能の状態を表示できます。たとえば、バッジは、拡張機能がアクティブ化されているかどうか、オンかオフかをユーザーに通知できます。
機能性とその下の水滴を示すアイコン
ツールバーアイコンは、default_iconsフィールドのアクションに分類されます。
ディレクトリ内に必要な画像を配置してから、画像の使用方法を拡張機能に指示します。
{{
「name」：「GettingStartedExample」、
「説明」：「拡張機能を構築してください！」、
「バージョン」：「1.0」、
「manifest_version」：3、
"バックグラウンド"： {
「service_worker」：「background.js」
}、
「許可」：[「ストレージ」]、
"アクション"： {
「default_popup」：「popup.html」、
「default_icon」：{
「16」：「/ images / get_started16.png」、
「32」：「/ images / get_started32.png」、
「48」：「/ images / get_started48.png」、
「128」：「/ images /get_started128.png」
}
}
}
画像の場合、16×16および32×32のサイズをお勧めします。すべてのアイコンは正方形である必要があります。そうしないと、歪んでしまう可能性があります。
アイコンを指定しない場合、Chromeはデフォルトのアイコンを追加します。
Chrome拡張機能のユーザーインターフェースを設計するときは、シンプルで使いやすいものにしてください。
グーグルは、すべての拡張機能インターフェースがブラウジング体験に気を散らすのではなく、追加するべきだと言っています。
先に進む前に、拡張機能をリロードして、すべてが正しく見えることを確認してください。
Chrome拡張機能を構築するステップ7：ロジックを追加する
ロジックは、ユーザーインターフェイスの相互作用を促進します。
含めたユーザーインターフェイスオプションにロジックスクリプトを追加します。
ロジックは、ボタンがクリックされたときに何をするかなど、特定のアクションを実行するように拡張機能に指示できます。
たとえば、popup.jsスクリプトを使用した場合は、その最後にロジックを含める必要があります。
この例では、次のスクリプトを使用できます。
//ボタンがクリックされたら、setPageBackgroundColorを現在のページに挿入します
changeColor.addEventListener（“ click”、async（）=> {
let [tab] = await chrome.tabs.query（{active：true、currentWindow：true}）;
chrome.scripting.executeScript（{
ターゲット：{tabId：tab.id}、
関数：setPageBackgroundColor、
}）;
}）;
//この関数の本体は、内部のコンテンツスクリプトとして実行されます
// 現在のページ
関数setPageBackgroundColor（）{
chrome.storage.sync.get（“ color”、（{color}）=> {
document.body.style.backgroundColor = color;
}）;
}
関数setPageBackgroundColor（）{
chrome.storage.sync.get（“ color”、（{color}）=> {
document.body.style.backgroundColor = color;
}）;
}
このコードは、プログラムで挿入されたコンテンツスクリプトをトリガーします。これにより、ページの背景色が以前に追加したボタンと同じ色に変わります。
ここから、拡張機能が完全に機能するはずです。新しい追加はすべてベルとホイッスルになります。
Chrome拡張機能を構築するステップ8：拡張機能をテストする
マーケティングでのA / Bテストと同様に、拡張機能を継続的にテストして、すべてが機能することを確認することが重要です。
自分でテストするか、他の人にテストしてもらいます。
他の人にテストしてもらう場合は、直感的に使用できることを確認するための指示を与えずにテストしてください。
必要に応じて変更を加えてから、拡張機能を再度テストします。
拡張機能を起動した後でも、継続的に最適化および改善できます。これが、UbersuggestChrome拡張機能2.0を入手した方法です。
満足したら、すぐに使用できます。
Chrome拡張機能の作成を練習できますか？
拡張機能をChromeストアにアップロードすると、ライブで使用できるようになります。
拡張機能を一般公開したくない場合は、いつでもGitHubリポジトリを作成して、他のユーザーがクローンを作成できるようにすることができます。
これには、他のユーザーにソースコードへのアクセスを許可する必要があるため、GitHubに何かをアップロードする前に、これを必ず検討してください。
拡張機能に飛び込む前に、オープンソースのサンプルを試すこともできます。
Chrome拡張機能のサンプルは、GoogleのGitHubで入手できます。
結論
カスタムのGoogleChrome拡張機能を作成することは、ブラウザの機能を改善し、最適なユーザーエクスペリエンスを作成するための優れた方法です。
eriences。
さらに、ツールはWebサイトへのトラフィックを増やすことができるため、そのエクスペリエンスを変更すると、ビジネスに新しいリードがもたらされる可能性があります。
最も強力なChrome拡張機能のいくつかは、あなたと同じように人々によって構築されたことを忘れないでください。
拡張機能を希望の場所に配置することは学習曲線かもしれませんが、友人や将来のクライアントに披露するためのエキサイティングな新機能がある場合は、それだけの価値があります。
