独自のブラウザの拡張機能を作成する
こんにちは、dev🖖
これは私の最初の記事です.あなたの読書を楽しみ、次の記事を参照してください🙂
拡張子とは
拡張機能は、ブラウザ上で実行し、ブラウザやウェブサイトに追加機能を提供する小さなソフトウェアです.それは非常に簡単にユーザーエクスペリエンスの面でアクセス可能です.また、ソフトウェア開発者のために開発するのは非常に簡単です.
一歩一歩を造りましょう
この記事では、我々が使用するIPアドレスを見つける非常に小さくシンプルなプラグインを作成します.私たちはIpify IP情報を取得するAPI.
1 -マニフェスト.JSONファイル
まず最初にフォルダを作成してプロジェクトを開始します.このフォルダに必ず追加する最初のファイルはマニフェストになります.JSONこのファイルはプラグインの内容のようなガイドファイルになります.
{
"name": "IP Finder",
"version": "1.0",
"description": "Find your ip with this extension",
"manifest_version": 3
}
2 -ブラウザで開発者モードを有効にする
プラグインをテストするには、ブラウザで開発者モードを有効にする必要があります.あなたは中で見つけることができますchrome://extensions)ブラウザのセクション.
このステップの後に、あなたのプラグインをインストールすることができますあなたのスクリーンに、荷を開けられたボタンは現れます.今すぐあなたの拡張フォルダを選択し、テストを開始します.
3 -プラグインの表示と機能
HTMLとJSを使用して、拡張機能の概要と機能を作成します.まず、アプリケーションを作成します.JSとアプリ.プロジェクトへのHTMLファイル.これらのファイルをマニフェストファイルに導入し、それらを利用できるようにします.
{
"name": "IP Finder",
"version": "1.0",
"description": "Find your ip with this extension",
"manifest_version": 3,
"web_accessible_resources":[
{
"matches":[
"<all_urls>"
],
"resources": [
"app.js"
]
}
],
"action": {
"default_popup": "app.html"
}
}
<!doctype html>
<html lang="en">
<head>
<style>
body{min-width: 400px;}
</style>
</head>
<body>
<h1>Find My IP</h1>
<p id="result"></p>
<button id="find">Find</button>
<script src="app.js"></script>
</body>
</html>
document.getElementById("find").onclick = function() {
// Create Request
let xmlHttp = new XMLHttpRequest();
// Request to ipify for ip information
xmlHttp.open( "GET", "https://api.ipify.org?format=json", false );
xmlHttp.send( null );
try{
// Cast request response to JSON object
let obj = JSON.parse(xmlHttp.responseText);
// Display IP information to our extension
document.getElementById("result").innerHTML = obj.ip;
}catch(e){
// Display error information to our extension
document.getElementById("result").innerHTML = "An Error Occurred";
}
};
全文用Github ahmettkartal
Reference
この問題について(独自のブラウザの拡張機能を作成する), 我々は、より多くの情報をここで見つけました https://dev.to/ahmettkartal/create-your-own-browser-extension-3emcテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol