Chrome Extension V3 content.js giving "Uncaught ReferenceError: [function] is not defined" but Function Exists

Question

这是我第一次尝试 Chrome 扩展。 我能够获得运行的扩展并在浏览器上呈现一个叠加层并在叠加层 中创建 select。问题是当我在 content.js 脚本中更改调用另一个函数（例如 fieldCheck）的 select 时，我得到一个错误或“Uncaught ReferenceError: fieldCheck is not defined”。我知道函数在那里，代码作为一个片段。我显然在这里忽略了什么？以下是产生错误的 content.js 代码的简化版本。

[content.js]
var ENV;
var envArray = [
    ['Start Here', ''],
    ['OAO Consumer', 'consumer'],
    ['OAO SME', 'sme']
];

function fieldCheck(currID) {
console.log(currID);
};

function createEnvSel() {
    ENV = document.createElement("select");
    ENV.setAttribute("id", "envSel");
    ENV.setAttribute("onchange", "fieldCheck('envSel')");
    for (var i = 0; i < envArray.length; i++) {
        var option = document.createElement("option");
        option.value = envArray[i][1];
        option.text = envArray[i][0];
        ENV.appendChild(option);
    }
};

function createToolLabels() {
    var cD1 = document.getElementById('cDiv1');
    cD1.innerHTML += 'Pixel Auditing Tool';
};

function createOverlay() {
    var parentDiv = document.createElement("div");

    parentDiv.setAttribute("id", "pDiv");

    parentDiv.setAttribute("style", "position: fixed; top:0; right:0; float:right; width:640px; height: 490px; padding: 15px; z-index: 100; border: 3px solid black; background-color: #ffffff; border-radius: 40px 40px 40px 40px;");

    var child1Div = document.createElement("div");

    child1Div.setAttribute("id", "cDiv1");

    child1Div.setAttribute("style", "position: relative; top:0; left:0; float:left; width:598px; height: 30px; padding-bottom: 10px; text-align: center; vertical-align: middle; line-height: 30px; font-family: Arial; font-size: 24px;  font-weight: normal; color : #000000;");

    var child2Div = document.createElement("div");

    child2Div.setAttribute("id", "cDiv2");

    child2Div.setAttribute("style", "position: relative; top:0; left:0; float:left; width:604px; height: 140px; background-color: #D7E3BF; border-bottom: 5px solid #FFFFFF;");

    var child2Div1 = document.createElement("div");

    child2Div1.setAttribute("id", "cDiv2-1");

    child2Div1.setAttribute("style", "position: relative; left:0; float:left; width:302px; height:70px; border: align-content: center; vertical-align: middle; font-family: Arial; font-size: 13px;  font-weight: bold; display: flex; align-items: center; padding-left: 15px;");

    var txtENV = document.createTextNode('Environment :');

    child2Div1.appendChild(txtENV);

    createEnvSel();

    child2Div1.append(ENV);

    child2Div.append(child2Div1);

    parentDiv.append(child1Div, child2Div);

    document.body.appendChild(parentDiv);
};

function createPixelAuditTool() {
    createOverlay();
    createToolLabels();
};

createPixelAuditTool();

我确实尝试将函数设置为 window 范围，但仍然遇到同样的问题。谢谢！

Answer 1

内容脚本在“孤立的世界”中运行，这意味着它的 JavaScript functions/variables 无法被网页脚本看到，包括 onchange 属性等内联事件处理程序.

替换为：

// bad
ENV.setAttribute("onchange", "fieldCheck('envSel')");

使用下面直接设置函数的代码：

// good
ENV.onchange = evt => fieldCheck('envSel');

Chrome Extension V3 content.js giving "Uncaught ReferenceError: [function] is not defined" but Function Exists

Chrome Extension V3 content.js giving "Uncaught ReferenceError: [function] is not defined" but Function Exists

javascript

google-chrome-extension