Here's how to create a chrome extension

Ideas
1

Here’s how to create a chrome extension, code from " How to Create a Google Chrome Extension: Image Grabber | HackerNoon"

in BSS create a new project
add following to index.html

<body style="width: 600px; min-height: 120px;">
    <div class="container my-3">
        <div class="row">
            <div class="col-12 text-center"><button id="grabBtn" class="btn btn-success" type="button">Collect Images</button></div>
        </div>
        <div id="row_gallery" class="row"></div>
    </div>
</body>

create a manifest.json file

{
    "name": "Image Grabber",
    "description": "Extract all images from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "48":"assets/img/logo_48.png",
        "64":"assets/img/logo_64.png",
        "96":"assets/img/logo_96.png"
    },
    "action": {
        "default_popup":"index.html"
    },
    "permissions": ["scripting", "activeTab"],
    "background":{}
}

create a popup.js file

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
        var tab = tabs[0];
        if (tab) {
            execScript(tab);
        } else {
            alert("There are no active tabs");
        }
    })
})

function execScript(tab) {
    chrome.scripting.executeScript(
        {
            target:{tabId: tab.id, allFrames: true},
            func:grabImages
        },
        onResult
    )
}

function grabImages() {
    const images = document.querySelectorAll("img");
    var url = Array.from(images).map(image=>image.src);    
    console.log(url);
    return url;
}

function onResult(frames) {
    if (!frames || !frames.length) { 
        alert("Could not retrieve images from specified page");
        return;
    }
    const imageUrls = frames.map(frame=>frame.result).reduce((r1,r2)=>r1.concat(r2));
    imageUrls.forEach(function(x) {
        document.getElementById('row_gallery').innerHTML += '<div class="col"><img style="width:100px;" src="'+x+'"/></div>';
    });
}

when exporting use advanced “Export Script” reference to run.bat file

@ECHO OFF
cd %1
move "C:\PATH_TO_PROJECT_FOLDER\assets\js\manifest.json" "C:\PATH_TO_PROJECT_FOLDER\manifest.json"
exit

in Chrome go to “Manage Extensions”
Check the developer checkbox
Click on “Load Unpacked”
Browse to exported folder
then try the extension.
Hope this helps…

1 Like
2

Interesting, thank you.

You could streamline this further by changing your move command to:

move "%1\assets\js\manifest.json" "%1\manifest.json"
1 Like
3

thanks @richards, that definitely helps.

1 Like