Javascript chrome扩展中的getElementById_Javascript_Onclick

Javascript chrome扩展中的getElementById

javascript

Javascript chrome扩展中的getElementById,javascript,onclick,Javascript,Onclick,我已经为扩展编写了一个代码，但它不起作用：我无法在文档或扩展弹出窗口中获取ElementById。我想当我点击弹出文本扩展开始游戏。 HTML代码 <!DOCTYPE html> <html> <head> <style> p {color: purple;} </style> </head> <body> <p id="pocinje"> Ekstenzija je pokrenuta

我已经为扩展编写了一个代码，但它不起作用：我无法在文档或扩展弹出窗口中获取ElementById。我想当我点击弹出文本扩展开始游戏。 HTML代码

    <!DOCTYPE html>
<html>
<head> 

<style> p {color: purple;} </style>
</head>
<body>
<p id="pocinje"> Ekstenzija je pokrenuta i ceka se vrijeme za pocetak. </p>
<script src="background.js"> </script>
</body>
</html>

如何修复此问题？

在代码中，您正在使用

onclick

事件处理程序：

其中

functionRef

是一个函数：在别处声明的函数名（1）或函数表达式（2）

因此，您可以：

使用函数标识符后的括号调用函数：

document.getElementById("pocinje").onclick = function() {
    open()
};

或者直接将函数传递给属性

onclick

：

document.getElementById("pocinje").onclick = open

扩展弹出窗口不能直接与“选项卡”内容（您的网页）交互。

只有“背景”和“内容”脚本才能与“选项卡”内容交互。“弹出”脚本只能向他们发送一条消息：可以在其中插入另一个脚本（点击“选项卡”内容）

1/您必须在“弹出”脚本和其中一个脚本之间建立通信

2/您的操作必须通过正确的扩展脚本插入到“选项卡”内容中

manifest.json:

首先，必须在清单中声明要与选项卡内容交互：

"permissions": ["tabs", "<all_urls>"],

第三，您必须声明您的“弹出窗口”（仍在清单中）：

现在您已经设置了扩展，以下是您可以使用的主要脚本：

popup.html:

弹出窗口插入将与“background.js”通信的“popup.js”文件：

background.js：

后台脚本在弹出窗口和自身之间创建通信，并抛出“chrome.runtime”，如果消息正确，将在选项卡内容中插入代码：

// opens a communication port
chrome.runtime.onConnect.addListener(function(port) {

    // listen for every message passing throw it
    port.onMessage.addListener(function(o) {

        // if the message comes from the popup
        if (o.from && o.from === 'popup' && o.start && o.start === 'Y') {

            // inserts a script into your tab content
            chrome.tabs.executeScript(null, {

                // the script will click the button into the tab content
                code: "document.getElementById('pageBtn').click();"
            });
        }
    });
});

此处的更多信息：

调用函数时，在函数标识符后使用括号：此处写入

open（）

而不是

open

谢谢，但脚本的一部分仍然不起作用。截图；“background.js:4 Uncaught TypeError:无法读取null的属性'click'”“StartNewName”是网站元素的ID，但脚本未识别它是

document.getElementById（“StartNewName”）。单击（）不工作，因为ID为startNewGame
的元素不存在。是的，但它存在于我当前运行扩展的网站上。有什么方法可以解决这个问题吗？您能console.logdocument.getElementById（“startNewName”）并告诉我返回了什么吗？
"permissions": ["tabs", "<all_urls>"],

"background": {
    "scripts": ["background.js"]
},

"browser_action": {
    "default_popup": "popup.html"
}

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="popup.js"></script>
</head>
<body>

    <a id="popupBtn">Click me</a>

</body>
</html>

// always waits the document to be loaded when shown
document.addEventListener('DOMContentLoaded', function() {

    // opens a communication between scripts
    var port = chrome.runtime.connect();

    // listens to the click of the button into the popup content
    document.getElementById('popupBtn').addEventListener('click', function() {

        // sends a message throw the communication port
        port.postMessage({
            'from': 'popup'
            'start': 'Y'
        });
    });
});

// opens a communication port
chrome.runtime.onConnect.addListener(function(port) {

    // listen for every message passing throw it
    port.onMessage.addListener(function(o) {

        // if the message comes from the popup
        if (o.from && o.from === 'popup' && o.start && o.start === 'Y') {

            // inserts a script into your tab content
            chrome.tabs.executeScript(null, {

                // the script will click the button into the tab content
                code: "document.getElementById('pageBtn').click();"
            });
        }
    });
});