[Chrome Extension] Chrome Storage CRUD

20133 ワード
JavaScript 豆2粒 開発ログ テキストリンク
💡 Chrome Storageで拡張したCRUD

[環境]

  • [FE] HTML/CSS
  • [BE] Javascript/JQuery
  • [DB] Chrome Storage
  • Chrome Extension ( MV3 )

    • [ manifest.json ]


    Chrome Extensionスケルトンのような存在Manifestjsonを作成!
    manifestに記入するだけでChrome Extensionビューアプリケーションにアップロードできます.
    {
    "name": "Docong",
    "description": "Docong Extension",
    "version": "1.0",
    "manifest_version": 3",
    "action": {
        "default_popup": "popup.html"
    }
}
  • default popup:拡張プラグインアイコンをクリックして開くポップアップファイルパス

    • [ Popup HTML ]


    アイコンクリック時に表示されるポップアップHTML
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* ... */
    </style>
</head>
<body>
    <div id="container">
        <div id="add">
            <form id="add_form">
                <input class="add_rec_input" type="text" name="url" id="url" placeholder="URL">
                <br>
                <br>
                <button type="submit">Add</button>
                <button id="deleteAll">초기화</button>
            </form>
        </div>
        <div>
            <table>
                <tbody id ="list" >
                </tbody>
            </table>
        </div>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/popup.js"></script>
</body>
  • ラベルリスト
    • を入力するには、Inputラベルを追加します.
    動的表示
  • タブリストの表tbody宣言
  • JQueryスクリプト宣言
  • Popup.htmlで使用するポップアップウィンドウ.js宣言

    • [ Popup JS ]


    Popup HTMLで使用されるJQueryコード
    // Dom Load
$(document).ready(()=>{makeList();})

// Add URL Data
$(document).on('submit', '#add_form', (e)=>{
    e.preventDefault();
    const form_data = new FormData(document.getElementById('add_form'));
    var url = form_data.get('url');
    chrome.storage.sync.set({
        [url]:url
    });
    makeList();
})

// Clear Storage
$(document).on('click', '#deleteAll', (e)=>{
    chrome.storage.sync.clear();
    makeList();
})

// Delete List
$(document).on('click', '.listItem', (e)=>{
    chrome.storage.sync.remove($(e.target).val());
    makeList();
})

const makeList = () => {
    chrome.storage.sync.get((result) => {
        listHtml = "";
        for(value in result){
            listHtml += "<tr>";
            listHtml += "<td>"+value+"</td>";
            listHtml += "<td><button class='listItem' value="+value+">X</button></td>";
            listHtml += "</tr>";
        }
        $("#list").html(listHtml);
    });
}

    Chrome Storage

  • localStorageに似た記憶領域
  • は、
    • をキー値ペアとして記憶する.
  • sync:Chromeブラウザにログインするユーザー単位(ローカル単位より大きい!)
    local:装置単位
  • は使用明細書を格納する.jsonへの権限の追加
    • /* manifest.json */
...
"permissions":[
	"storage"
],
...
    More: https://developer.chrome.com/docs/extensions/reference/storage/

    Problems


    ストレージストレージ

  • の場合:RDBに詳しい私にとって、キー値形式の記憶は非常によく知られていません.
  • レッスン:記憶中の数字をIDとして記憶しようとしましたが、結果はさらに複雑になりました...!
    • ソリューション
  • :urlに一意の値しか入力しないので、キーと値をurlとして保存します.

    • 動的要素イベント

  • の場合:動的に追加されたButton ElementにClick Event
    • を追加する
  • コース
  • インライン関数の追加→chromeポリシーを使用して
    • を実行できません.
  • addEventHandler→DOMオブジェクトのライフサイクルの問題により、新しく作成されたElementにイベントが発生しません.
    • ソリューション
  • :動的に生成されたオブジェクトであっても、クラスベースのすべてのイベントを適用できるように、ドキュメントを変更します.

    • [結果]


    NextでのSVGの処理
    【テンプレート】素数試験(Miller-Rabin試験)