Why I can't find a sub-string in the content from the tab in Chrome extension

Question

I'm implementing a Chrome extension. Need to find a particular string on the active tab. But when I call "html.indexOf(stringToFind)" I get -1 instead.

Here are essential parts of my extension:

manifest.json

{
    "manifest_version": 2,
    "name": "My Helper",
    "description": "My extension improves User Xperience",
    "version": "1.0",
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
        }
    },
    "permissions": [
        "activeTab",
        "declarativeContent",
        "storage",
        "https://*.mysite.com/"
    ],
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
    }
}

background.js (though I think this is not crucial to the particular problem, I'm presenting this for consistency).

chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostContains: '.mysite.com' },
    })
    ],
    actions: [new chrome.declarativeContent.ShowPageAction()]
  }]);
});

popup.html (only essential part)

<!DOCTYPE html>
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="StatusDiv">Here is a text section</div>
    <p>&nbsp;</p>
    <div id="ContentDiv">Content div... waiting for data</div>
  </body>
</html>

popup.js (only essential part)

function setContent(content) {
    document.getElementById('ContentDiv').innerText = content;
}
document.addEventListener('DOMContentLoaded', function () {

    chrome.tabs.query(
        { active: true, windowId: chrome.windows.WINDOW_ID_CURRENT },
        function (tabs) {
            var tab = tabs[0];
            console.debug("query, url: " + tab.url);

            chrome.tabs.executeScript(tab.Id,
                { code: 'document.querySelector("body").innerHTML' },
                function (html) {
                    console.debug("query:executeScript");

                    //html = `div id="background-outer" class="background-footer `;

                    let k = html.indexOf('background-outer', 0);
                    if (k != -1) {
                        console.debug('Found! k=' + k);
                    } else {
                        console.debug('Can\' find "report" action, k=' + k);
                    }
                
                    setContent(html);
                }
            );
        }
    );

});

As a result of this, I expect to find the position of the "background-outer" string in the HTML from the tab but my script can't find it. At the same time, my 'setContent' function displays the HTML I pulled from the tab AND it contains the string I'm looking for.

When I uncomment the string with the custom assignment of the snippet which contains code I'm looking for (so my 'html.indexOf(...)' works properly).

What is the problem? The only idea I have is that it might be some issues with encoding, but I don't have much clue how to validate or fix that.

Please advise, what I'm missing.

Thanks!

PS General hints on improving what I'm doing are also welcome.

Answer 1

Thanks to my friend I realized that the object passed into callback by executeScript is an array, not a string.

Why I can't find a sub-string in the content from the tab in Chrome extension

Question

1 answers

solution1
0 ACCPTED 2021-01-12 04:44:16

Why I can't find a sub-string in the content from the tab in Chrome extension

Question

1 answers

solution1 0 ACCPTED 2021-01-12 04:44:16

solution1
0 ACCPTED 2021-01-12 04:44:16