エラー

Javascript

基本的な書き方(“manifest_version”:3)

(https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3)

マニフェストファイルが読み込めません

ファイルが一通り出来上がったら、Chromeを開いて拡張機能の管理画面で「パッケージ化されていない拡張機能を読み込む」からインストールする

拡張機能のソースコードを読む方法

(https://nullnull.dev/f1df8b70-fac8-4d43-8cc4-2cd9af80f6e0)

webサイトのソースコードが絡むときはservice_workerではなく、content_scriptsを使うこと

service_workerを使って、manifest.jsonに

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "image downloader",
    "description": "そのページのIMGを一括ダウンロード",
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": "icon.png"
    }
}

と書き、background.jsで

const downloadImage = async (imageSrc) => {

        const img = await fetch(imageSrc);
        const blob = await img.blob();
        const imgURL = URL.createObjectURL(blob);

        const mimeTypeArray = blob.type.split('/');
        const extension = mimeTypeArray[1];

        const a = document.createElement('a');
        a.href = imgURL;
        a.download = `fileName.${extension}`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

}

// 拡張機能のアイコンがクリックされたら関数を実行
chrome.action.onClicked.addListener( () => {
    for (const image of document.querySelectorAll('img')) {
        downloadImage(image.src)
            .then( () => {
                console.log('Download complete');
            })
            .catch( (error) => {
                console.log('Download failed. ${error}');
            });
    }
});

と書いたところ、

ReferenceError: document is not defined　というエラーになった。

StackOverflowによると、document.querySelectorなどを使う場合は、content_scriptsをつかうべきらしい。(https://stackoverflow.com/questions/73157165/error-handling-response-referenceerror-document-is-not-defined)

なので、manifest.jsonには

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "image downloader",
    "description": "そのページのIMGを一括ダウンロード",
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content-scripts.js"],
            "run_at": "document_end"
        }
    ],
    "action": {
        "default_icon": "icon.png"
    }
}

と書き、content-scripts.jsには

const downloadImage = async (imageSrc) => {

        const img = await fetch(imageSrc);
        const blob = await img.blob();
        const imgURL = URL.createObjectURL(blob);

        const mimeTypeArray = blob.type.split('/');
        const extension = mimeTypeArray[1];

        const a = document.createElement('a');
        a.href = imgURL;
        a.download = `fileName.${extension}`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

}

const sleep = (time) => new Promise((r) => setTimeout(r, time));

window.onload = async function() {
    for (const image of document.querySelectorAll('img')) {

        await sleep(1000);
        
        downloadImage(image.src)
            .then( () => {
                console.log('ダウンロード完了');
            })
            .catch( (error) => {
                console.log('Download failed. ${error}');
            });
    }
}

と書いたところ、上手くいった。

BACK