Question

我正在尝试创建一个 chrome 扩展，它从隐藏的输入元素中获取一个数字并注入一个显示该数字的 html 表。但是，扩展程序仅在我刷新页面后加载。我从中获取数据的网页是完全静态的，没有任何花哨的东西。只是一个基本的 HTML 页面。当我第一次进入页面时，this 是我得到的错误。当我刷新它时，一切都按照它应该的方式运行

清单文件如下所示。

{
    "name": "Extension name",
    "version": "1.0",
    "description": "Extension description",
    "content_scripts": [
        {
            "matches": ["*://*.example.com/something/*/something"],
            "js": ["/dostuff.js"]
        }
    ],
    "manifest_version": 3
}

这里是 dostuff.js

let hiddenElement = document.getElementById("someId").value;
let var1 = hiddenElement * 2;

let leftCol = document.getElementById("anotherId").parentElement;
let table = document.createElement("table");
table.innerHTML = "<tr><td>Number: </td><td>" + var1 + "</td></tr>"
leftCol.appendChild(table);

非常感谢任何帮助:)

Answer 1

向您的内容脚本添加 run_at 属性以确保它仅在页面加载时运行。

{
    "name": "Extension name",
    "version": "1.0",
    "description": "Extension description",
    "content_scripts": [
        {
            "matches": ["*://*.example.com/something/*/something"],
            "js": ["/dostuff.js"],
            "run_at": "document_end"
        }
    ],
    "manifest_version": 3
}

Chrome 扩展程序仅在页面刷新后加载

1 个答案: