CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-devtools
LeandroS
LeandroS

Reputation: 61

Chrome Extension for Scraping

I am learning to develop a chrome extension.

It must visit a website and add some tags to the DOM.

I checked many other questions in StackOverflow, but I couldn't find the answer.

Here is my code for testing:

manifest.json

{
    "name": "Flags",
    "description": "Highlight the prices of the products.",
    "version": "1.0",
    "permissions": ["scripting", "declarativeContent", "activeTab", "tabs", "downloads", "*://*/*"],
    "manifest_version": 3,
    "icons": {
      "48": "/48.png",
      "128": "/128.png"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "48": "/48.png",
            "128": "/128.png"
        }
    }
}

popup.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="assets/css/popup.css">
    </head>
    <body>
        <div id="notify-wrapper">
            <div id="notify-header">
            <h1>Notify!</h1>
        </div>
        <div id="notify-containers">
            <div class="notify-form">
                <label for="text">Scrape Posts</label>
                <input type="text" id="posts-search-term" name="posts-search-term" placeholder='Example: "My Next Webinar"' />
                <input type="button" id="postsSearchStart" name="postsSearchStart" value="Start" />
            </div>
        </div>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

'use strict';

function changeBodyForTesting() {
    alert('changeBodyForTesting');
    document.body.innerHTML = 'Hello!';
}

postsSearchStart.onclick = function() {
    alert('Button Click');
    chrome.tabs.update({url: 'https://www.amazon.com'});

    // fired when tab is updated
    chrome.tabs.onUpdated.addListener(function openPage(tabID, changeInfo) {
        // tab has finished loading
        if(changeInfo.status === 'complete') {
            // remove listener
            chrome.tabs.onUpdated.removeListener(openPage);
            // execute content script
            chrome.scripting.executeScript(
                {
                    target: {tabId: tabID, allFrames: true},
                    func: changeBodyForTesting
                }, function() {
                    alert('Script executed!');
                }
            );
        }
    });
};

The problem:

When I click in the extension's button, the browser shows the alert "Click", it goes to https://amazon.com, it shows the alert "Script executed!"; but the body HTML never changes.

I don't see the alert "changeBodyForTesting", so I am assuming that the function changeBodyForTesting is never called. But I can't see why.

Upvotes: 0

Views: 203

Answers (1)

Robbi
Robbi

Reputation: 1507

I'm not sure I understand what you want to do.
I say this because I see that you are asking for perhaps too many permissions in your manifest.
I would start to do a test by removing "*://*/*" from "permissions" and adding "host_permissions" in these ways:

"host_permissions": [ "https://www.amazon.com/*" ]

or

"host_permissions": [ "<all_urls>" ]

It is likely that, having not set "host_permissions", when the user clicks on the extension icon, the function "changeBodyForTesting" is injected into the current page (since activeTab is present in the manifest) and not in the amazon page.

Upvotes: 1

Related Questions