Chrome拡張をやってみる

Chrome 拡張いじれれば、色々便利じゃまいかと思ってとりあえず気の赴くままに作ってみた。
仕様は、現在開いているURLを markdown 書式でメモリにコピーするプラグイン

あくまで目標は Chrome 拡張をやってみるということで…

Hello world から

どこから初めていいかわからなければ、とりあえずは Hello world からは基本かなと。
これをやるにあたって、まずはこのサイト

なるほど manifest.json が実質の肝なのか、ならこっちも調べて

manifest.json

{
    "name": "Url md copy",
    "version": "0.1.0",
    "manifest_version": 2,
    "description": "Sample Chrome Extension",
    "author": "white-azalea",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "scripts/main.js"
            ]
        }
    ]
}

scripts/main.json

window.alert('Hello extension!');

インストールには

blog.janjan.net

そして適当なサイトを開くと…

f:id:white-azalea:20201220120758p:plain

因みに、ここでスタイルをいじくったりできる模様。
Virtual dom 要素は厳しい気がする…（未検証）

尚、Chrome 拡張機能のいくつかの機能は、この js では利用できないらしい。
例えばタブアクセス API の類は、background か、popup の中のJsでしかコールできない模様。

stackoverflow.com

やってみないとわからないが意外と罠が多い。

ポップアップの追加

ということでポップアップを作成する。

manifest.json は次のように修正。

{
    "name": "Url md copy",
    "version": "0.1.1",
    "manifest_version": 2,
    "description": "Sample Chrome Extension",
    "author": "white-azalea",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "scripts/main.js"
            ]
        }
    ],
    "browser_action": {
        "default_icon": {},
        "default_title": "Copy as markdown",
        "default_popup": "pages/popup.html"
    },
    "permissions": [
        "tabs"
    ]
}

やったことは browser_action の追加と、permissions の記述。
permissions はよくわからんが、Chrome 機能にアクセスする際に依存する機能を指定する箇所らしい。

そして、pages/popup.html はこんな感じ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/css/popup.css" rel="stylesheet">
    <script src="/scripts/popup.js"></script>
</head>
<body>
    <header class="header">
        <h1>Markdown URL</h1>
    </header>
    <div class="container">
        <form id="setting_form">
            <div>
                <span>markdown:</span>
                <input type="text" name="markdown" id="markdown" readonly />
            </div>
            <button type="button" id="copy">Copy</button>
        </form>
    </div>
</body>
</html>

なんの捻りもないです。
対応するJavaScript は

chrome.tabs.getSelected(tab=>{
    console.log(`Title: ${tab.title}`);
    console.log(`URL: ${tab.url}`);

    let markdownInput = document.getElementById("markdown");
    let copyButton = document.getElementById("copy");

    markdownInput.value = '[' + tab.title + '](' + tab.url + ')';

    copyButton.onclick = (event) => {
        let text = markdownInput.value;
        navigator.clipboard.writeText(text).then(e => {
            alert('コピーできました');
        });
    };
});

スタイルは自分の好きにして。
ここまでやると

f:id:white-azalea:20201220143011p:plain

f:id:white-azalea:20201220143032p:plain

[技術をかじる猫](https://white-azalea.hatenablog.jp/)

その他

ハマったポイント

chrome 拡張機能はモノによっては、popup/background とかでしか利用できない
デバッグ方法が、各機能で異なる。
- 通常の content_scripts は単純に F12 キー押した際のログで確認できる
- ポップアップ画面拡張機能のデバッグは、ポップアップを右クリックして検証する
  [
- バックグラウンドタスクのデバッグは、「拡張機能>プラグインの詳細」を開き
  
  「詳細」から検証を開く

技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

Hello world から

ポップアップの追加

その他

参考: