为什么我在 Chrome 扩展中的选项卡的内容中找不到子字符串

Question

我正在实施 Chrome 扩展。需要在活动选项卡上找到特定的字符串。但是当我调用“html.indexOf(stringToFind)”时，我得到的是 -1。

以下是我的扩展程序的重要部分：

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（虽然我认为这对特定问题并不重要，但我提出这个是为了保持一致性）。

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（仅必要部分）

<!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（仅必要部分）

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);
                }
            );
        }
    );

});

因此，我希望从选项卡中找到 HTML 中“background-outer”字符串的位置，但我的脚本找不到它。同时，我的 'setContent' 函数显示我从选项卡中拉出的 HTML 并且它包含我要查找的字符串。

当我使用包含我正在寻找的代码的代码段的自定义分配取消注释字符串时（所以我的 'html.indexOf(...)' 可以正常工作）。

有什么问题？我唯一的想法是编码可能存在一些问题，但我不知道如何验证或修复它。

请指教，我缺少什么。

谢谢！

P.S。也欢迎提供有关改进我正在做的事情的一般提示。

Answer 1

感谢我的朋友，我意识到executeScript传递给回调的对象是一个数组，而不是一个字符串。

为什么我在 Chrome 扩展中的选项卡的内容中找不到子字符串

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

javascript

google-chrome-extension