為什么我在 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 中“背景外部”字符串的 position，但我的腳本找不到它。 同時，我的“setContent”function 顯示了我從選項卡中拉出的 HTML，它包含我正在尋找的字符串。

當我使用包含我正在尋找的代碼的片段的自定義分配取消注釋字符串時（所以我的 'html.indexOf(...)' 工作正常）。

問題是什么？ 我唯一的想法是編碼可能存在一些問題，但我不知道如何驗證或修復它。

請告知，我錯過了什么。

謝謝！

PS 關於改進我正在做的事情的一般提示也是受歡迎的。

Answer 1

感謝我的朋友，我意識到由 executeScript 傳遞給回調的 object 是一個數組，而不是一個字符串。

為什么我在 Chrome 擴展的選項卡的內容中找不到子字符串

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-12 04:44:16

為什么我在 Chrome 擴展的選項卡的內容中找不到子字符串

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-12 04:44:16

解決方案1
0 已采納 2021-01-12 04:44:16