Javascript

Question

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

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

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

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

此代码是从示例扩展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 [=11=];
};


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>

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

如何从 'page_getData()' 内部正确调用 'page_postData()'？

Answer 1

To 运行 page_postData() from page_getData() 您需要传递正确的上下文。您应该了解有关 bind 和 apply 函数的更多信息。在您的示例中，您可以按如下方式调用 page_getData()：page_getData.bind(this)().

Answer 2

上下文问题，因为表达式将在检查页面的上下文中计算，所以 page_postData 没有定义。

您可以创建一个 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 [=10=];
    })();
}

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

Javascript - ReferenceError x 未定义（函数）

Javascript - ReferenceError x is not defined (function)

google-chrome-extension

google-chrome-devtools