Javascript - 没有定义ReferenceError x（函数）

Trying to do Chrome extension development. Problem is I don't know how to use JavaScript.

尝试进行Chrome扩展开发。问题是我不知道如何使用JavaScript。

Currently I think the issue is that I don't know how to call or define functions.

目前我认为问题在于我不知道如何调用或定义函数。

Calling page_PostData() results in an undefined exception:

调用page_PostData()会导致未定义的异常:

VM150:13 Exception ocurred: ReferenceError: page_postData is not defined

VM150:13出现异常:ReferenceError:未定义page_postData

This code is slightly modified from the sample extension Chrome Query:

此示例稍加修改,来自示例扩展程序Chrome查询:

https://developer.chrome.com/extensions/examples/api/devtools/panels/chrome-query.zip

devtools.js

function page_postData(variableData) {

    console.log("Trying to do AJAX POST...");
};


function page_getData() {

    try {

        console.log("Trying to get data..");

        // Not defined.
        page_postData("Test1");

    } catch (exception) {

        console.log("Exception ocurred:\n" + exception.toString());
    }

    return $0;
};


chrome.devtools.panels.elements.createSidebarPane(
    "Element Properties",
    function(sidebar) {
  function updateElementProperties() {
    sidebar.setExpression("(" + page_getData + ")()");
  }
  updateElementProperties();
  chrome.devtools.panels.elements.onSelectionChanged.addListener(
      updateElementProperties);
});

manifest.json

{
    "manifest_version": 2,
    "name": "Chrome Extension Test",
    "version": "0.1",
    "description": "Dev tools test extension",
    "devtools_page": "devtools.html",
    "background": {
        "scripts": ["devtools.js"]
    },
    "permissions": [
        "tabs", 
        "http://*/*", 
        "https://*/*"
    ]
}

devtools.html

<html>
<body>
<script src="devtools.js"></script>
</body>
</html>

How do I define 'page_postData()' correctly?

如何正确定义'page_postData()'?

How do I call 'page_postData()' from inside 'page_getData()' correctly?

如何从'page_getData()'中正确调用'page_postData()'?

2 个解决方案

#1

Context issue, since the expression will be evaluated in context of the inspected page, there would be no definition for page_postData.

上下文问题,因为表达式将在被检查页面的上下文中进行评估,所以没有page_postData的定义。

You can create an IIEF to wrap the two functions, sample code would looks like:

您可以创建一个IIEF来包装这两个函数,示例代码如下所示:

function run() {
    function page_postData(variableData) {
        console.log("Trying to do AJAX POST...");
    }

    return (function page_getData() {
        try {
            console.log("Trying to get data..");
            page_postData("Test1");
        } catch (exception) {
            console.log("Exception ocurred:\n" + exception.toString());
        }
        return $0;
    })();
}

chrome.devtools.panels.elements.createSidebarPane(
    "Element Properties",
    function(sidebar) {
        function updateElementProperties() {
            sidebar.setExpression('(' + run + ")()");
        }
        updateElementProperties();
        chrome.devtools.panels.elements.onSelectionChanged.addListener(updateElementProperties);
    }
);

#2

To run page_postData() from page_getData() you need to pass correct context. You should learn more about bind and apply functions. In your example you sould call page_getData() in the way like this: page_getData.bind(this)().

要从page_getData()运行page_postData(),您需要传递正确的上下文。您应该了解有关绑定和应用函数的更多信息。在您的示例中,您可以通过以下方式调用page_getData():page_getData.bind(this)()。

#1